Updating data visualizations

Once the data is bound to SVG elements, you can change the original data values and reflect the changes in the chart. Values can change immediately or transition smoothly. This section will provide an introduction on how to trigger data updates and configure smooth transitions using D3.

First, we need more data. Let's change the code where we create our data object and include two more values that use the same dimensions: the aphelium (the longest distance between a planet and the sun) in the max property, and the perihelium (the shortest distance) in the min property. The distance is now stored in the avg property (see Updating/1-three-charts.html):

const planets = []; // this array will store all the data when loaded
 
 d3.json("../Data/sol_2016.json")
   .then(function(data) {
       data.planets.forEach(function(obj) {
           planets...