bar chart animations can hang Chrome if too many elements

[gordonwoodhull]

I put a workaround into this example to disable transitions if there are too many elements, but if you use the following arguments, it hangs Chrome (macOS) almost every time.

http://dc-js.github.io/dc.js/examples/switching-time-intervals.html?interval=Days&unsafe

Looks like the transition never ends and this pegs the processor. Chrome becomes unresponsive and must be killed. Firefox and Safari appear to be okay, if sluggish.

I guess it's not our bug but it's really bad. Maybe we could detect if too many elements are being transitioned? Sigh.

[akuji1993]

As a sidenote, your example works perfectly fine for me in Chrome on MacOS Sierra. Did you try on multiple pc's already?

[gordonwoodhull]

Thanks @akuji1993.

Good point, I don't see it on my laptop with a slightly newer processor. I expect that a larger example would still trigger it, but then I'm not sure how we would dynamically detect what is too much for any one machine/os/browser. Hmmm.

[akuji1993]

Thing is, what comes first, unbearable loading times or this error? I know that the company I'm developing dc code for right now, is aware that billions of rows are not going to render in a second, so they cluster their data beforehand. Still, shouldn't completely shut down on big datasets :/

[gordonwoodhull]

It's much easier to blow up the browser via the DOM than via JavaScript data. So yes, this issue happens well before the download gets unbearable. The dataset here is less than 7000 rows, which is no problem to process but wayyy too many DOM elements to draw.

Maybe the best thing to do is detect when the number of elements is going to be more than some multiple of the screen width of the chart. Print warning to the debug console and sample the data.

In general dc.js has very few footgun prevention measures but this is much worse than the typical blank chart.

[akuji1993]

That sounds like a good idea, good way to go with this, I think. Kinda sad, that the DOM just can't handle this.