gerhobbelt/d3-bumps-chart

A d3 plugin for visualizing bumps charts

d3-bumps-chart

Draw Bumps charts using d3.

See a demo here.

Installing

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="https://d3js.org/d3.v5.min.js"></script>
<script src="../build/d3-bumps-chart.js"></script>

<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();

    chart
      .year({ start: 2014, end: 2017 })
      .windowWidth(window.document.body.clientWidth)
      .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);

    d3.select(el).datum(data).call(chart);
  });
</script>

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 drag.foo and drag.bar; 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.