Live site:

Peaks is a visualization that explores the origin of mountain names in Switzerland. Visitors can explore the map and interact with the data through the filters on the right. At the bottom, there are three guided narratives. The piece is best experienced in a modern desktop browser. If it doesn’t display properly, here’s a 2min walkthrough.

Exploring the data and finding the story

The underlying data is an amazing set of numerous georeferenced names of built infrastructure and topographical features. To make sense of this big dataset (a 50MB plain text file with 224,369 lines), I had to build custom Node.js tools to filter, analyze, and convert the data into more understandable and manageable forms.

During this data exploration phase, I came across countless threads of stories that could potentially be told, and eventually settled on the rich intersection of mountains and languages.

Visual representation and rapid iteration

To get first basic visual representations, I rendered the data with p5.js, the emerging web version of the Processing programming language. This might take a bit longer than using standard tools like Excel, but moving into the medium the final piece will be in as quick as possible made certain discoveries possible that otherwise would be hard to find. Sketching ideas on paper and rapidly iterating on them in code with the real data is my favorite part of the process.

While building these visual tools to experience the data, it became clear that I wanted to provide them to visitors for self-guided exploration. In addition, I discovered interesting sub-stories that I wanted to pull out as narratives and make them accessible to an audience that isn’t familiar with the data.

Turning interesting into insightful

The first narrative explores the impact language has on naming (e.g. Romansh' names have much wider influence than their language region), the second shows common names (similar to almost every U.S. state having a Springfield), and the third one highlights three colors as common origins for names. Each of these narratives is also interactive and tied to the central map.

The step from an interesting data visualization to meaningful information design often requires enriching the core dataset with additional datasets (e.g. census data) to put it in context.

Polish, polish, polish

All user interface elements started out as standard web-components and then turned into custom forms to work in harmony with the rest. The mountain-themed language checkboxes, for example, double as map color key and language toggles. I did all interface and layout design iterations in Sketch before coding them up.

To give a sense of orientation, I rendered a matching and subtle geographic outline as base map. To extract that data from a geographic database, I used GDAL and transformed it with TopoJSON.

I grew up appreciating the Swiss School Atlas with its aesthetic representations by geographer Eduard Imhof. He’s the inventor of the Swiss style shaded relief map, and his 1938 map painting “Karte der Gegend um den Walensee” served as visual inspiration.

I turned the color palate into four distinct single-hue sequences that can also depict altitude (from darker and more saturated colors to lighter tints for snowy high-altitude peaks).

  • project/peaks.txt
  • Last modified: 2016/11/28 05:24
  • by raphael