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:

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:

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.

This is the main reason why we chose Canvas as our drawing whiteboard instead of SVG. It wasn’t easy, and it took a considerable amount of time to build the base components, but we consider ourselves at a point where we understand what’s going on. So we thought, why not sharing what we learnt with the people out there! :)

The goal is to write a few posts with some very basic examples of how to build cool things with D3 and HTML canvas. The first one here will help you build the basics of a scatter plot drawing thousands of random points into a D3 canvas.

As always, you’re welcome to skip all our writings and head over to the Github repo where this tutorial is hosted:

And here the working example in Github pages:

Since we want to keep things simple enough, we’ll build the plots using plain HTML, Javascript and CSS. You can go ahead and build the same with your favorite frontend framework, but we won’t cover details about that in this posts.

The following code will be all we need in our index.html file:

gist:mpayetta/1dd8d156fdfd935738c40105f7001574

There you can see that we are importing a few things like a styles.css file and two scripts: the D3 v5 script and our plot.js script. Finally we define the scatter plot container as the unique content of our .

Our stylesheet looks pretty simple:

gist:mpayetta/7422de74e7ce666ee92cd527f5450dec

As you can see, we will build a plot with size 800x600 pixels and we want it to be centered on the screen. We define then two classes for the main canvas where the points will be drawn and an SVG container on which we’ll be drawing the axes.

Now it’s time to write some Javascript to build our plot. The first thing we have to do is create some random data. The code we’re using for that purpose is pretty simple as you can see in the *plot.js *file:

gist:mpayetta/04a7520b06f71ac5de92402c725f504a

In this piece of code, we define *dataExample, *which is an array that will contain the points to be drawn on our scatter plot. We’re pushing to it 10000 points defined by the x and y coordinates. These numbers will be totally random within the 1..999999 range.

Next step is to define a few constants to control the look and feel of our plot:

gist:mpayetta/dc9a865f5ca15278800fde18186c2e00

Now it’s time to write D3 related code. Let’s see how that looks like and we’ll explain details afterwards:

gist:mpayetta/516b56a7b6ff4c54bc3e974ad523603f

Now we need to take care of the D3 Scales. As the main Github repo for d3-scale explains:

D3 scales are the elements that will allow us to define the mapping of those numbers we generated randomly before to a position in pixels for dots in our scatterplot. Let’s see how can we do that:

gist:mpayetta/08b05950158a83a5eb8932dee94b16dd

So let’s take X as an example:

I know it might be confusing, so let’s summarize points 2 and 3:

Domain -> means real data in whatever unit you want to represent it (meters, liters, units, etc).

Range -> means pixels, this is the range of pixels into which we’ll be drawing the points from our Domain.

In the last two lines we define the axis variables using the previously defined scales. We create the X Axis as a bottom axis, and Y as a left axis.

To append the axes to the SVG area, we use the following code:

gist:mpayetta/fac903207656b3ac54cf36f8667be66d

If you remember, svgChart is a reference to a group within the SVG chart area that was already translated with respect to the plot margins.

The first thing to do is create a new group within the SVG to contain the X axis. Remember that the origin is always on the top left, so we need to translate the X axis so that it’s “pushed” down to the bottom of the plot. Next we do something very similar with the Y axis. In this case we don’t need to translate as it will be positioned on the left side directly.

Finally we add 2 SVG text elements so that we can identify the axes on the plot easily.

We’re now ready to draw the points on the canvas area. This is the code that does the magic:

gist:mpayetta/0d65b9d5c4add91ac49b2bb9d0f999f2

We’ve created a function called *drawPoint *that will take care of drawing a single point in the canvas context. The important thing here is to remember that we need to translate the numbers in our domain to pixels on our plot range. This is done using the scale references x and y. Basically by doing:

const px = x(point[0]);

We translate our domain value point[0] into a pixel coordinate within our canvas range.

Once we have the real pixel coordinates of the point, we can use the arc function to draw a circle on the canvas. We use the px and py translated coordinates, as well as the radius, start angle and end angle. Finally we call the fill() function to fill the shape with our point color.

All set! You can now open the index.html file in your favorite browser (hope it’s not IE) and… voilà!

Nice! Not very interactive yet though… but hope you learned the basics of how to create charts with D3 using Canvas instead of SVG for high performance on very large datasets.

We’ll be extending this example soon with features to make it more interactive such as zooming, panning, tooltips, etc.

Thanks for reading and we’d love to see your comments and suggestions!

Don’t miss our posts, follow us now on Twitter!