courses

✨ Modern data visualisation ✨

An interactive masterclass by the Economics Observatory

GitHub license

Website | Data Hub | Chart Examples | Data | Attendance sheet | Feedback form

Welcome to our masterclass. At the Economics Observatory (ECO) we use data to amplify and distil the messages of our articles. Making charts clear and eye-catching, but also transparent and replicable, is critical. This masterclass is designed to share that workflow. We hope to give you a taste of the huge improvements on offer as data usage in the social sciences modernises.



🏔️ Scope

The course will take you from a being complete beginner to someone capable of designing and building stunning charts using cutting-edge tools, connected to live data. The course is designed to highlight the advantages and some caveats of using data visualisation for communicating information to a wide and diverse audience. It will also introduce some of our guiding principles for displaying data, focusing on transparency and how to select appropriate tools and methods for different datasets and contexts.

Throughout the day we signpost additional resources to develop the ideas further, allowing you to gain confidence in your own abilities and even teach others.



🛠️ Pre-requisites

No prior coding experience is required. However, participants’ laptops will need to be set up to allow:



🕒 Schedule

| Time | Section | Details | | ————- | ——- | ————————————————— | | 09.00 - 09.30 | | Warm up. Checking computer set ups. Your first site | | 09.30 - 10.30 | 1 | Charts as data – introducing Vega-Lite | | 10.30 - 11.00 | Break | | | 11:00 - 12.30 | 2 | My first website – GitHub, HMTL, CSS and JavaScript | | 12.30 - 13.15 | Lunch | | | 13.15 - 14.15 | 3 | Programming – APIs, if statements, and loops. | | 14.15 - 15.15 | 4 | Advanced visualisations – beyond two dimensions | | 15:15 - 15:30 | Break | | | 15.30 - 16.30 | 5 | Transforming Data |



Session 1: Charts as data

The day starts with an introduction from the Economics Observatory Data Team. In this session analysts build a chart as a ‘JSON specification’ (the modern way). These files contain information on where to find the data, and how the axes should look. These chart instructions are themselves a type of data: they are shareable, replicable and verifiable.

Resources:

✅ Checkpoint: By the end of this session, you will have seen all three JSON types, and will have added one of these files to your personal GitHub repository.



Session 2: Building a live web site

By now you have a live chart (your JSON file) ready to embed into your website. But first you need to build a site to host it. We will show you the simple tools that allow this. First, we make a live site (GitHub Pages), before creating a space for visualisations and adding some text description (HTML). This site is briefly beautified and personalised (CSS) before we finally embed the charts built in session 1 (JavaScript).

Resources:

✅ Checkpoint: By the end of this session, you will have your own website, with its own customised text and design. Your website will have at least three stunning charts.



Session 3: Fetching data from APIs

Here we introduce APIs more formally, running through their strengths and pitfalls as sources of data. We also meet some workhorses of programming—if statements and loops—allowing us to batch download data. By the end of this third session, you will have embedded another chart into their site, this time powered by an API. When new data are released, their chart will update – fully automatically.

Resources

✅ Checkpoint: By the end of this session, you will have explored Python as a way to batch download data, and will have embedded one more chart into your website (displaying data accessed via Python).



Session 4: Advanced visualisations – beyond two dimensions

By this stage you have a live site and can update a long list of data series at the click of a button. Session 4 adds interactivity and new dimensions to charts. If time permits, we can also begin to explore choropleth maps (if not, we have a video for this). By the end of session 4, the websites will start to come alive, with dropdown menus, hover tools and scrollers adding dynamism to the data.

Resources

✅ Checkpoint: By the end of this session, you will have explored a range of interactive and multi-dimension charts, and added at least one of them to your website. This is a change to explore and edit, helping your page to come alive.



Session 5: Transforming Data

Cleaning and transforming data is a fundamental stage in a modern data workflow. In this session, participants will learn how to use Python with the Pandas library to manage and bring together data effectively. Fetching Indian trade data from the Economics Observatory API, participants will merge and transform the series with Pandas and produce an interactive chart to embed on their page. This brings together all our tools: Python and JavaScript, then HTML and CSS. The day finishes with tidying up participants’ websites, meaning everyone goes home with a page they can be proud of and a host of new skills.

Resources

✅ Checkpoint: By the end of this session, you will have seen Python in action again – this time to fetch, merge and transform series from the Economics Observatory API. You will also have added one last chart to your website, displaying data from this session.



🚀 Takeaways

1. Personal webpage

🎮 Action points



🗂️ Resources