What is d3

• Data-Driven Documents
• Used for making charts and graphs
• The pen, ruler, compass of digital chart drawing
• Modular and customisable
• Able to make simple charts or complex animated visuals

d3 and svg

• D3 can be used to manipulate regular HTML elements
• SVG provides more flexibility

• Scalable Vector Graphics
• A virtual canvas on the web page
• We can add shapes to it and give them properties
• Can be styled with CSS, using different properties
• The paper of digital chart drawing

barebones scatterplot

exercise 1

X

Y

THE basics

• Define the size of the graph
• Define some data
• Create the SVG housing our graph
• Add dots to the SVG

external data sources

exercise 2

csv files

• The data provided today is in the CSV format
• Comma-Separated Values
• Shaped like a table, with rows and columns

Column Names

Column

Row

asynchronous javascript

When we ask D3 to load an external data file, it takes some time to be returned. We provide a callback function that runs once it does so.

The callback function will include everything that involves using the data to draw our graph.

linear scales

exercise 3

so far

So far we've only been displaying data at a 1:1 ratio - dots are placed in pixels only. This means if X is 200, the dot is 200 pixels horizontally on the chart.

But what if our data has large (millions) or small (decimals) values?

We need to scale how the graph displays our values.

d3.scale.linear

For each axis we create a range object:

• domain: The range of our data values
• range: The range to convert our data values into, in order to display them

Domain

Range

0

500

0

750

382

573

scale domain with extent

exercise 4

d3.extent

Instead of manually defining the range of data to be displayed in our graph (0 to 500 for both axes), we can use the data to programmatically define a domain.

This can't be done when the linear scale is defined, as the data has not loaded yet! So it must happen in our CSV callback.

Calling d3.extent on our data returns an Array with the lowest and highest value in the data set.

.nice

Nice rounds the domain to whole, sensible numbers.

For example:

• 10 instead of 9.8
• 2,000 instead of 1,970

This makes for better axis ticks when we render our axes around the graph...

graph axes

exercise 5

d3.svg.axis

D3 provides us a way to easily render our X and Y axis. This uses our linear scales to draw each tick - the numbers laid out along the axis.

Each axis is then added to the SVG and positioned, with a label so that we know exactly what each axis refers to.

realistic data

exercise 6

hello imdb

Instead of generic X and Y values, let's turn our scatterplot into a visualisation of films released in 2016, with data gathered from IMDB.

available data

 imdb.csv includes the following data about each film:

• Name
• IMDB tating (0 to 10)
• Metascore (0 to 100)
• Run time (minutes)
• Estimated budget (USD)
• Worldwide gross (USD)

formatting axis ticks

Now that we're using big numbers, our axis ticks won't fit on the screen neatly.

Do we really need to show 1 million as 1,000,000, when all of the numbers are in millions?

tooltip

exercise 7

Which film?

Now that we're not using arbitrary data, it'd be useful to know more about each data point (dot).

How do we know which film a dot is?

tooltip

A tooltip will tell us more info when we mouse over each dot. Each time this happens we need to:

• Make the tooltip visible
• Move it to the dot being moused over
• Change its content to be relevant to the dot

colour scales

exercise 8

linear scales for colours

When creating a linear scale, we can have the range be colours, not just numbers!

This could be used to colour each dot by metascore:

Domain

Range

0

100

Red

Yellow

Green

50

WRAP UP

the end result