Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There are a couple of small things that threw you off. First, the domain of the x0 scale should be an array of datetime objects, not an array of strings:</p> <pre><code>x0.domain(data.days.map(function(d) { var str = d.modified; d.date = parseDate( str.substring(0, str.length - 3) ); return d.date; })); </code></pre> <p>will return datetimes, not strings like it was before (minor nitpick: really not a fan of this use of <code>map</code>, I would add the date property separately in a forEach function as the data is loaded). </p> <p>Second, x0 needs to be passed a property that actually exists:</p> <pre><code>var state = svg.selectAll(".state") .data(data.days) .enter().append("g") .attr("class", "g") .attr("transform", function(d) { return "translate(" + x0(d.date) + ",0)"; }); </code></pre> <p>Before, you were using <code>x0(d.state)</code> which is a vestige from the grouped bar example (several others still exist; I've changed the minimum to get your project working). Since the value didn't exist, all of the rectangles were getting drawn over each other. </p> <p>Additionally, we need to format the axis labels so we aren't printing out the entire datetime object all over the labels:</p> <pre><code>var xAxis = d3.svg.axis() .scale(x0) .orient("bottom") .tickFormat(d3.time.format("%m-%d")); </code></pre> <p>Finally, I noticed that the newest dates were being printed on the left instead of the right. You could sort the results of <code>data.days.map( ... )</code> to fix that, I just reversed the range of x0: </p> <pre><code>var x0 = d3.scale.ordinal() .rangeRoundBands([width, 0], .1); </code></pre> <p><a href="https://github.com/1wheel/learning/tree/master/stacktest/D3.js%20graph%20displaying%20only%20one%20dataset" rel="nofollow">fixed files</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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