How to animate transition over grouped, nested json coordinate data with D3.js?

Question

I am new to D3 and JS and trying to figure out where I'm going wrong. I have time series x/y data that I'm looking to animate with D3. The goal is a plot that shows all 4 points and transitions them through each of the 5 timestamps in the sample data, with a speed that is calculated with the timestamp.

I've structed the data in what I think is the proper format for D3 to be able to animate it efficiently. The nested json I'm using follows this format:

[{"time": 0, "info":[{"id": "A", "x": 10, "y": 20},
                    {"id": "B", "x": 40, "y": 90},
                    {"id": "C", "x": 10, "y": 90},
                    {"id": "D", "x": 80, "y": 70}]},
 {"time": 0.5, "info":[{"id": "A", "x": 20, "y": 30},
                       {"id": "B", "x": 60, "y": 70},
                       {"id": "C", "x": 100, "y": 10},
                       {"id": "D", "x": 10, "y": 32}]},
 {"time": 1, "info":[{"id": "A", "x": 50, "y": 60},
                     {"id": "B", "x": 0, "y": 0},
                     {"id": "C", "x": 80, "y": 10},
                     {"id": "D", "x": 50, "y": 50}]},
 {"time": 1.5, "info":[{"id": "A", "x": 40, "y": 50},
                       {"id": "B", "x": 100, "y": 30},
                       {"id": "C", "x": 80, "y": 90},
                       {"id": "D", "x": 80, "y": 40}]},
 {"time": 2, "info":[{"id": "A", "x": 60, "y": 10},
                     {"id": "B", "x": 0, "y": 50},
                     {"id": "C", "x": 10, "y": 50},
                     {"id": "D", "x": 30, "y": 60}]}]

I can plot individual times of this data but there are a few issues when trying to animate this: Here's a Fiddle with my code in it. The transition duration is set by the difference between the current time and the previous time.

There looks to be many ways of chaining transitions iterating through data, but they seem to be inefficient. Here's the way that I've gotten it to (partially) work, it can also be seen in the Fiddle.

var data = [{"time": 0, "info":[{"id": "A", "x": 10, "y": 20},
                                                        {"id": "B", "x": 40, "y": 90},
                                    {"id": "C", "x": 10, "y": 90},
                                    {"id": "D", "x": 80, "y": 70}]},
        {"time": 0.5, "info":[{"id": "A", "x": 20, "y": 30},
                                                        {"id": "B", "x": 60, "y": 70},
                            {"id": "C", "x": 100, "y": 10},
                            {"id": "D", "x": 10, "y": 32}]},
        {"time": 1, "info":[{"id": "A", "x": 50, "y": 60},
                           {"id": "B", "x": 80, "y": 50},
                           {"id": "C", "x": 80, "y": 10},
                           {"id": "D", "x": 50, "y": 50}]},
                {"time": 1.5, "info":[{"id": "A", "x": 40, "y": 50},
                           {"id": "B", "x": 100, "y": 30},
                           {"id": "C", "x": 80, "y": 90},
                           {"id": "D", "x": 80, "y": 40}]},
        {"time": 2, "info":[{"id": "A", "x": 60, "y": 10},
                              {"id": "B", "x": 0, "y": 50},
                              {"id": "C", "x": 10, "y": 50},
                              {"id": "D", "x": 30, "y": 60}]}]
                           

 var margin = {top: 30, right: 30, bottom: 30, left: 30},
        width = 300 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    // append the svg object to the body of the page
    var svg = d3.select("#container")
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

     // Add X axis
    var x = d3.scaleLinear()
      .domain([0, 100])
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([0, 100])
      .range([ height, 0]);
    svg.append("g")
      .call(d3.axisLeft(y));
  function runTheSimulation() {
        var id = 0
        if (id == 0) {
      var points = svg.selectAll('circle')
          .data(data[0].info, function(d, i) {return d.id})

          points.enter().append('circle')
            .attr('cx', function(d) {return x(d.x)})
            .attr('cy', function(d) {return y(d.y)})
            .attr('r', 8)
            .attr('fill', 'white')
            .attr('stroke', 'black')
            
            id++;
            next_frame()

      } else {
      next_frame()
      }
      function next_frame() {
      
        var delta_time = (data[id].time - data[id-1].time)*1000
        var players = svg.selectAll('circle')
          .data(data[id].info, function(d) {return d.id})
          .transition()
          .duration(delta_time)
          .ease(d3.easeLinear)
          .attr('cx', function(d) {return x(d.x)})
          .attr('cy', function(d) {return y(d.y)})
          .on('end', function() {
                id++;
              //console.log(id)
              if (id >= data.length) {
                return;
              }
              next_frame();
          })
        }
    }

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

The issues I have:

Some elements are getting skipping in transition. The first run only shows three times and any subsequent runs only show two times. For example: B never goes to (0,0)
I console.log() the index (id) when iterating through the json and somehow I'm getting double its length?

Thank you for any thoughts and help!

Mark · Accepted Answer

So I took some liberties with your code to make it more d3-ish. My attempt here is to make your data drive the visualization by chaining all the transitions instead of hooking the end event and moving to the next index.

How to animate transition over grouped, nested json coordinate data with D3.js?

Answers (2)

Related Questions