title: d3 line filter out (remove) duplicate points
body: <p>I am drawing svg line using D3.js. I want to improve performance by removing duplicate (x,y) points before adding to line path. What is the best way to do this in D3 or javascript. I am loading data from json file, for this test, but it might come in an array on server later.</p>
  
  <p>See code snip and console output below.</p>
  
  <p>Thanks for any help</p>
  
  <pre><code>        var x = d3.scale.linear().domain([xMin, xMax]).rangeRound([0, width]);
          var y = d3.scale.linear().domain([yMin, yMax]).rangeRound([height, 0]);
  
          var line = d3.svg.line()
              .x(function(d, i) { 
                  var xPoint = x((i + 1) * xMult);
                  console.log("xPoint= " + xPoint.toString()); 
                  return xPoint; })
              .y(function(d) { 
                  var yPoint = y(d);
                  console.log("yPoint= " + yPoint.toString()); 
                  return yPoint; })
              .interpolate("basis-open")
              .tension(0);
  
  
              ...
  
  
          // Add the valueline path.
          g.append("path")
              .attr("class", "line")
              .attr("d", line(data));
  
  
  --------------------------------------------------
  Console Output from two lines in code above
  console.log("xPoint= " + xPoint.toString()); 
  console.log("yPoint= " + yPoint.toString());
  ----------------------------------------------
  
  xPoint= 0
  yPoint= 24
  xPoint= 0
  yPoint= 24
  xPoint= 1
  yPoint= 24
  xPoint= 1
  yPoint= 24
  xPoint= 1
  yPoint= 24
  xPoint= 1
  yPoint= 24
  xPoint= 2
  yPoint= 24
  xPoint= 2
  yPoint= 25
  xPoint= 2
  yPoint= 25
  xPoint= 2
  yPoint= 24
  xPoint= 3
  yPoint= 25
  xPoint= 3
  yPoint= 25
  xPoint= 3
  yPoint= 25
  xPoint= 3
  yPoint= 25
  xPoint= 4
  yPoint= 25 
  </code></pre>