We often get asked what we use at The Outlier to make our charts and dashboards, so here’s a quick rundown.<\/p>\n\n\n\n
This is how we created the more than 600 static charts in the Our World in Charts<\/a> gallery:<\/p>\n\n\n\n Data work:<\/strong> We mostly use Google Sheets, although we’re finding more and more reasons to use Microsoft Excel. <\/p>\n\n\n\n Design work: <\/strong>There are a lot of data visualisation tools out there, but two of our favourites are Flourish <\/a>and Figma<\/a>. 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.<\/p>\n\n\n\n Publish: <\/strong>Our charts are published in WordPress but displayed through a custom front-end built in Svelte (JS) and hosted on Vercel.<\/p>\n\n\n\n We also work on more custom visualisations for larger projects, such as the Road to a Just Energy Transition<\/a> and A Perfect Storm<\/a>. Putting these together takes month of work, but the tools we use make it easier:<\/p>\n\n\n\n Static charts<\/strong>: Once we’ve cleaned up and crunched the data, the charts are mostly created as above, with Flourish and Figma.<\/p>\n\n\n\n Interactive charts:<\/strong> When there’s a narrative to tell, we spend time making interactive charts. These are built in Svelte and D3.js.<\/p>\n\n\n\n Maps:<\/strong> Using Leaflet.js<\/a> 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\u2019re done. <\/p>\n\n\n\n Custom dashboards like Outlier Insights<\/a> and Consumer Prices<\/a> are mostly built in Observable<\/a>‘s Plot Library, which is based on D3js.<\/p>\n\n\n\n Again, we use Svelte and Vercel for the JS\/HTML and hosting.<\/p>\n\n\n\n Data for these projects is mostly stored in an SQL database \u2013 typically MySQL, but increasingly in PostgreSQL via Supabase<\/a>.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" We often get asked what tools power the hundreds of charts and dashboards we produce at The Outlier. From data crunching in Google Sheets to designing with Flourish and Figma, we’ve fine-tuned a process for creating both static and interactive visuals. Our special data deep dives are built with Svelte and D3.js to help bring complex stories to life. The Outlier’s editor and tech wizard Alastair Otter<\/strong> offers a quick tour of the tools we rely on.<\/p>\n\n
\n
Feature projects<\/h2>\n\n\n\n
\n
Dashboards<\/h2>\n\n\n\n
Office miscellany<\/h2>\n\n\n\n
\n