Chapter 6. Drawing with Data

It’s time to start drawing with data.

Let’s continue working with our simple dataset for now:

var dataset = [ 5, 10, 15, 20, 25 ];

Drawing divs

We’ll use this to generate a super-simple bar chart. Bar charts are essentially just rectangles, and an HTML div is the easiest way to draw a rectangle. (Then again, to a web browser, everything is a rectangle, so you could adapt this example to use spans or whatever element you prefer.)

Formally, a chart with vertically oriented rectangles is a column chart, and one with horizontal rectangles is a bar chart. In practice, most people just call them all bar charts, as I’ll do from now on.

This div could work well as a data bar, shown in Figure 6-1.

dvw2 0601
Figure 6-1. A humble div
<div style="display: inline-block;
            width: 20px;
            height: 75px;
            background-color: teal;"></div>

Among web standards folks, this is a semantic no-no. Normally, one shouldn’t use an empty div for purely visual effect, but I am making an exception for the sake of this example.

Because this is a div, its width and height are set with CSS styles. Except for height, each bar in our chart will share the same display properties, so I’ll put those shared styles into a class called bar, as an embedded style up in the head of the document: {
    display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override height later */
    background-color ...

Get Interactive Data Visualization for the Web, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.