Databases
StackOverflow2013
Postsdbo
POPlot as many circles as histogram values under the histogram line
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPlot as many circles as histogram values under the histogram line
    primarykey
    data
    text
    <p>as the title suggests I am trying to visualize the value of the histogram bins using circles under the line itself. To achieve this I thought that the best option vould be to use a dotted line, but as of now I am not that sure. The problem I am having is, since this histogram is interactive, the bins can be changed so the circles should scale accordingly.<br> What I have so far is accessible here:<br> <a href="http://dl.dropboxusercontent.com/u/37967455/confronto_pesi.html" rel="nofollow noreferrer">http://dl.dropboxusercontent.com/u/37967455/confronto_pesi.html</a><br> (please check the sans box and use that line as reference) <br> As you can see, using the slider sometimes returns the correct amount of dots and sometimes doesn't.<br> My guess is that it could be related to the width and spacing of the dots. <br> The part used to build the dotted lines is like so (I used two lines to fake the circles):</p> <pre><code>var dline1 = svg.append("g") .attr("id", "dline1"); dline1.selectAll("line") .data(histogSans) .enter() .append("line") .attr("x1", function (d, i) { return x(histogSans[i].x); }) .attr("x2", function (d, i) { return x(histogSans[i].x); }) .attr("y1", y(1)) .attr("y2", function (d, i) { return y(histogSans[i].y); }) .attr("stroke", "#386cb0") .attr("stroke-width", 4) .attr("stroke-linecap", "round") .attr("stroke-dasharray", "0, " + parseFloat(y(32.75)) + ""); var dline2 = svg.append("g") .attr("id", "dline2"); dline2.selectAll("line") .data(histogSans) .enter() .append("line") .attr("x1", function (d, i) { return x(histogSans[i].x); }) .attr("x2", function (d, i) { return x(histogSans[i].x); }) .attr("y1", y(1)) .attr("y2", function (d, i) { return y(histogSans[i].y); }) .attr("stroke", "white") .attr("stroke-width", 2) .attr("stroke-linecap", "round") .attr("stroke-dasharray", "0, " + parseFloat(y(32.75)) + ""); </code></pre> <p>Can it be done in an easier way, maybe using circles instead? What I was not sure using circles was how to put them in the right place and right number, like the dotted line I'm trying to do. <br>Any help would be great, thanks!</p> <p>EDIT: Sorry didn't realize that this (kind of) worked in safari but not on chrome, what I am trying to get is: <img src="https://i.stack.imgur.com/eefDd.png" alt="enter image description here"> but that the circles get updated with the slider also and show the correct number of circles matching the histogram value</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. UStomtomtom
    1. UStomtomtom
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CONot sure what you're trying to do here. Something like a [beeswarm plot](http://www.cbs.dtu.dk/~eklund/beeswarm/)?
      singulars
      1. POPlot as many circles as histogram values under the histogram line
      1. USLars Kotthoff
    2. COno, the result I'm getting without changing the histogram bins is what I want to achieve. The circles should show how many entries are in that bin, so the way they are now is ok
      singulars
      1. POPlot as many circles as histogram values under the histogram line
      1. UStomtomtom
    3. COwhat I mean is, if the value of the point of the histogram says 130 there should be 130 circles under the line, this doesn't happen right now and that's what I'm not able to fix, maybe using circles instead of the dotted line will resolve the problem
      singulars
      1. POPlot as many circles as histogram values under the histogram line
      1. UStomtomtom
 

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.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload