title: Error parsing D3 d=""repeated two times
body: <p>I'm working from this code sample on Chained Transitions <a href="http://bl.ocks.org/mbostock/3903818" rel="nofollow">http://bl.ocks.org/mbostock/3903818</a>
  I've set up my own code to parse a csv file instead of a tsv. However when I switch from the New to Existing view I get the error Error parsing D3 d=""repeated two times in the Javascript console. Not sure if it is the data for each function that is causing the errors. Code is below:</p>
  
  <pre><code>var margin = {top: 20, right: 50, bottom: 30, left: 60},
      width = 878 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
      var parseDate = d3.time.format("%Y%d%m").parse;
  
      var x = d3.time.scale()
      .range([0, width]);
  
      var y = d3.scale.linear()
      .range([height, 0]);
  
      var color = d3.scale.category10();
  
      var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
  
      var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");
  
      var line = d3.svg.line()
      .interpolate("basis")
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.price); });
  
      var tooltip = d3.select("body")
      .append("div")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "hidden")
      .text("a simple tooltip");
  
      var svg = d3.select("#chart").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 grid lines
  function make_X_axis() {        
      return d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .ticks(6)
  }
  
  function make_Y_axis() {        
      return d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(9)
  }
  
  //Parse data
  d3.csv("data/newdata2.csv", function(error, data) {
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
  
    data.forEach(function(d) {
        d.date = parseDate(d.date);
      d["New"] = +d["New"];
      d["Existing"] = +d["Existing"];
    });
  
  
    var homes = color.domain().map(function(name) {
      return {
        name: name,
        values: data.map(function(d) {
          return {date: d.date, price: +d[name]};
      })
    };
  });
  
    x.domain(d3.extent(data, function(d) { return d.date; }));
  
    y.domain([
      d3.min(homes, function(c) { return d3.min(c.values, function(v) { return v.price; }); }),
      d3.max(homes, function(c) { return d3.max(c.values, function(v) { return v.price; }); })
      ]);
  
    svg.append("g")  
    .attr("class", "grid")
    .attr("transform", "translate(0," + height + ")")
    .call(make_X_axis()
      .tickSize(-height, 0, 0)
      .tickFormat("")
      )
  
    svg.append("g")         
    .attr("class", "grid")
    .call(make_Y_axis()
      .tickSize(-width, 0, 0)
      .tickFormat("")
      )
  
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
  
    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  
    svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Thousands($)");
  
    var city = svg.selectAll(".city")
    .data(homes)
    .enter().append("g")
    .attr("class", "city");
  
  
    city.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.name); });
  
    city.append("text")
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
    .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.price) + ")"; })
    .attr("x", 3)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });
  
    d3.selectAll("input").on("change", change);
  
    var timeout = setTimeout(function() {
      d3.select("input[value=\"Existing\"]").property("checked", true).each(change);
  }, 2000);
  
    function change() {
      clearTimeout(timeout);
  
      city = this.value;
  
      // First transition the line &amp; label to the new city.
      var t0 = svg.transition().duration(750);
      t0.selectAll(".line").attr("d", line);
      t0.selectAll(".label").attr("transform", transform).text(city);
  
      // Then transition the y-axis.
      y.domain(d3.extent(data, function(d) { return d[city]; }));
      var t1 = t0.transition();
      t1.selectAll(".line").attr("d", line);
      t1.selectAll(".label").attr("transform", transform);
      t1.selectAll(".y.axis").call(yAxis);
  }
  
  function transform(d) {
      return "translate(" + x(d.date) + "," + y(d[city]) + ")";
  }
  });
  </code></pre>