Canvas Deep Dive

Data Visualization Using Lines, Dashes, Dots & Arrows

How to use lineCap, lineJoin, setLineDash, lineDashOffset & miterLimit

Figure 1: Each symbolic line in this figure has been drawn using the JavaScript code explained below.

Cartography might easily be considered the world’s most mature form of data visualization. Over the centuries, mapmakers have created and refined a sophisticated vocabulary of lines and symbols that convey relationships between objects and places. We can learn from their efforts.

From blobs of blue, to “x” marks the spot, to meandering lines, cartographers have a large tool chest of symbology to draw from. When reading a map for the first time, part of the fun is just marveling at its rich symbology — and to wonder what led the cartographer to choose those particular shapes, lines, signs and colors.

A full study of the art of cartography — what’s possible, what’s been tried, what succeeds and what fails — would be fun. But for now, let’s leave aside the blobs and spots. Instead, let’s focus on lines, and explore some of their possibilities for browser-based data visualization. In particular, let’s see what we can do with HTML’s canvas feature.

I’ve been developing canvas-based components for more than a decade. One of my first uses was to display ionizing radiation measurements across Japan during and after…