Where Would You Live In Germany?

Tools: D3.js, JavaScript, HTML+CSS


This interactive map was created for my Interactive Cartography and Geovisualization (GEOG 575) course at UW-Madison. The project required integrating five attributes across fifteen enumerated areas into a cohesive map and coordinated chart using D3.js. For mine, I decided to show five socio-economic attributes — Happiness Index, GRP, Unemployment Rate, Life Expectancy, and Crime Rate — across Germany’s sixteen states.

Having lived in Germany, I aimed to design a visualization that is both engaging and informative for a broad audience. The map uses visual hierarchy through thoughtful color choices: red for metrics like crime rate and unemployment, and green for positive indicators such as happiness, GRP and life expectancy. Inspired by the German flag, I initially experimented with background, title, and font colors, iterating to ensure clarity and accessibility.

As a novice coder, learning to implement interactive affordances—such as highlighting and coordinated updates between the map and chart—was a significant challenge and an invaluable experience. Debugging and fine-tuning interactivity taught me critical problem-solving skills and reinforced the importance of user-centered design principles, such as feedback, and discoverability.

This map is designed to offer insights into Germany’s socio-economic dynamics for anyone—from students and researchers to casual explorers. While a simple project, it represents a foundational step in my journey to create intuitive, user-focused data visualizations.


Click HERE to interact with the map