Chart Library

One line | CSV data

The simplest line chart, running from data stored in my GitHub repository.

Data Code

One line | API data

A single line, running live from the new Economics Observatory API.

Data Code Dashboard Our API

Many lines | Long Form

This chart uses "long form" data, which is the ideal format if working with csv files. The spec also uses a transform to remove some G7 nations so that the chart is not too cluttered. By playing with the transform you can add/remove countries.

Data Code Dashboard API

Many lines | Wide Form

This chart uses "wide form" data, which is familiar from Excel. It is a little more complex to use in most visualisation libraries.

Data Code

Many lines | Multiple sources

Some APIs return only one series. This chart runs from JSON data from the new Economics Observatory API, and uses "layers" to add each country. Each "layer" uses "calculate" to add the country name to each set of country data. It is in effect three charts, one for each country, overlaid on one another.

Data Code Dashboard API

Lines with two y-axes

When plotting two lines with very different scales is may be helpful to separate the y dimesion for each line.

Data Code Dashboard

Highlighting most recent data

Adding a point and the data value to the most recent data point. This uses a layer, which finds the maximum value of the data series, and puts both the point and the value at the max. This ensures the chart is responsive, so the location of the point and value both update when the data refreshes.

Data Code Dashboard

Two lines: filled range

A useful chart to demonstrate the varying distance between series, in this case the Bitcoin high and low trading price.

Data Code Dashboard API

Interactive line: data selector

This chart uses a very long run of data, allowing users to focus on a particular period using the sliders.

Data Code Dashboard

Line with tooltip

A simple line chart with a tooltip that moves along the series as the user hovers.

Data Code Dashboard

Re-based data (wide form)

An example of which transposes the data, rebasing so that 1980=100.

Data Code

Wide form data, folded to long form

Turing wide data into long form to allow easy use of the facet encoding.

Data Code

Interactive: sliders

This spec creates a year variable from dateTime data (yyyy-mm-dd), adds sliders that return a year value, and then filters the data based on the years picked using the sliders.

Data Code FRED

ONS, CORS mend

Simple line chart with CORS mended, generic set up for ONS charts.

Data Code AllOrigins

Simple vertical bar chart

This is a straightforward bar chart that plots a y variable against an x variable. In this case, the x variable is the year and the y variable is the share of green seats in the European parliament.

Data Code Dashboard

Simple horizontal bar chart

By flipping the x and y variables in the code, it is possible to plot a horizontal bar chart.

Data Code Dashboard

Stacked vertical bar chart

Stacked bar charts are useful when there are a number of components that make up a given value. For example, here we split food emissions up by each stage in the production process.

Data Code Dashboard

Stacked horizontal bar chart

Using the same flip trick, we can create a horizontal version of the stacked chart.

Data Code Dashboard

Grouped vertical bar chart

In the case where several variables are being displayed in distinct clusters, grouped bar charts are useful. In this example, GDP growth for all four UK nations are displayed per quarter, allowing the reader to easily compare each country.

Data Code Article

Layered bar chart

Layer commands can be useful when more than one piece of information is being conveyed. In this case, the simple veritcal bar chart shows the number of products at each sugar intensity. The line tracks the tax rate. Two distinct y axes provide the values.

Data Code Article

Interactive bar chart | Tooltip

Adding a tooltip allows the reader to see underlying values by hovering their mouse over the bars. This is one of the main advantages of building charts live in the page (as opposed to using image files).

Data Code Dashboard

Interactive bar chart | Tooltip + slider

More interactive features such as sliders allow the reader to adjust the chart itself to their needs. It also allows for an additional dimension such as change over time (as in this example).

Data Code Dashboard

Bar with hover

A chart with a tooltip revealing more information about the data. The opacity of the bars adjusts with mouse hover, helping the user identify which bar has been selected.

Data Code Dashboard API

Basic scatter | 2 variables

The simplest scatter plot

Data Code Dashboard

Scatter | 3 variables

This scatter adds a colour encoding.

Data Code Dashboard

Bubble | 4 variables

This verison uses x and y coordinates, colour and size

Data Code Dashboard

Scatter: 5 variables.

This chart takes variables to the extreme: there is probably too much going on here for it to be useful, but worth knowing it is possible.

