Heidi Mok Projects
← All Projects

Interactive Data Storytelling

Design & Development | Data Visualization | Q2-4 2020

Designed and developed an interactive data article that helped stakeholders understand complex modeling processes through visual storytelling and data visualization.

Backstory

The Infrastructure Transitions Research Consortium (ITRC) is a consortium of UK universities that developed the world’s first national infrastructure system-of-systems modelling software (NISMOD) used to simulate infrastructure change. The model was applied at the national level of Britain before being applied more regionally. The Multi-Scale Infrastructure Systems Analytics (MISTRAL) program was set up to look for upscale, downscale, and across-scale (other national settings outside the UK) applications of the model. One such project focused on a downscale application in a region known as the Oxford Cambridge Arc in the UK because it contained some of the fastest growing towns and cities in the UK. The government had released plans to include 1 million new homes by 2050, a new expressway road, and additional rail routes.

target

Goals

  • Create a visualization about the spatial analysis options and futures for the Oxford-Cambridge Arc.
  • Communicate the process and early results of what the team had completed.
  • Showcase the value of urban spatial modelling to a broader non-technical audience.
target

Key Challenges

  • Many lengthly parts to the model and assessment methodology
  • The project was still wrapping up
  • Varied geographic file formats (shapefiles and GeoPackages)
  • Complex process to explain

My Role

My role was to propose the visual format, design, and implement the final visualization. Throughout the project, I worked with a research software developer on the MISTRAL team (Tom Russell) and was given access to the team’s datasets and guided through the details of their research. Early on, I proposed a format of an interactive article that would emphasize storytelling while allowing non-technical viewers to interact directly with the data themselves. My contributions were divided into three main stages: (1) Drafting the outline of the visualization (2) Designing static or interactive visuals (3) Implementing the final visualization. Credit goes to Tom on preparing the final GIS outputs.

Digital boards with research notes

Background reading and synthesis

Sketchy mockups of website

Low-fidelity outline of the overall story

In progress mockups of website

Mid-fidelity mockup

raw data and plotted map

Gathering and plotting data

screenshot from online website prototype

Interactive prototyping (View live prototype)

four square images of grids in different colors

Creating visual assets

screenshot of code

Development (using Idyll)

A Few Key Learnings

  1. One approach to interactive visualization is to start grounded and progress slowly, avoiding jargon to give readers a concrete experience. When planning out the article outline, I started with questions like “What is the Arc?” and tried to built up towards the spatial model. I started by introducing the Arc area on its own to set context, then layered data that people could explore about the Arc such as transportation and geographic boundaries to get a sense of the land. This served as a foundation for additional scenarios and modelling steps later on.
  2. Arc geography
  3. Plans for land development are often controversial. Different stakeholders have varying interests in how housing and other development should take place. The MISTRAL team wanted to showcase their approach to practitioners, local authorities, academics, and other stakeholders with a land use interest/problem. The article should not provide specific recommendations to a single group so that different stakeholders can apply the model to their own use case. After providing context on what is the Arc area and four future scenarios, I focused on explaining seven urban development model steps in an approachable way, using text and static images. To further emphasize the steps, I used real land use examples provided by Tom.
  4. steps of the modelling process

Outcome

The final article was published in Feb 2021 here and a write-up can be found here. Stakeholders in the Arc have been able to map out alternative spatial development strategies that meet the goals of sustainable economic development. Since then, the NISMOD suite has been migrated to the Data and Analytics Facility for National Infrastructure (DAFNI) as a longer-term and secure home for UK’s infrastructure data and systems modelling. The full story of their project development is here.

← All Projects