dc.js / crossfilter performance issue 12,000+ rows of CSV data

Question

I'm having some performance issues with using dc.js and crossfilter. I'm creating a set of graphs displaying different dimensions of some cycling data (code here, data here, viewable here). The charts render after a few second or two, but the main performance issues occur when clicking any of the graphs - the transition animations kind of "snap" after a delay, and it's a bit jarring. I've also noticed that just removing the empty line chart at the top of the page causes the three remaining graphs to perform much better with transitions returning to normal.

I've looked at a few similar questions such as this one, but this doesn't necessarily seem applicable since I'm not splitting by multiple dimensions at one time. Is 12,000 records just getting toward the upper end of what crossfilter can handle? The file is only about 1.4 MB, so that seems a little surprising that there would be issues at this size, but maybe all this demonstrates is a lack of understanding on my part. Would greatly appreciate any pointers on this one as I'm stumped. Thanks for reading.

Answer 1

Usually this means something is slowing down the Crossfilter updates, resulting in the browser freezing until most of the transition is already done.

The only thing that sticks out at me is that you have 2 variable declarations in the accessor function for your dayOfWeek dimension. It would be better to define that property up-front when you load your data.

The only other possible problem I see is the Date object in your data and the dimension defined based on it. These types of complex objects can slow things down quite a bit (and the d3.js date parsing isn't extremely fast), but I don't see that showing up as a major problem in the Chrome profiler, so I don't think that's what's slowing you down here.