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 span
s 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.
<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 ...
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.