Interactive Canvas based dc.js scatter plots for performant data visualizations

Posted on Tags , ,

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

Building a sortable (and clickable!) table with dc.js and crossfilter

Posted on Tags , , , ,

I’ve recently been playing around with dc.js to build some neat interactive data visualizations and dashboards to analyze the performance of machine learning models. The interactive data-slicing and visualizations enabled by dc.js and crossfilter are perfect for digging deep into any type of multi-dimensional data.  They help with gaining a more intuitive understanding of the data, and help me better understand the performance and deficiencies of different machine learning models.

One of the less “fancy” dc.js widgets is the dataTable. That isn’t meant as a criticism, just that it doesn’t look nearly as impressive out of the box as the slickly animated charts that you are likely accustomed to if you have used dc.js a fair bit. This of course is completely understandable since the goal of the dataTable class is to provide a flexible interface to an object that enables the generation of tables that can then be styled and tweaked per the user’s desires. Continue reading Building a sortable (and clickable!) table with dc.js and crossfilter

Understanding the difference between the d3 data and datum methods

Posted on Tags ,

One of the neatest and simultaneously confusing aspects of D3 is its data binding methods selection.data and selection.datum that bind data to elements in the DOM. These methods while seemingly simple, enable effortless generation of very complex data visualizations by virtue of keeping visualization elements in the DOM closely coupled to the data being visualized. However, if you browse through the d3 API, it can be a bit difficult to discern the difference between the selection.data and selection.datum methods and when one should prefer one over the other. This post aims to clarify the subtle and not-so-subtle differences between these methods. Continue reading Understanding the difference between the d3 data and datum methods

Adding auto-aligned X and Y-axis labels to dc.js row charts

Posted on Tags , ,

I’ve recently been playing around with dc.js, crossfilter and d3 and have been thoroughly enjoying myself in the process. After testing the waters, I dove in head first and I’m currently building some neat interactive dashboards for slicing and dicing multidimensional data as a fun project in my spare time.

One of the slight quirks in dc.js is that the dc.rowChart chart type does not inherit from the dc.coordinateGridMin mixin and as a result, does not expose any easy way of programmatically binding X- and Y-axis labels to the chart. After playing around for a bit, I was able to come up with the following approach to easily bind axis labels to the row chart while ensuring that they remain centered about the X- and Y-axes without the need for any hacky manual offsets in the code. Continue reading Adding auto-aligned X and Y-axis labels to dc.js row charts