Object Constancy in Animated Transitions

forked from curran's block: Object Constancy in Animated Transitions

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Shopping App Prototype</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d.price;
      const yValue = d => d.name;
      const textValue = d => `${d.name} $${d.price}`
      const verticalSpacing = 60;

const svg = d3.select('svg');
      const width = +svg.attr('width');

const margin = { left: 220, right: 220, top: 20, bottom: 20 };
      const innerWidth = width - margin.left - margin.right;

const xScale = d3.scaleLinear().range([0, innerWidth]);
      const yScale = d3.scaleBand()
        .paddingInner(0.1)
        .paddingOuter(0.05);

function render(selection, data){
        data.sort((a, b) => d3.descending(xValue(a), xValue(b)));

xScale.domain([0, d3.max(data, xValue)]);
        yScale
          .domain(data.map(yValue))
          .range([0, verticalSpacing * data.length]);

let g = selection.selectAll('g').data([null]);
        g = g.enter().append('g')
          .merge(g)
            .attr('transform', `translate(${margin.left},${margin.top})`);

const groups = g.selectAll('g')
          .data(data, yValue);
        groups.exit().remove();
        const groupsEnter = groups
          .enter().append('g')
            .attr('transform', d => `translate(0,${yScale(yValue(d))})`);
        groups
          .merge(groupsEnter)
          .transition().duration(800)
            .attr('transform', d => `translate(0,${yScale(yValue(d))})`);

const rects = groupsEnter
          .append('rect')
            .attr('fill', 'steelblue')
          .merge(groups.select('rect'))
            .attr('width', d => xScale(xValue(d)))
            .attr('height', yScale.bandwidth());

const textBackground = groupsEnter
          .append('text')
            .attr('class', 'background')
            .style('font-size', '32pt')
            .style('font-family', 'Sans-Serif')
            .attr('x', 5)
            .attr('dy', '0.32em')
            .attr('fill', 'none')
            .attr('stroke', 'white')
            .attr('stroke-width', 5)
            .attr('stroke-linejoin', 'round')
          .merge(groups.select('.background'))
            .attr('y', yScale.bandwidth() / 2)
            .text(textValue);

const textForeground = groupsEnter
          .append('text')
            .attr('class', 'foreground')
            .style('font-size', '32pt')
            .style('font-family', 'Sans-Serif')
            .attr('x', 5)
            .attr('dy', '0.32em')
          .merge(groups.select('.foreground'))
            .attr('y', yScale.bandwidth() / 2)
            .text(textValue);
      }

d3.json('data.json', data => {
        data.forEach((list, i) => {
          setTimeout(() => {
            render(svg, list);
          }, i * 1000);
        });
      });
    </script>
  </body>
</html>

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