examples/barchart06_animation.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <script src="../web_modules/d3/dist/d3.js"></script>
  <style type="text/css">
    body {
      width: 800px;
      margin: 25px auto;
      font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }
    rect {
      fill: steelblue;
      fill-opacity: 0.8;
    }
    rect:hover {
      fill-opacity: 1;
    }
    .axis {
      font-size: smaller;
    }
  </style>
</head>
<body>
  <h1>Student's First BarChart</h1>

  <div>
    <strong>Filter:</strong>
    <label><input type="checkbox" name="US" value="1" id="filter-us-only" />US only</label>
  </div>

  <script type="text/javascript">

  const margin = {top: 40, bottom: 10, left: 120, right: 20};
  const width = 800 - margin.left - margin.right;
  const height = 600 - margin.top - margin.bottom;

  // Creates sources <svg> element
  const svg = d3.select('body').append('svg')
              .attr('width', width+margin.left+margin.right)
              .attr('height', height+margin.top+margin.bottom);

  // Group used to enforce margin
  const g = svg.append('g')
              .attr('transform', `translate(${margin.left},${margin.top})`);

  // Global variable for all data
  let data;

  // Scales setup
  const xscale = d3.scaleLinear().range([0, width]);
  const yscale = d3.scaleBand().rangeRound([0, height]).paddingInner(0.1);

  // Axis setup
  const xaxis = d3.axisTop().scale(xscale);
  const g_xaxis = g.append('g').attr('class','x axis');
  const yaxis = d3.axisLeft().scale(yscale);
  const g_yaxis = g.append('g').attr('class','y axis');

  /////////////////////////
  // TODO use animated transtion between filtering changes

  d3.json('weather.json').then((json) => {
    data = json;

    update(data);
  });

  function update(new_data) {
    //update the scales
    xscale.domain([0, d3.max(new_data, (d) => d.temperature)]);
    yscale.domain(new_data.map((d) => d.location.city));
    //render the axis
    g_xaxis.call(xaxis);
    g_yaxis.call(yaxis);


    // Render the chart with new data

    // DATA JOIN use the key argument for ensurign that the same DOM element is bound to the same data-item
    const rect = g.selectAll('rect').data(new_data, (d) => d.location.city).join(
      // ENTER 
      // new elements
      (enter) => {
        const rect_enter = enter.append('rect').attr('x', 0);
        rect_enter.append('title');
        return rect_enter;
      },
      // UPDATE
      // update existing elements
      (update) => update,
      // EXIT
      // elements that aren't associated with data
      (exit) => exit.remove()
      );

    // ENTER + UPDATE
    // both old and new elements
    rect
      .attr('height', yscale.bandwidth())
      .attr('width', (d) => xscale(d.temperature))
      .attr('y', (d) => yscale(d.location.city));

    rect.select('title').text((d) => d.location.city);
  }

  //interactivity
  d3.select('#filter-us-only').on('change', function() {
    // This will be triggered when the user selects or unselects the checkbox
    const checked = d3.select(this).property('checked');
    if (checked === true) {
      // Checkbox was just checked

      // Keep only data element whose country is US
      const filtered_data = data.filter((d) => d.location.country === 'US');

      update(filtered_data);  // Update the chart with the filtered data
    } else {
      // Checkbox was just unchecked
      update(data);  // Update the chart with all the data we have
    }
  });

  </script>
</body>
</html>