CODEWITHSUNDEEP
javascriptd3.jscrossfilterdc.js
supergalactic
supergalactic

Reputation: 497

First 2 entries on stacked bar chart not displaying in dc.js / d3.js

I am learning d3 and dc.js for a visualiation project. The URL to my experiment is here: http://junklogic.com/d3scratch/index.html

I have a small CSV file of 10 entries as follows. I have 2 problems that have to do with the first 2 entries: 

creature_name,seenby,date,severity
Dragon,Bob,2013-11-11T10:23:24,1
Dire Wolf,Sue,2013-11-11T08:24:23,3
Unicorn,Jim,2013-11-12T11:10:10,1
Unicorn,Ann,2013-11-12T12:45:45,1
Kraken,Bob,2013-11-12T08:31:51,2
Chimera,Ann,2013-11-12T01:05:08,2
Unicorn,Ann,2013-11-13T04:49:36,1
Unicorn,Bob,2013-11-14T09:22:26,1
Chimera,Ann,2013-11-16T12:37:04,2
Troll,Ann,2013-11-18T18:01:58,3

The 2 problems I have are:

  1. The first 2 entries representing the first day (2013-11-11) are not displaying in the bar chart. The data table and pie chart are displaying the data properly (all 10 entries).
  2. The "severity" is a count from 1 to 3. The bar chart is displaying 0 to 2. The data table and pie graph are displaying properly.

Thank you in advance for any help. This is a new experience and I hope my code is understandable.

Upvotes: 0

Views: 675

Answers (1)

DJ Martin
DJ Martin

Reputation: 2579

Your domain for the x-axis is "2013-11-11T10:23:24" to "2013-11-18T18:01:58".

    var xScale = d3.time.scale().domain([new Date(data[0].date), new Date(data[data.length - 1].date)]);

Your x dimension is rounding to the day, so your bar will be rendered at "2013-11-11T00:00:00". Therefore the first two values are less than the lower end of the domain. You might want to calculate the domain using d3.time.day... with perhaps a day buffer on each end.

    var severityByDay = info.dimension(function(d) {
        return d3.time.day(d.date);
    });

Try this to see all the bars:

    var xScale = d3.time.scale().domain([new Date(2013, 10, 10), new Date(2013, 10, 19)]);

As for the legend on the bar chart, you'll want to name each stack... otherwise it will default to the index of the stack.

From https://github.com/NickQiZhu/dc.js/blob/master/web/docs/api-latest.md#stack-mixin:

.stack(group[, name, accessor])Stack a new crossfilter group into this chart with optionally a custom value accessor. All stacks in the same chart will share the same key accessor therefore share the same set of keys. In more concrete words, imagine in a stacked bar chart all bars will be positioned using the same set of keys on the x axis while stacked vertically. If name is specified then it will be used to generate legend label.

This seems to show the correct values and the correct colors:

.group(severityHigh, "1")
        .stack(severityMed, "2")
        .stack(severityLow, "3")
        .colors(graphColors)
        .colorDomain([1, 3])

I hope this helps! -DJ

Upvotes: 1

Related Questions