Dumbbell Plot for RAWGraphs

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

What is a Dumbbell Plot

A dumbbell plot with two values compares two numeric measurements for a set of entities. Each entity is represented as a horizontal line segment connecting the two values, with configurable markers at each end (circle, square, arrow, star, or vertical line). The gap and direction of the segment immediately communicate the magnitude and direction of change between the two readings.

The chart is particularly effective when comparing values at two points in time, between two categories, or across two conditions. Sorting rows by difference, by one of the values, or alphabetically makes patterns and outliers easy to spot.

An optional group dimension colors each row, exposing sub-categories within the data through RAWGraphs' native color-scale UI.

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 Dumbbell 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.