Contact us now for a free tech consultation +5492235066274 hello@xoor.io

Without a doubt D3.js has become the go-to technology when it comes to data visualization on a web browser. With D3 you can do almost whatever you can imagine in terms of dynamic and interactive infographics for data visualization on the browser using technologies like SVG, HTML5 and CSS. One of the big pros of D3 is it’s flexibility, which usually gets translated into increased complexity when building new things.

At XOOR we’ve been working lately for one of our customers on a project that required a migration of a set of plots that were implemented with a Python library into a more robust, scalable solution. Some of the main characteristics of the legacy code were:

  • Plots were rendered using SVG
  • Plots were rendering (very) big amounts of data in the range of ~2 to ~25 megabytes of raw JSON data.
  • Plots had different features like zoom and panning, box zooming, tooltips to show values, etc.

The main problem was that using SVG, the browser has to handle a huge amount of data and usability reaches the lowest level a human being could accept (yeah, it’s that bad). Imagine your browser handling millions of elements like this:
<circle cx="25" cy="75" r="20" stroke="red" fill="red"/>

Once you add a few features like zoom and panning, your browser will die.

Once you start reading about D3, you’ll find most examples use SVG to draw. But there’s an alternative which is extremely better for large amounts of data. It comes with added complexity, but once you get used to it and learn how to handle things, you’ll see why it’s much better for some use cases.

Canvas to the rescue!

So what’s a canvas? According to MDN:

Added in HTML5, the HTML <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.

With canvas, instead of managing millions of elements in the browser, we handle just 1 (well, it’s more than 1 actually as you’ll see later we need some SVG to handle plot axes… but it’s nothing compared to millions), and use it as a whiteboard to draw our plots content on it with a simple but complete Javascript API.