Map of Swiss mountain names

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 (screenshot). If it doesn’t display properly, here’s a 2min walk-through.

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.

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 1938 map painting “Karte der Gegend um den Walensee” served me as visual inspiration.

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.

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.

The code is available on GitHub. Other works can be found in my archival 2014 portfolio. 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.