Questions and answers about
the economy.

Modern data visualisation

An interactive masterclass by the Economics Observatory.

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.

Attendance: Click here to add details

Feedback form: Click here to leave us feedback

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 course, we will offer and support 3 routes up the data mountain:

  • Hiker - the gentlest route, for those with no coding experience who simply want to build some nice-looking charts in a modern way.
  • Trail runner - slightly more stretching, for those who find the hike quick to complete and would like to build on their visualisation skills.
  • Mountaineer - harder but rewarding, for participants who would like a taste of cutting-edge tools and techniques.

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:

  • Access to a personal GitHub account, accessible via Google Chrome.
  • Visual Studio Code downloaded to desktop, or accessible online as a back-up option (see set-up video and slides – available on request).

Schedule

TimeSectionDetails
09.00 - 09.30Warm up. Checking computer set ups.
09.30 - 10.301Charts as data – introducing Vega-Lite.
10.30 - 11.00Break
11:00 - 12.302Building a live website – GitHub, HMTL, CSS and JavaScript.
12.30 - 13.15Lunch
13.15 - 14.153Fetching data from APIs – if statements and loops.
14.15 - 15.154Advanced visualisations – beyond two dimensions.
15:15 - 15:30Break
15.30 - 16.305Transforming data – cleaning and formatting.

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

Example - By the end of this session, you can expect to have made a simple chart like this.

Section 2: Building a live website

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

  • A template to use for your website: s2_example1.html
  • Three options for CSS Stylesheets, to customise your website:
    1. a clean and full example with all the work done for you (s2_example1.css)
    2. a minimal example containing instructions to help you style the website (s2_example2.css)
    3. a more complex example, placing charts and descriptions side-by-side (s2_example3.css)
  • Two example charts, to start your website:
    1. a bar chart showing the human development index (HDI) for 21 countries (s2_chart1.json)
    2. an interactive scatter plot, showing Vega-Lite's potential (s2_chart2.json)
  • Slides: s2_Building_your_first_website.pdf

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.

Example - In this session, you will inspect and embed charts like this.

Section 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

  • This session starts to introduce you to coding in the Python language. We will use the online code editor Google Colab for this.
  • Two examples of using data from APIs:
    1. FRED API:
    2. The Economics Observatory API:
  • Slides: s3_Accessing_data_programmatically.pdf
  • A notebook (s3_workbook_ECO_API.ipynb) showing the construction of a dynamic charts using the Economics Observatory API. You can also open the workbook via Binder using this link.
  • An example notebook (s3_workbook_Loops_APIs.ipynb) that you can start with. This link takes you to the Google Colab user interface, where you can run Python code from your browser without logging in.
  • A bonus notebook (s3_extra_python_examples.ipynb) with some additional context for coding with Python.

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

Example - In this session, you will create dynamic charts using APIs like this.

Section 4: Advanced visualisations

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.

Example - In this session, you will create dynamic and interactive charts like this.

Section 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 scrape data from an external website like the Economics Observatory. You will also have added one last chart to your website, displaying data accessed via a scraper.

Example - In this session, you will create a chart using data from an API transformed with Pandas like this.

Takeaways

  1. Personal webpage. GitHub account with a repository created to serve as your personal webpage, configured, styled and formatted.
  2. Data portfolio. Six charts from a wide range of data sources – including batch downloads, an API, and a web scraper – embedded into your personal page. At least one higher-dimension/interactive visualisation added too.
  3. A new skillset. The language of data is visualisation. By the end of this course you will have learnt how to introduce yourself in this new language.

Action points

  • Please think about what you might include on your webpage and what data you might use. You can use any data you like, but we will also provide example datasets for you to use.
  • If you would like to create a specific chart, we can help you build it – but consider the range of possibilities in the Vega-Lite Example Gallery.

Extra resources

Photo gallery

To find out more about booking a masterclass, please email us at: office@economicsobservatory.com and add your details to this online form.

The price of a (well earned) pint

At the end of day of data science you might award yourself with a pint of bitter. Use the slider below to see how prices have changed and whether your local pub is good value or not. As homework, to understand the logic of the data and the code, take a look at these specs which build up to the visualisation you see below:

Cheers!

Recent Questions
View all articles
Do you have a question surrounding any of these topics? Or are you an economist and have an answer?
Ask a Question
OR
Submit Evidence