Barley Punchcard - Dynamic

D3 General Update Pattern – Punchcard Example

Demonstrates the general update pattern (exit, update, enter) with d3.transition and d3.dispatch. Plus, it's a good example of data binding using nested d3 selections: first we select a top level element (svg), do a selectAll on svg groups for each gen type, then do another selectAll on svg circles for each gen type's year & yield.

The tricky part to figure out here (to me at least) was reselecting each "gen" type's svg group after performing the general update pattern on them. If they are not reselected, then the selection will not contain any new svg groups and no additional circles will be rendered for them!

Forked from syntagmatic's block: Barley Punchcard

With cues taken from Mike Bostock's blocks:

<!doctype html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>D3 Update Pattern –Punchcard Example</title>
  <style type="text/css">
    body {
      font-family: sans-serif;
    }
    svg {
      border:1px solid #d0d0d0;
    }
    text {
      font-size: 16px;
      fill: #888;
    }
    path, line {
      stroke: #888;
    }
  </style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// register events to emit & listen for via d3 dispatch
  var dispatch = d3.dispatch("load", "statechange");

// the first gen type of our dataset we want the chart to load with
  var firstSiteName = "Morris";
  
  // unique years of our dataset to be used by our xScale domain
  // computed after data loads
  var years = [];

// load our data! When done call our dispatch events with corresponding data
  d3.csv('barleyfull.csv', function(err, data) {
    if (err) { throw(error) }

data.forEach(function(d) {
      d.yield = +d.yield;
      d.year = +d.year;
    });
    
    // unique years in the data set, note data is already sorted chronologically
    years = data.reduce(function(acc, cur) {
      if (acc.indexOf(cur.year) === -1) {
        acc.push(cur.year);
      }
      return acc;
    }, []);

// max yield for the entire dataset, 75.5
    // console.log(d3.max(data, function(d) { return d.yield; }));

var nested = d3.nest()
      .key(function(d) { return d.site; })
      .key(function(d) { return d.gen; })
      .entries(data);

// construct a new d3 map, not as in geographic map, but more like a "hash"
    var map = d3.map(nested, function(d) { return d.key; });

// call our dispatch events with `this` context, and corresponding data
    dispatch.call("load", this, map);
    dispatch.call("statechange", this, map.get(firstSiteName));
  });

// register a listener for "load" and create a dropdown / select elem
  dispatch.on("load.menu", function(map) {
    // create select dropdown with listener to call "statechange"
    var select = d3.select("body")
      .append("div")
      .append("select")
        .on("change", function() {
          var site = this.value;
          dispatch.call(
            "statechange",
            this,
            map.get(site)
          );
        });

// append options to select dropdown
    select.selectAll("option")
        .data(map.keys().sort())
      .enter().append("option")
        .attr("value", function(d) { return d; })
        .text(function(d) { return d; });

// set the current dropdown option to value of last statechange
    dispatch.on("statechange.menu", function(site) {
      select.property("value", site.key);
    });
  });

// set up our punchcard chart after our data loads
  dispatch.on("load.chart", function(map) {
    // layout properties
    var margin = { top: 20, right: 30, bottom: 30, left: 120 };
    var width = 800 - margin.left - margin.right;
    var height = 600 - margin.top - margin.bottom;

// scales for axises & circles
    var yScale = d3.scalePoint().padding(0.5); // ordinal scale for gen type / category
    var xScale = d3.scalePoint().padding(0.3); // ordinal scale for years
    var radius = d3.scaleSqrt(); // circle size would be too large if we used raw values, so we compute their square root
    var color = d3.scaleOrdinal(d3.schemeCategory20b); // colors used for differentiating "gen" type

// set up yScale with domain of unique gen values
    yScale
      .range([0, height])
      .round(true);

// domain for our x scale is min - 1 & max years of the data set
    xScale
      .range([0, width])
      .domain(years);

// domain of circle radius is from 0 to max d.yield
    radius
      .range([0, 15])
      .domain([0, 76]);

// d3.v4 method of setting up axises: axisLeft, axisBottom, etc.
    var yAxis = d3.axisLeft()
      .scale(yScale);

var xAxis = d3.axisBottom()
      .tickFormat(function(d) { return d; })
      .scale(xScale);

// create an svg element to hold our chart parts
    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] + ')')

// append svg groups for the axises, then call their corresponding axis function
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

// register a callback to be invoked which updates the chart when "statechange" occurs
    dispatch.on("statechange.chart", function(site) {
      // our transition, will occur over 750 milliseconds
      var t = svg.transition().duration(750);

// update our yScale & transition the yAxis, note the xAxis doesn't change
      yScale.domain(site.values.map(function(d) { return d.key; }).sort());
      yAxis.scale(yScale);
      t.select("g.y.axis").call(yAxis);

// bind our new piece of data to our svg element
      // could also do `svg.data([site.values]);`
      svg.datum(site.values);

// tell d3 we want svg groups for each of our gen categories
      // NOTE: the use of 2 accessor functions: the first binds the data, the second sets the data-join's key
      var gens = svg.selectAll("g.site")
        .data(
          function(d) { return d; },
          function(d) { return d.key; }
        );

// get rid of the old ones we don't need when doing an update
      gens.exit().remove();

// update existing ones left over
      gens.attr("class", "site")
        .transition(t)
        .attr("transform", function(d) {
          return "translate(0," + yScale(d.key) + ")"
        });

// create new ones if our updated dataset has more then the previous
      gens.enter().append("g")
        .attr("class", "site")
        .transition(t)
        .attr("transform", function(d) {
          return "translate(0," + yScale(d.key) + ")"
        });

// reselect the gen groups, so that we get any new ones that were made
      // our previous selection would not contain them
      gens = svg.selectAll("g.site");

// tell d3 we want some circles!
      // NOTE: the use of 2 accessor functions: the first binds the data, the second sets the data join's key
      var circles = gens.selectAll("circle")
        .data(
          function(d) { return d.values; },
          function(d) { return d.year; }
        );

// get rid of ones we don't need anymore, fade them out
      circles.exit()
        .transition(t)
      	.attr('r', 0)
        .style("fill", "rgba(255,255,255,0)")
        .remove();

// update existing circles, transition size & fill
      circles
        .attr("cy", 0)
        .attr("cx", function(d) { return xScale(d.year); })
        .transition(t)
        .attr("r", function(d) { return radius(d.yield); })
        .attr("fill", function(d) { return color(d.gen); });

// make new circles
      circles.enter().append("circle")
        .attr("cy", 0)
        .attr("cx", function(d) { return xScale(d.year); })
        .transition(t)
        .attr("r", function(d) { return radius(d.yield); })
        .attr("fill", function(d) { return color(d.gen); });

}); // end dispatch statechange.chart

}); // end dispatch load.chart

</script>
</body>

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