JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my_div"></div>

JavaScript

var old_data = [1, 2, 3]; // When the data gets updated I'd like to 'remember' these values

var svg = d3.select(".my_div").append("svg")
    .attr("width", 500)
    .attr("height", 200);
var p = d3.select(".my_div").append("p");

svg.selectAll("circle").data(old_data).enter()
    .append("circle")
    .attr("r", function(d) { return d * 10; })
    .attr("cx", function(d){ return d * 40; })
    .attr("cy", function(d){ return d * 40; });
p.text("Old data. Click on the circles to update the data.");

svg.on("click", function(d) {
    p.text("Updated data. But how can I remember the 'old' data?");
    var new_data = [2, 2, 2]; // This is the new data I'd like to compare with the old
    
    svg.selectAll("circle").data(new_data)
        .transition().duration(2000)
    .attr("fill", "red") // e.g. I'd like to colour the circles red if the change
                         // is negative, blue if positive, black if no change.
    .attr("r", function(d) { return d * 10; });
});