0
votes

I've been working with a dashboard of linked charts to visualize cycling data and would like to add a calendar/heatmap as the final chart. I've looked at this similar question and this discussion in the dc.js Google Group, but it looks as though both have gone cold.

I'd like to display days of the week along the x-axis, hours of the day along the y-axis, and have color signify a count of how many people ride on a given day of the week at a given hour. That is, I would like the cell in the heatmap corresponding to Wednesdays at 12pm to signify the total number of riders that ride on any Wednesday at 12pm (and so on for all other days and hours). The major issue is in how I'm splitting up the variables in crossfilter. The x-axis looks correct, but the y-axis is currently displaying NaN's.

I've been trying to follow examples such as this one, but the main issue is that these examples stem from data containing a column with pre-calculated values to be mapped to cell color. I need to simple count the number of records that meet certain criteria (i.e. how many riders on all Thursdays at 10am?) and map these values to the color. Any help would be appreciated. Code and representative subset of data here, viz here.

1

1 Answers

2
votes

I believe

d.hour = d3.time.hour(d.dd);

results in a Date object getting assigned to d.hour when what you actually need is a number. You then cast that object to a number in the valueAccessor, which results in the NaN problem. Maybe try changing that to

d.hour = +d.dd.getHours();

and see if that gets rid of the NaN issue?