title: Transitions in D3 - Duplicate bubbles instead of transitioning bubbles
body: <p>I'm trying to create something similar to this example: <a href="http://bost.ocks.org/mike/nations/" rel="nofollow noreferrer">Wealth and Health of Nations</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/SLEej.gif" alt="enter image description here"> </p>
  
  <p>My data comes from a JSON file, just like the example, but when I add the transitions, I'm getting duplicate bubbles. Instead of the bubble transitioning from point A to point B I'm getting 2 bubbles (one for point A, one for point B). Generally speaking, the transition is not able to differentiate between 2 data points for the same bubble or 2 separate bubbles. </p>
  
  <p>Looking at the example, I'm missing the interpolate and bisect functions. I haven't been able to grasp how they work and what exactly i'm doing wrong. Is this what's causing the problem in my graph? </p>
  
  <p>Also, can someone give me an example on how bisectors and interpolate works in d3? </p>
  
  <p>Code:</p>
  
  <pre><code> g = d3.select("#animation")
                  .append("svg")
                  .attr("width", width)
                  .attr("height", height);
  
        x_extent = [0, 100];
        x_scale = d3.scale.linear().domain(x_extent).range([margin + 20, width - 30]);
  
        y_extent = [0, 60];
        y_scale = d3.scale.linear().domain(y_extent).range([height - margin, margin]);
  
  
        r_scale = d3.scale.linear().domain([0, d3.max(jsondata, function (d) { return d.MSVMMboe; })]).range([2, 30]);
  
        g.selectAll("circle").data(jsondata, function (d) { return d.EffectiveDate; }).enter().append("circle")
                        .attr("cx", function (d) { return x_scale(d.PercentageComplete * 100) })
                        .attr("cy", function (d) { return y_scale(d.GPoS * 100) })
                        .attr("r", function (d) { return r_scale(d.MSVMMboe) })
                        .attr("stroke", "blue")
                        .attr("stroke-width", 1)
                        .attr("opacity", 0.6)
                        .attr("fill", "red");
  
  
                        //add transition
  
                        g.selectAll("circle").data(jsondata, function (d) { return d.EffectiveDate; })
                        .transition()
                        .duration(1000);
  </code></pre>