Data Code Dashboard

Football scatter: tooltip and number format.

This chart includes a tooltip - hover over the dots to see the countries. The numbers in the tooltip are formatted to make them nicer to read. Based on an idea by Vikram Rajendran

Data Code Dashboard

UK prices scatter: interactive.

This chart is interactive. Click on the legend to isolate items of interest. Zoom in and out of crowded areas to inspect the data.

Data Code Dashboard

UK prices: distributions.

Scatter charts are one way of showing distributions. They key here is to use the opacity setting to give a sense of density.

Data Code Dashboard

Area | Data transform | Custom labels

An area chart on global debt. The spec includes a transform of wide to long-form data, and custom labels.

Data Code

Area | Interactive | Click legend

Adding interactivity by allowing the user to click on the legend to highlight the series they are interested in.

Data Code

Area | Distributions

Swathe charts are a type of area chart with the first series set to have the same colour as the background.

Data Code

Area | Interactive distributions

This version includes an interactive filter, allowing the user to pick which data series they would like to plot.

Data Code

Area | Dark Mode | Facet

This spec also includes a filter you can adjust to select series. Colours are chosed for a web site that is using "dark mode".

Data Code

Interactive | Year Selector

In this chart the user selects the start and end year. The key addition is the "Params" encoding.

Code

Interactive | Colour Selector

A demonstration of the how users can pick a parameter. In this case the colour of the line.

Code

Class | Glasgow Effect

A boring chart that you might want to edit in some way, without distoriting it.

Code

Class | Glasgow Effect 2

You could change the visualisation based on policy knowledge.

Code

Class | Glasgow Effect 3

Or you could amend the data, based on policy knowledge.

Code

Class | Debt interest 1

Debt looks completely unsustainable here. Is that true?

Code

Class | Debt interest 2

Now it looks completely safe: is this true?

Code

Class | Debt interest 3

Adding colour to show that we are using a forecast

Code

Class | Debt interest 4

Specifying a range of colours.

Code

Class | Debt interest 5

Using the signature colours of two leading universities.

Code

Class | Debt interest 6

A facet or trellis chart, to compare the variables

Code

Class | Debt interest 7

Adding a filter, to strip out a redundant variable

Code

Class | Debt interest 8

An interactive chart, to let the user investigate the data

Code

Class | Gender Parity 1

A set of examples on gender parity. By Josh Hellings, based on an original idea by Alan Smith. The chart starts off with this uninspiring and hard to read bar chart - what is the message here?

Code

Class | Gender Parity 2

A simple improvment is to flip the axes, so that country names can be read. In general bar charts with long names look better this way, that by using diagonal or offset labels on a vertial bar chart.

Code

Class | Gender Parity 3

Since we have a clear policy and logical rationale we can rebase the data. The sensible comparison here is 1, which represents complete equality. How far are countries from this goal. This spec tells us.

Code

Class | Gender Parity 4

Adding some nicer colours, conditional on the data being within or outside the target range.

Code

Class | Gender Parity 5

Now we add some custom labelling, recall that this is one of Tufte's 6 principles

Code

Class | Gender Parity 6

Finally, we place the country names close to the axis. Compare this to example 1. The same data, but a much clearer story.

Code

Class | Anscombe 1

A dataset here which co-mingles various difference policies - what can we do to clear this up?

Code

Class | Anscombe 2 | Filter

One option is to filter the data, so that only data from one policy experiment is showing.

Code

Class | Anscombe 3 | Colour

Another option is to use colour. In this case it is not very helpful...

Code

Class | Anscombe 4 | Facet

The facet encoding produces a grid of charts. In this case, this is much clearer.

Code

Class | Anscombe 5 | Non-Bertin

This example violates Bertin's rules that we dicuss in class. A nominal variable is used as the x position encoding; and a quantitative variable is used as the colour encoding.

Code

Class | Tidy Data 1 |

This example takes in spreadsheet style "wide" data. The transform converts this to tiday (AKA long-form) data. The chart does not work well, given the differences in currencies used.

Code

Class | Tidy Data 2 |

With data in tiday form we can easily change or spec so that we use a "facet" encoding to provide a trelliss style chart. The main complication is that we must use independent y axes to display the data well.

Code

chartlibrary