O'Reilly logo

Interactive Data Visualization for the Web, 2nd Edition by Scott Murray

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required