Make Your Own Ridgeline Plots

Joyplot Map

Today's #30DayMapChallenge is to use a New Tool (create your map using a software, language, library, or technique you have never used before). For this challenge I decided to build something using Terrain RGB.

My Joyplot Map is an interactive map that turns elevation data into ridgeline plots - right in your browser.

This map lets you draw a rectangle anywhere on the globe and view a ridgeline (or joyplot) representing the terrain within that area. Each horizontal line in the ridgeline plot corresponds to a slice of terrain, giving you a stacked profile of mountains, hills, valleys, and plains. This approach gives you a cross-sectional view of the terrain, so you can see how elevations change across a region rather than just looking at a flat top-down map.

Where the Elevation Data Comes From

The map uses Terrarium elevation tiles, hosted by Mapzen and available via Amazon S3:

https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png

These tiles provide high-resolution global elevation data, allowing the map to display terrain anywhere on the planet - from the peaks of Mount Fuji to the valleys of the Grand Canyon.

Each tile is a small PNG image where the RGB values encode the elevation at each pixel, which brings us to how we decode the terrain.

How Terrain RGB Works

The Terrain RGB (or Terrarium) format stores elevation in a clever way: each pixel’s red, green, and blue values encode a numeric height. Specifically:

elevation = (R * 256 + G + B / 256) - 32768

• R is the red channel
• G is the green channel
• B is the blue channel

By decoding these values, we can get precise elevation at any latitude and longitude. This method is fast and efficient, making it perfect for web maps where users can explore terrain interactively.

How the Map Works

The map is built with MapLibre GL JS for rendering the interactive basemap, and D3.js for generating the ridgeline plots. Here’s how it works:

1. Draw a Rectangle - Click the “Draw Rectangle” button, then click and drag on the map to select an area. You can toggle drawing mode on or off.
2. Sample Elevation - The map samples elevation data from the Terrarium tiles for multiple slices across the rectangle.
3. Generate Ridgelines - Each slice of terrain is turned into a line on the ridgeline plot. Lines are stacked vertically, creating the classic joyplot effect.
4. Vertical Exaggeration - Small hills and valleys are made more visible using a subtle vertical exaggeration, enhancing the visual appeal without distorting the terrain.

I have experimented a little with the vertical exaggeration used in the plots. I'm not yet entirely happy with the results and I don't think that the map produces 'attractive' looking ridgeline plots. If you have created ridgeline plots before I'd love to know what factors / exaggerations you have used to produce the best results.