Interactive Data Visualization for the Web, 2nd Edition

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.

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:

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override height later */
    background-color ...