chartlibrary

One line | CSV data

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

One line | API data

A single line, running live from the new Economics Observatory 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.

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.

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.

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.

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.

Two lines: filled range

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

Interactive line: data selector

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

Line with tooltip

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

Re-based data (wide form)

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

Wide form data, folded to long form

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

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.

ONS, CORS mend

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

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.

Simple horizontal bar chart

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

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.

Stacked horizontal bar chart

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

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.

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.

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).

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).

Trellis chart

Many small charts put together in a "trellis". This is an alternative to using colours on a single chart.

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.

Basic scatter | 2 variables

The simplest scatter plot

Scatter | 3 variables

This scatter adds a colour encoding.

Bubble | 4 variables

This verison uses x and y coordinates, colour and size

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.

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

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.

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.

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.

Area | Interactive | Click legend

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

Area | Distributions

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

Area | Interactive distributions

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

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".