Basic General Update Pattern

This example shows the General Update Pattern, which is required to create things with D3.js that update with dynamic data.

Part of the video course: D3.js in Motion.

See also:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Shopping App Tester</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script src="visualization.js"></script>
    <script>

const props = {
        width: 300,
        height: 500,
        data: [
          { name: 'banana', price: 1 },
          { name: 'eggs', price: 2 },
          { name: 'peanut butter', price: 4 }
        ]
      };

const svg = d3.select('svg');
      const selection = svg.append('g')
        .attr('transform', `translate(${+svg.attr('width') / 2 - props.width / 2})`);

visualization(selection, props);

// Test the problem: bars don't update when price changes.
      setTimeout(() => {
        props.data[1].price = 3;
        visualization(selection, props);
      }, 1000);

// Test the problem: bars don't update correctly after an item is removed.
      setTimeout(() => {
        props.data = [
          { name: 'banana', price: 1 },
          { name: 'eggs', price: 2 },
        ];
        visualization(selection, props);
      }, 2000);

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

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