AI Features
Home
Courses
D3 Tips and Tricks: Interactive Data Visualization

A Simple Graph

Learn how to create a simple graph in D3.

We'll cover the following...

With the introductions out of the way, let’s dive right into learning D3!

The graph

We’ll start with the full code for a simple graph and then we can go through it piece by piece. Here’s what the basic graph looks like:

The code

And here’s the code that makes it happen:

date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98
A simple graph

Please note that the <head></head> tags are omitted, which is a common thing for D3 examples (It’s presumably an effort to reduce potentially distracting code for when modern browsers can cope with the omission.)

Once we’ve finished working through the explanation of the functional blocks that make up the graph, we’ll start looking at what we need to add in and adjust so that we can incorporate other useful functions that are completely reusable in other diagrams as well.

Working on the premise that we can break the file down into component parts, I will explain the major blocks as HTML, CSS, and JavaScript. I’m going to play it fast and loose here. But never fear, it’ll all make sense.