xxxxxxxxxx<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="500" height="960"></svg> <script> const textValue = d => `${d.name} $${d.price}` const verticalSpacing = 45; function render(selection, data){ const text = selection .selectAll('text').data(data) text .exit() .remove(); text .enter().append('text') .style('font-size', '32pt') .style('font-family', 'Sans-Serif') .attr('x', 250) .attr('y', (d, i) => 50 + verticalSpacing * i) .merge(text) .text(textValue); } const svg = d3.select('svg'); render(svg, [ { name: 'Milk', price: 3 } ]); setTimeout(() => { render(svg, [ { name: 'Milk', price: 3 }, { name: 'Eggs', price: 20 } ]); }, 1000); setTimeout(() => { render(svg, [ { name: 'Milk', price: 3 }, { name: 'Eggs', price: 2 } ]); }, 2000); setTimeout(() => { render(svg, [ { name: 'Milk', price: 3 }, { name: 'Eggs', price: 2 }, { name: 'Cupcakes', price: 5 } ]); }, 3000); setTimeout(() => { render(svg, [ { name: 'Milk', price: 3 }, { name: 'Eggs', price: 2 } ]); }, 4000); </script> </body></html> https://d3js.org/d3.v4.min.js