A collection of charts types, with usage advice and links to data and code.
Line charts
One line
The simplest line chart, in this case running live from the new Economics Observatory API developed with Grizzly.
Many lines | Long Form
This chart uses "long form" data, which is the ideal format if working with csv files.
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, and uses "layers" to add each country. It is in effect four 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.
Bar 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).
Scatter and bubble
Scatter: Five 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.
Area charts