Ridgeline Plot for RAWGraphs

This custom chart is intended to be used inside the RAWGraphs app.

What is a Ridgeline Plot

A ridgeline plot (also known as a joy plot) shows the distribution or temporal evolution of several groups over a shared continuous axis. Each group is rendered as a filled area with an optional stroke, stacked vertically with a configurable amount of overlap. The overlapping layout makes it easy to compare many series at once while preserving the individual shape of each distribution.

The chart is inspired by the D3 Ridgeline Plot by Mike Bostock.

Installation

• Download the latest release asset (index.umd.js) from the side panel on this page or from the Releases tab.
• In RAWGraphs load a dataset.
• In section 2. Choose a chart, scroll down and click Load your chart.
• Select the Load from file tab, then drag and drop the downloaded file.
• Click Load your chart, acknowledge the pop-up about external code, and continue.
• The Ridgeline Plot will now be available in your chart list.

Contribute

If you'd like to contribute, follow the RAWGraphs custom template guide.

Edit the code

Install dependencies

npm install

Run Sandbox

Modify the chart locally with live reload.

npm run sandbox

Open http://localhost:9000 to view the sandbox.

Build

Create the bundle to load in RAWGraphs.

npm run build

The lib/index.umd.js file is the bundle you can load into RAWGraphs.

Credits

Original chart concept by Mike Bostock.

The one named index.umd.js is the bundle that can be loaded by RAWGraphs. You cna rename it as you prefer.