4,669 Swiss Mountains and Their Names

Peaks is an interactive visualization that explores the origin of mountain names in Switzerland; this post describes its creation process. See the live site.

Before the idea for Peaks was born, I explored several interesting datasets and worked out the technical logistics of ingesting and parsing their data. Once I was able to do basic analytics, I explored what story I wanted to tell and who my intended audience was. Having grown up in the Swiss Alps, I was excited about the staggering number of mapped and named peaks.

After this first phase, I created a variety of initial visual representations and started to refine one promising direction. Finally, I added more sophisticated interaction techniques, animation, and iterated on visual design aspects such as layout, typography, and color. The resulting map enables visitors to explore the peaks’ names by the four officially spoken languages, and how – when normalized to active speakers – a lesser-known language has a surprising reach.

A 2min walk-through video to get an overview of the three guided narratives and filters on the right. The interactive map is best experiences in a modern desktop browser.

Exploring the data and finding the story

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

Custom scripts to analyze the data (left), filtered and converted data (middle), and the raw dataset (right).

During this data exploration phase, I came across countless interesting 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 be a bit more involved than using standard tools like Excel, but quickly moving into the medium that the final piece will be in offers a greater depth in the discovery phase. 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 the same tools 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 yet with the data.

Turning interesting into insightful

The first narrative explores the impact language has on naming (e.g. Romansh’ names have much wider reach than the region this language is spoken in), the second story 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 of the piece. The mountain-themed language checkboxes, for example, double as map color key and language toggles. All interface and layout design iterations were done 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.

Growing up, I appreciated the aesthetic maps in the Swiss School Atlas by geographer Eduard Imhof. He’s the inventor of the Swiss style shaded relief map, and his work served me as visual inspiration.

The 1938 map painting “Karte der Gegend um den Walensee” by Eduard Imhof.

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

Beyond Peaks

It would be interesting to explore representations of the names other than a map, such as putting them side by side ordered by altitude, or clustered non-geographically by language. I would also be interested in designing a non-interactive print version. Another idea was to move from points of interest to line segments and do Streams – an interesting dataset I put aside to focus on Peaks instead.

You can check out the live site, and its code on GitHub. I’ve also created a collaborative list of interesting public datasets that could be used for similar work. Let me know if you did anything interesting with it or added to the list:

Peaks was a project I made in the final few weeks of a class at MIT called Information Design – Exploration, Navigation, and Understanding. The class was co-taught by Ben Fry, co-inventor of the creative coding environment Processing. In his Eyeo 2016 talk Ben mentions Peaks (demo at 9min 11s), and gives more background on the class, tools, and the trade of information design. Peaks was recently also featured on the design blog swissmiss, the news portal watson, and the Jungfrau Zeitung on the web and in print.

Questions? Reply below or ask me @RaphaelSchaad.

If you’d like to get or stay in touch, I send out an occasional email update for the curious on what’s new in life and what excites me.

Thanks to Ben Fry, James Grady, and Leslie Watkins.