Skip to content
A d3 plugin for visualizing bumps charts
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Fix incorrect script path Jul 1, 2019
src Add more classes to labels Jul 1, 2019
test Fix bug with name rendering Mar 10, 2019
.eslintrc Bring in utility functions Sep 2, 2016
rollup.config.js Update dependencies Dec 22, 2018


Build Status

Draw Bumps charts using d3.

See a demo here.


If you use NPM, npm install d3-bumps-chart. Otherwise, download the latest release. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:

<script src=""></script>
<script src="../build/d3-bumps-chart.js"></script>

  d3.json("./results.json").then(function (events) {
    var gender = d3.GENDER.WOMEN;
    var set = d3.SET.TORPIDS;
    var el = document.getElementById('bumps-chart');

    var chart = d3.bumpsChart();

      .year({ start: 2014, end: 2017 })
      .on("selectYear", (start, end) => console.log(start + '-' + end))
      .on("highlightCrew", crew => console.log(crew))
      .on("toggleSelectedCrew", crew => console.log(crew));

    var transformedEvents = events
      .filter(e => e.gender.toLowerCase() === gender.toLowerCase())
      .filter(e => e.set === set)
      .sort((a, b) => a.year - b.year)
      .map(event => d3.transformData(event));

    var data = d3.joinEvents(transformedEvents, set, gender);;

API Reference

# d3.bumpsChart() <>

Constructs a new bumps chart generator with the default settings.

# bumpsChart(selection) <>

Render the bumps chart to the given selection.

# bumpsChart.on(typenames, [listener]) <>

If listener is specified, sets the event listener for the specified typenames and returns the bumps chart. If an event listener was already registered for the same type and name, the existing listener is removed before the new listener is added. If listener is null, removes the current event listeners for the specified typenames, if any. If listener is not specified, returns the first currently-assigned listener matching the specified typenames, if any. When a specified event is dispatched, each listener will be invoked with the same context and arguments as selection.on listeners: the current datum d and index i, with the this context as the current DOM element.

The typenames is a string containing one or more typename separated by whitespace. Each typename is a type, optionally followed by a period (.) and a name, such as and; the name allows multiple listeners to be registered for the same type. The type must be one of the following:

  • selectYear - after the year range has changed.
  • toggleSelectedCrew - after a crew's selected status has been toggled.
  • highlightCrew - after the highlighted crew has changed.

See dispatch.on for more.

You can’t perform that action at this time.