Working With Large Datasets
How do a few different libraries handle large datasets? I didn't take the time to actually instrument the rendering performance, so the results are purely vibes-based.
Excuse the terrible UX here. As you click the buttons, charts will render. The performance may be terrible and you won't receive any loading feedback!
Vega Lite (canvas)
Vega has no problem rendering this dataset in a canvas.
Vega Lite (svg)
Vega struggles on this dataset in SVG. Here's 10000 points, which still makes my computer's fan go on overdrive.
Observable Plot
Observable Plot uses SVG to render charts so there are actually 100000 <circle> elements in the DOM. This doesn't scale super well, but it seems like Observable still handles this fairly well.
Nivo (svg)
Nivo's SVG implementation can't handle large datasets well. It's very slow and the browser will freeze. Here's 1000 points instead, which is still pretty slow.
Nivo (canvas)
Much better.
ECharts (svg)
ECharts seems ok in SVG.
ECharts (canvas)
ECharts has no problem chewing through this dataset in a canvas.
Some takeaways:
- Canvas is broadly superior to SVG for rendering large datasets (fairly obvious, but still nice to see)
- Rendering performance varies a lot between libraries. Nivo and Vega's SVG implementations are unacceptable on large datasets, whereas ECharts and Observable Plot are still quite performant.
- Everything using canvas handled large datasets well