dataquarium

SVG and Canvas and WebGL, Oh My

June 16, 2019

The following is an excerpt from the Masters Summit for APIs course. Want to learn how to build custom visualizations on top of Qlik’s associative engine? Join us in Washington D.C. or Amsterdam in Fall 2019.

The web has increasingly become the main platform for people to consume data visualization. This is especially true for interactive data visualizations that allow users to manipulate their data and graphics in real time. While this move to the web opens up many opportunties for what can be visualized and how it can be delivered, it also comes with its own set of challenges. How can we graph large volumes of data in a web browser? What about complex interactivity and animations?

To meet these challenges and effectively create web visualizations, we need to understand what our options are for graphics on the web and what the tradeoffs are. There are three main options that this post will discuss: SVG, Canvas, and WebGL.

SVG

SVG stands for “Scalable Vector Graphics”. It is an XML-based format for drawing vector images. A basic svg showing a square box might look something like this:

<svg width='100' height='100'>
  <rect width='50' height='50' x='10' y='10' fill='black' />
</svg>

Even with little exposure to SVG, you can probably read the code above and interpret what it’s doing. SVG has native support in web browsers, which means we can embed it directly into HTML in the same way that we can create UI elements like <button>s. When used in HTML, we can also attach DOM events to nodes in our SVG.

SVG presents several advantages as a data visualization tool. Its easy to understand as it is made up of simple elements like rectangles, circles, and lines. Because of its integration into the DOM, its the simplest option for graphics on the web. If you need to add interactivity, you can use the DOM events that are already built into the browser directly on SVG nodes. If you want to style nodes differently, you can leverage CSS. If you need to debug a graphic that you are working on, you can easily inspect the DOM and see whats going on with your underlying SVG structure.

That being said, SVG does have one major disadvantage: scaling the number of nodes in an SVG. Because an SVG uses DOM nodes which take up memory, creating an SVG with thousands of rectangles or circles can cause poor performance in your web browser.

When to Use SVG

While SVG has problems with scaling up to larger data volumes, it is more than capable of handling most visualization needs. Thanks to its ease of use and integration with HTML standards, its the most commonly used option for graphics on the web.

Canvas

Canvas is another tool for drawing graphics on the web. HTML comes with a <canvas> element. This element has an API that enables drawing rasterized images onto it. Because the canvas requires drawing via an API, you need JavaScript to dynamically create content in it. For example, to draw a rectangle into a canvas element, we can execute the following JavaScript:

const canvas = document.getElementById("myCanvasElement");
const context = canvas.getContext("2d");
context.rect(10, 10, 50, 50);
context.fillStyle="black";
context.fill();

Canvas’ main advantage is that because it produces rasterized images, it does not have the memory footprint that SVG has with its nodes. Therefore, we can draw thousands of data points easily using a canvas.

However, Canvas’ disadvantage is the ease of use. In SVG, we were able to use HTML standards like DOM events and CSS to integrate interactivity and styling with our graphic. The SVG was also simple to inspect and interpret. A canvas on the other hand is like a black box. Once its been rendered to the screen, all we have is the image. Furthermore, incorporating interactivity requires much more complex solutions.

When to Use Canvas

Canvas is a good option when you are producing a visualization that renders more data points than SVG could handle. This range is typically in the thousands of data points. It can also handle data animations more efficiently than SVG. Still, there is an upper limit to what levels of data canvas can handle. As you add more data or more complex calculations and animations, a canvas visualization can start to stutter.

WebGL

Sometimes you want to visualize data that SVG and Canvas just can’t handle. There are a few scenarios that could put you in this position:

Fortunately, you’re not completely out of luck. WebGL can be used to visualize large, complex graphics with excellent performance. WebGL provides an API that allows you to write low-level code for creating rasterized images. This code is run on your computer’s GPU instead of CPU, allowing large data to be processed in parallel.

The advantage of WebGL is performance. 3D graphics, data volumes in the millions, and animations can be executed with smooth performance. The disadvantage is complexity. WebGL is by far the hardest of the options to work with due to the low-level that it operates at.

When to use WebGL

Most visualizations that you’d like to produce on the web can be done without the power of WebGL. However, if you’re trying to visual hundreds of thousands of points, rapidly animate thousands of points, or produce complex graphics involving 3D perspective calculations, WebGL can deliver.

SVG, Canvas, and WebGL can be thought of on a continuum where each performs better than the previous option but is also harder to use. When building visualizations on the web, I suggest starting at SVG and only moving up the ladder of options when you encounter a scenario where your current method is performing poorly.

qlikdataviz