Multi-Series Line Chart using DC.JS

Question

I'm working on a project building an analytics dashboard for a local city organization to visualize basic statistics about users of a mobile app. I've been using the dc.js library to build linked charts, and have made some headway on an initial dashboard, but am having trouble generating a line chart. This problem seems similar to the one posted here with bar charts.

Here is a portion of the data:

unique_id,dates,purpose,num,wday,epoch
1,10/10/2012,Commute,1,2day,1349827200
2,10/11/2012,Commute,4,3day,1349913600
5,10/12/2012,Commute,13,4day,1350000000
11,10/13/2012,Commute,1,5day,1350086400
16,10/14/2012,Commute,1,6day,1350172800
22,10/15/2012,Commute,14,0day,1350259200
26,10/16/2012,Commute,44,1day,1350345600
32,10/17/2012,Commute,60,2day,1350432000
39,10/18/2012,Commute,34,3day,1350518400
47,10/19/2012,Commute,47,4day,1350604800
55,10/20/2012,Commute,3,5day,1350691200
63,10/21/2012,Commute,4,6day,1350777600
69,10/22/2012,Commute,56,0day,1350864000
77,10/23/2012,Commute,63,1day,1350950400
85,10/24/2012,Commute,77,2day,1351036800
93,10/25/2012,Commute,55,3day,1351123200
100,10/26/2012,Commute,54,4day,1351209600

Each row contains a cycling trip with a unique id, date of trip, purpose of the trip, and num which denotes how many trips pertain to that particular grouping of trip categories (i.e. trips that were for purpose "Commute" on date "10/23/2012"). Here's the code that's pertinent to generating the line chart.

var timeChart = dc.linechart("#time-chart")

d3.csv("trips2.csv", function(data) {
        var dateFormat = d3.time.format("%m/%d/%Y");
        var numberFormat = d3.format(".2f");

        data.forEach(function(d) {
            d.dd = dateFormat.parse(d.dates);
            d.month = d3.time.month(d.dd);
            d.day = d3.time.day(d.dd);
            d.year = d.dd.getFullYear();
            d.num = +d.num;
            d.purpose = d.purpose;
        });

var facts = crossfilter(data);
var dateDimension = facts.dimension(function(d) {
        return d.dd;
    });

minDate = dateDimension.bottom(1)[0];
maxDate = dateDimension.top(1)[0];
var numberByDate = dateDimension.group().reduceSum(function(d) { return d.num; });

timeChart
        .renderArea(true)
        .width(900)
        .height(300)
        .brushOn(false)
        .dimension(dateDimension)
        .group(numberByDate)
        .x(d3.time.scale().domain([minDate, maxDate]))
        .xUnits(d3.time.day)
        .renderHorizontalGridLines(true)
        .elasticX(true)
        .elasticY(true)
        .legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
        .yAxisLabel("Number of Cyclists");

dc.renderAll();

I think my confusion stems from the map-reduce functions of grouping counts by date. Any help would be greatly appreciated. Here's a screenshot of the resulting chart. enter image description here

EDIT: not sure how helpful this will, but there is a Gist of the full code available here: http://gist.github.com/kylejshaffer/1f826e09f90698434445. Can't get the charts to render on the bl.ocks.org site, but there is also a link to the code there: http://bl.ocks.org/kylejshaffer/1f826e09f90698434445.

Ah, the blank chart, our trusty old friend. This FAQ might help to see if you've got data. Also, it will be easier for us to help you debug if you create a jsfiddle or similar. — Gordon

Gordon Gordon · Accepted Answer · 2014-06-18T00:12:59

I think your first step is to get up close and friendly with your browser's debugger (e.g. Developer Tools in Chrome).

Here is a fork of your gist with colorbrewer.js added and removing a 2.0 property which wasn't available in version of dc.js you linked to:

http://bl.ocks.org/gordonwoodhull/749621d8d22097cf29e9

As I suggested above in the FAQ, I set a debugger breakpoint before the charts started loading, and took a look at some of the values.

These lines:

minDate = dateDimension.bottom(1)[0];
maxDate = dateDimension.top(1)[0];

fetch records, not dates. Changing them to read the day fields from the records:

minDate = dateDimension.bottom(1)[0].day;
maxDate = dateDimension.top(1)[0].day;

.. at least got some dates to show on the axis, but no items. So you just kind of proceed in this fashion:

Do the group.all() functions return what you expect?
Do the the accessors work when you run them manually on the reduced groups' items, in the debugger console?

Etc etc, "debug until done."

Hope this helps!

Multi-Series Line Chart using DC.JS

1 Answers