StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUpdate Histogram Bins with html range slider
primarykey
Id
20704199
data
AcceptedAnswerId
0
AnswerCount
2
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-12-20T13:01:16.523
FavoriteCount
0
LastActivityDate
2013-12-20T17:57:29.520
LastEditDate
2013-12-20T14:05:50.833
LastEditorUserId
2135194
OwnerUserId
2135194
ParentId
0
PostTypeId
1
Score
0
ViewCount
769
LastEditorDisplayName
text
Body
<p>I'm trying to modify the bins of an histogram layout through an html slider, with no success.<br> The code I tried running for the slider is:</p> <pre><code><div id = "range"> <input type="range" min="1" max="50" step="1" value="25"> </div> </code></pre> <p>Then I set the <code>bins</code> of the histogram to <code>var bin</code>.<br> The js code to update the bins with the value of the range slider:</p> <pre><code>d3.select("#range") .select("input") .on("change", function () { this.value == bin; //The two histogram variables, line and path generators histogSans = d3 .layout.histogram() .bins(bin) .value(function (d) { return d.Peso; }) (FontSans); histogSerif = d3 .layout.histogram() .bins(bin) .value(function (d) { return d.Peso; }) (FontSans); line = d3.svg.line() .x(function (d) { return x(d.x); }) .y(function (d) { return y(d.y); }); SansPath = svg .transition() .duration(1500) .attr("d", line(histogSans)); }); </code></pre> <p>where <code>histogSans</code> & <code>histogSerif</code> are the generators of the histogram values, <code>line</code> is the line generator and <code>SansPath</code> & <code>SerifPath</code> are the path generators that follow the histogram values.</p> <p><br><br> <strong>EDIT:</strong> thanks to cuckovic I am now able to get the right value out of the slider, with <code>bin = this.value;</code>, but the console log of the histogram now returns a wrong array, containing just an array of all the values in the dataset, so the values are not plotted correctly! anyone knows why this happens? Full code here: <a href="http://dl.dropboxusercontent.com/u/37967455/confronto_pesi.html" rel="nofollow">http://dl.dropboxusercontent.com/u/37967455/confronto_pesi.html</a></p>
Tags
<javascript><d3.js><histogram>
Title
Update Histogram Bins with html range slider
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. UStomtomtom
UserOwnerUserId
1. UStomtomtom
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.