Update (09/18/2019) – My pull-request for this feature was adopted into dc-js so this canvas-based scatterplot implementation can now be used directly within the dc.js library – https://github.com/dc-js/dc.js/pull/1361
dc.js is an excellent visualization library that enables easy slicing and dicing of multi-dimensional data with beautifully rendered and responsive SVG charts. While SVG-based rendering enables easy generation of beautifully animated, data-driven charts and visualizations, managing thousands of SVG elements in the DOM can result in a lot of overhead. When plotting several thousand data points, SVG becomes a bottleneck and the user experience suffers greatly. This is particularly evident when using dc.js scatter plots as typical use cases involve applying 2D brushes on these plots to interactively filter datasets.
On the other hand, HTML5 Canvas-based visualizations involve very little overhead since they are raster-based. Thus, canvas visualizations are typically only limited by the speed at which the client can process and pipe data for plotting to the canvas element. This improvement in performance unfortunately comes at the expense of having to write more verbose and “low-level” code to generate data visualizations that would only take a few lines of code when using d3 and SVG graphical elements.
Currently, the dc.js scatter plot implementation struggles to handle more than a few thousand points. The appeal of dc.js charts lie in their smooth animations and near-instantaneous chart response when filtering along different dimensions of the data being explored. In order to overcome the limitations of the current SVG based implementation, I spent some time implementing a canvas based dc.js scatter plot library and Continue reading Interactive Canvas based dc.js scatter plots for performant data visualizations