Outlier Editor

AI-generated image in a retro style, showing various graphical representations of tools and visualisations.

The tools we use to make our charts and dashboards

—

by

Alastair Otter
in ,

We often get asked what we use at The Outlier to make our charts and dashboards, so here’s a quick rundown.

Data and charts

This is how we created the more than 600 static charts in the Our World in Charts gallery:

Data work: We mostly use Google Sheets, although we’re finding more and more reasons to use Microsoft Excel.

Design work: There are a lot of data visualisation tools out there, but two of our favourites are Flourish and Figma. Flourish is an online tool for turning data into charts, and Figma makes it easy to edit vector-based graphics. We generally start off in Flourish and move to Figma for the finishing touches.

Publish: Our charts are published in WordPress but displayed through a custom front-end built in Svelte (JS) and hosted on Vercel.

Feature projects

We also work on more custom visualisations for larger projects, such as the Road to a Just Energy Transition and A Perfect Storm. Putting these together takes month of work, but the tools we use make it easier:

Static charts: Once we’ve cleaned up and crunched the data, the charts are mostly created as above, with Flourish and Figma.

Interactive charts: When there’s a narrative to tell, we spend time making interactive charts. These are built in Svelte and D3.js.

Maps: Using Leaflet.js with vanilla Javascript is pretty simple when you need to make a map: add the Leaflet library and CSS file, add a few lines of code and you’re done.

Dashboards

Custom dashboards like Outlier Insights and Consumer Prices are mostly built in Observable‘s Plot Library, which is based on D3js.

Again, we use Svelte and Vercel for the JS/HTML and hosting.

Data for these projects is mostly stored in an SQL database – typically MySQL, but increasingly in PostgreSQL via Supabase.

We’re fairly firm on these tools but things do change gradually as new tools improve or we need specific functionality. For example, historically we were mostly focused on PHP and MySQL for all our sites but we’re now 90% NodeJS-based and hosted on Vercel.

We’re also using Supabase for almost all new database projects in place of MySQL hosted on Digital Ocean. Supabase is basically PostgreSQL but its Node/JS interface makes it a natural fit for our mostly JS-based websites/visualisations.

Office miscellany