Skip to content

EconomicsObservatory/courses

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

✨ 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:

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


🕒 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

  • GitHub account with a repository created to serve as your personal webpage, configured, styled and formatted.

2. Data portfolio

  • 6 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.


🗂️ Resources

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Jupyter Notebook 96.3%
  • CSS 1.9%
  • HTML 1.8%