Dispatching Events

This example demonstrates how to use d3.dispatch to coordinate views with shared state. Here, a bar chart and a pie chart show two views of the same data: population by age group for a given state. (For brevity, a legend is omitted.) This example uses two custom events: a load event when data is available, and a statechange event when the displayed state is changed.

Custom events allow loose coupling of components: views can listen for events and update the DOM accordingly, without needing to explicitly tie each view together. When the drop-down menu changes, a statechange event is triggered which causes any interested listeners to be notified.

Each view uses a unique name, such as "bar" or "pie", so that multiple listeners can be notified for a single event. (D3 requires listeners to be named, rather than anonymous, so that it’s easier to remove or inspect registered listeners.) Thus, the "load.menu", "load.bar" and "load.pie" listeners are all notified when the data is loaded.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var dispatch = d3.dispatch("load", "statechange");

var groups = [
  "Under 5 Years",
  "5 to 13 Years",
  "14 to 17 Years",
  "18 to 24 Years",
  "25 to 44 Years",
  "45 to 64 Years",
  "65 Years and Over"
];

d3.csv("data.csv", type, function(error, states) {
  if (error) throw error;
  var stateById = d3.map();
  states.forEach(function(d) { stateById.set(d.id, d); });
  dispatch.load(stateById);
  dispatch.statechange(stateById.get("CA"));
});

// A drop-down menu for selecting a state; uses the "menu" namespace.
dispatch.on("load.menu", function(stateById) {
  var select = d3.select("body")
    .append("div")
    .append("select")
      .on("change", function() { dispatch.statechange(stateById.get(this.value)); });

select.selectAll("option")
      .data(stateById.values())
    .enter().append("option")
      .attr("value", function(d) { return d.id; })
      .text(function(d) { return d.id; });

dispatch.on("statechange.menu", function(state) {
    select.property("value", state.id);
  });
});

// A bar chart to show total population; uses the "bar" namespace.
dispatch.on("load.bar", function(stateById) {
  var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 80 - margin.left - margin.right,
      height = 460 - margin.top - margin.bottom;

var y = d3.scale.linear()
      .domain([0, d3.max(stateById.values(), function(d) { return d.total; })])
      .rangeRound([height, 0])
      .nice();

var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickFormat(d3.format(".2s"));

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

var rect = svg.append("rect")
      .attr("x", 4)
      .attr("width", width - 4)
      .attr("y", height)
      .attr("height", 0)
      .style("fill", "#aaa");

dispatch.on("statechange.bar", function(d) {
    rect.transition()
        .attr("y", y(d.total))
        .attr("height", y(0) - y(d.total));
  });
});

// A pie chart to show population by age group; uses the "pie" namespace.
dispatch.on("load.pie", function(stateById) {
  var width = 880,
      height = 460,
      radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
      .domain(groups)
      .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.svg.arc()
      .outerRadius(radius - 10)
      .innerRadius(radius - 70);

var pie = d3.layout.pie()
      .sort(null);

var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
      .data(groups)
    .enter().append("path")
      .style("fill", color)
      .each(function() { this._current = {startAngle: 0, endAngle: 0}; });

dispatch.on("statechange.pie", function(d) {
    path.data(pie.value(function(g) { return d[g]; })(groups)).transition()
        .attrTween("d", function(d) {
          var interpolate = d3.interpolate(this._current, d);
          this._current = interpolate(0);
          return function(t) {
            return arc(interpolate(t));
          };
        });
  });
});

// Coerce population counts to numbers and compute total per state.
function type(d) {
  d.total = d3.sum(groups, function(k) { return d[k] = +d[k]; });
  return d;
}

</script>

https://d3js.org/d3.v3.min.js