The Sustainability Discourse Map is a data visualization of critical aspects of the current and past discourse around urban sustainability in Zürich. In partnership with the Digital Society Initiative of the University of Zürich, the map is based on a dataset of 1,000 articles from the Tages Anzeiger newspaper, and it is designed to help researchers, policymakers, and the public understand the evolution of the discourse around sustainability in Zürich.
There are two main visualizations in the project, the first one is a Bubble Map that shows the distribution of articles across different topics, and the second one is a Bee Swarm Plot that shows the evolution of the discourse over time.
The map was built using Next.js, D3.js, and React. The data was processed
and provided through a REST API. Using D3.js, the data points were grouped and
simulated into a force-directed graph, which was then rendered in the browser.
The user can interact with the graph by panning and filtering the data points.
The user can also select a data point to view the article's content and
metadata.
The collaboration with the Digital Society Initiative was fast-paced and iterative. The project was developed in two months, and the team worked closely with the researchers to refine the visualizations and the user experience. In order to quickly build out prototypes and test ideas, many of the visualizations were first build as Labs here:
- 024 - Applying D3 Force in React
- 026 - Optimized Nested Bubble Packing
- 030 - Animated Bee Swarm Chart
These labs were then integrated into the final project, and the team was able to deliver a high-quality product that met the needs of the researchers and the public.