Welcome to this hands-on workshop on creating interactive visualisations for Digital Humanities data.
In this session, we will work with a historical dataset from University of Edinburgh student records and explore how web-based visualisation can help us investigate people, places, and time.
The workshop combines a short introduction to data visualisation with guided practical work. Most of the session will focus on opening, editing, testing, and publishing an interactive visualisation using HTML, D3.js, Leaflet.js, and GitHub Pages.
No advanced programming experience is required. Some familiarity with files, web pages, or code editors may be helpful, but the workshop is designed as a supported, follow-along session.
In this workshop, we will:
- explore a historical humanities dataset;
- open a prepared visualisation project in VS Code;
- examine how HTML, D3.js, and Leaflet work together;
- make small edits to a local copy of the visualisation;
- test the visualisation in a web browser;
- publish a version of the project using GitHub Pages.
Instructors: Tomas Vancisin
& Somya Iqbal
University of Edinbugh. The Edinburgh Futures Institute.
The workshop uses data from University of Edinburgh records.
The dataset supports questions about historical student records, including people, places, and time. During the workshop, we will use the data to think about how maps, timelines, and interactive visualisations can support Digital Humanities research.
During the practical session, we will work with a web-based visualisation that will include:
- An interactive map;
- a timeline or time-based chart;
- data loaded from CSV, JSON, or GeoJSON files;
- markers, pop-ups, filtering, highlighting, and other simple interactions.
The workshop repository contains the tested starter files for the workshop.
You will work from your own GitHub repository through the account you make or already have. This means you can safely edit the files, save your changes, and publish your own version of the visualisation.
The general workflow is:
- Get the starter files from the workshop repository.
- Create or use your own GitHub repository.
- Open your own copy of the project in VS Code on your PC/laptop.
- Edit the files locally during the workshop (offline) using VScode (a code editor).
- Commit and push your changes to your own GitHub account (this will place your files straight to your Github account).
- Publish your own repository using GitHub Pages -> then the interactive visualisation will be live.
Detailed setup instructions are provided in the setup guide (Pre-workshop_00_Setup).
Please complete the setup guide before the session if possible:
You will need:
- a GitHub account;
- VS Code installed;
- the VS Code Live Preview extension (from Microsoft);
- either GitHub connected to VS Code or GitHub Desktop installed;
- a modern web browser such as Chrome, or Firefox.
If you are using a managed university computer, please check in advance whether you have permission to install software.
| Files to support your progress |
|---|
| Setup before the workshop |
| Installation, GitHub account setup, VS Code setup, and getting the project files |
| Introduction to data visualisation |
| Resource on visualisation concepts, interactivity, accessibility, and further reading |
| Building the visualisation |
| A written guide for the hands-on coding and visualisation activity which follows the live demonstration. This is useful for reference if you choose to have it open whilst you work (optional). |
| Publishing with GitHub Pages |
| Guide for committing, pushing, and publishing your own version online. This will form written instructions for part 3 of the workshop to help guide the process. |
The live workshop is mainly hands-on, so we will only briefly introduce data visualisation theory during the session.
The supplementary introduction provides extra background on:
- Why visualisation is useful for humanities research;
- Visual encodings such as position, size, colour, and shape;
- Interactive and dynamic visualisation;
- Accessibility and readability;
- Common design pitfalls;
- further reading and examples.
You can read this before or after the workshop:
Introduction to data visualisation
The session is set for approximately: 3.5 hours
| Section | Activity |
|---|---|
| Welcome and short introduction | Why visualise humanities data? What can interactive visualisation help us see? |
| Dataset overview | Introducing the University of Edinburgh records and the types of questions we can ask |
| Project setup | Opening the project in VS Code and running it locally |
| Hands-on visualisation work | Following the live demonstration and editing the HTML, D3, Leaflet, and data elements |
| Local testing | Viewing the visualisation in a browser using Live Server/Live Preview |
| Publishing | Introducing GitHub Pages and publishing from your own repository |
| Wrap-up | Questions, reflection, and next steps |
The repository structure will look similar to this:
index.html
data/
images/
setup/
publishing/
visualisation-intro/
Questions are welcome at any point.
If something does not work, please ask for help rather than getting stuck. Small setup differences are common, especially across Windows, Mac, university-managed computers, and personal laptops.
