title: Chart is not showing correctly
body: <p>I am making two charts using d3.js</p>
  
  <p>I have two svgs side by side. Now, one of them is displaying correctly. However, doing the exact same thing, the second svg is not rendering properly.</p>
  
  <p>The problem that I am facing is that in the second svg, the &lt; path > is not getting the correct values and the lines are not getting displayed at all.</p>
  
  <p>I am getting something like this:</p>
  
  <p><a href="https://imgur.com/a/8DCLIKz" rel="nofollow noreferrer">https://imgur.com/a/8DCLIKz</a></p>
  
  <p>I want the exact same lines in the second chart as well.</p>
  
  <p>The code for the same is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://canvasjs.com/assets/script/canvasjs.min.js"&gt; &lt;/script&gt;
      &lt;style&gt;
      body {
        margin: 0px;
      }
  
      #parent {
      text-align:center;
      }
  
      svg {
      font: 20px sans-serif;
      }
  
      .background path {
        fill: none;
        stroke: none;
        stroke-width: 15px;
        pointer-events: stroke;
      }
  
      .foreground path {
        fill: none;
        stroke: steelblue;
        stroke-width: 1.5px;
      }
  
      .background2 path {
        fill: none;
        stroke: none;
        stroke-width: 15px;
        pointer-events: stroke;
      }
  
      .foreground2 path {
        fill: none;
        stroke: steelblue;
        stroke-width: 1.5px;
      }
  
      .axis .title {
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
      }
  
      .axis line,
      .axis path {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
  
      .axis2 .title2 {
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
      }
  
      .axis2 line,
      .axis2 path {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
  
  
      .label {
        -webkit-transition: fill 25ms linear;
      }
  
      .active .label:not(.inactive) {
        font-weight: bold;
      }
  
      .label.inactive {
        fill: #ccc;
      }
  
       .label2 {
        -webkit-transition: fill 25ms linear;
      }
  
      .active2 .label2:not(.inactive) {
        font-weight: bold;
      }
  
      .label2.inactive2 {
        fill: #ccc;
      }
  
  
      .foreground path.inactive {
        stroke: #ccc;
        stroke-opacity: .5;
        stroke-width: 1px;
      }
  
      .foreground2 path.inactive2 {
        stroke: #ccc;
        stroke-opacity: .5;
        stroke-width: 1px;
      }
  
      &lt;/style&gt;
   &lt;/head&gt; 
  
  
  &lt;body&gt;
  
    &lt;nav class="navbar navbar-inverse bg-inverse"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;a class="navbar-brand" style="color: #ffffff;" href="/"&gt;News: A friend or foe&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="collapse navbar-collapse"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;&lt;a style="color: #ffffff;" href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a style="color: #ffffff;" href="/"&gt;About&lt;/a&gt;&lt;/li&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
    &lt;/nav&gt;
  
  &lt;div&gt;
      &lt;div class="col-md-6"&gt;
        &lt;svg id= "svg1" width="800" height="400" style="background: white;"&gt;&lt;/svg&gt;
  
      &lt;/div&gt;
  
  
      &lt;div class="col-md-6"&gt;
        &lt;svg id="svg2" width="800" height="400" style="background: white;"&gt;&lt;/svg&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt; 
  
  &lt;script&gt;
  /////////////////////////////////////////////////////////////////////////////////////PARALLEL COORDINATE PLOTS 1/////////////////////////////////////////////////////////////////////////////////
  
  var margin = {top: 30, right: 40, bottom: 20, left: 200},
      width = 700 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;
  
  var dimensions = [
    {
      name: "name",
      scale: d3.scale.ordinal().rangePoints([0, height]),
      type: String
    },
    {
      name: "January",
      scale: d3.scale.linear().range([0, height]),
      type: Number
    },
    {
      name: "February",
      scale: d3.scale.linear().range([height, 0]),
      type: Number
    },
    {
      name: "March",
      scale: d3.scale.sqrt().range([height, 0]),
      type: Number
    },
    {
      name: "April",
      scale: d3.scale.linear().range([height, 0]),
      type: Number
    }
  ];
  
  var x = d3.scale.ordinal()
      .domain(dimensions.map(function(d) { return d.name; }))
      .rangePoints([0, width]);
  
  var line = d3.svg.line()
      .defined(function(d) { return !isNaN(d[1]); });
  
  var yAxis = d3.svg.axis()
      .orient("left");
  
  var svg = d3.select("#svg1")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  var dimension = svg.selectAll(".dimension")
      .data(dimensions)
    .enter().append("g")
      .attr("class", "dimension")
      .attr("transform", function(d) { return "translate(" + x(d.name) + ")"; });
  
  d3.tsv("projections.tsv", function(error, data) {
    if (error) throw error;
  
    dimensions.forEach(function(dimension) {
      dimension.scale.domain(dimension.type === Number
          ? d3.extent(data, function(d) { return +d[dimension.name]; })
          : data.map(function(d) { return d[dimension.name]; }).sort());
    });
  
    svg.append("g")
        .attr("class", "background")
      .selectAll("path")
        .data(data)
      .enter().append("path")
        .attr("d", draw);
  
    svg.append("g")
        .attr("class", "foreground")
      .selectAll("path")
        .data(data)
      .enter().append("path")
        .attr("d", draw);
  
    dimension.append("g")
        .attr("class", "axis")
        .each(function(d) { d3.select(this).call(yAxis.scale(d.scale)); })
      .append("text")
        .attr("class", "title")
        .attr("text-anchor", "middle")
        .attr("y", -9)
        .text(function(d) { return d.name; });
  
    // Rebind the axis data to simplify mouseover.
    svg.select(".axis").selectAll("text:not(.title)")
        .attr("class", "label")
        .data(data, function(d) { return d.name || d; });
  
    var projection = svg.selectAll(".axis text,.background path,.foreground path")
        .on("mouseover", mouseover)
        //.on("mouseout", mouseout);
  
    function mouseover(d) {
      svg.classed("active", true);
      projection.classed("inactive", function(p) { return p !== d; });
      projection.filter(function(p) { return p === d; }).each(moveToFront);
    }
  
    // function mouseout(d) {
    //   svg.classed("active", false);
    //   projection.classed("inactive", false);
    // }
  
    function moveToFront() {
      this.parentNode.appendChild(this);
    }
  });
  
  function draw(d) {
    return line(dimensions.map(function(dimension) {
      return [x(dimension.name), dimension.scale(d[dimension.name])];
    }));
  }
  
  
  
  
  
  //////////////////////////////////////////////////////////////////////////////////PARALLEL COORDINATE PLOTS 2/////////////////////////////////////////////////////////////////////////////////
  
  
  var margin2 = {top2: 30, right2: 40, bottom2: 20, left2: 200},
      width2 = 700 - margin2.left2 - margin2.right2,
      height2 = 400 - margin2.top2 - margin2.bottom2;
  
  var dimensions2 = [
    {
      name: "name",
      scale: d3.scale.ordinal().rangePoints([0, height2]),
      type: String
    },
    {
      name: "January",
      scale: d3.scale.linear().range([0, height2]),
      type: Number
    },
    {
      name: "February",
      scale: d3.scale.linear().range([height2, 0]),
      type: Number
    },
    {
      name: "March",
      scale: d3.scale.sqrt().range([height2, 0]),
      type: Number
    },
    {
      name: "April",
      scale: d3.scale.linear().range([height2, 0]),
      type: Number
    }
  ];
  
  var x2 = d3.scale.ordinal()
      .domain(dimensions2.map(function(d) { return d.name; }))
      .rangePoints([0, width2]);
  
  var line2 = d3.svg.line()
      .defined(function(d) { return !isNaN(d[1]); });
  
  var yAxis2 = d3.svg.axis()
      .orient("left");
  
  var svg2 = d3.select("#svg2")
      .attr("width2", width2 + margin2.left2 + margin2.right2)
      .attr("height2", height2 + margin2.top2 + margin2.bottom2)
    .append("g")
      .attr("transform", "translate(" + margin2.left2 + "," + margin2.top2 + ")");
  
  var dimension2 = svg2.selectAll(".dimension2")
      .data(dimensions2)
    .enter().append("g")
      .attr("class", "dimension2")
      .attr("transform", function(d) { return "translate(" + x2(d.name) + ")"; });
  
  d3.tsv("projections2.tsv", function(error, data2) {
    if (error) throw error;
  
    dimensions2.forEach(function(dimension2) {
      dimension2.scale.domain(dimension2.type === Number
          ? d3.extent(data2, function(d) { return +d[dimension2.name]; })
          : data2.map(function(d) { return d[dimension2.name]; }).sort());
    });
  
    svg2.append("g")
        .attr("class", "background2")
      .selectAll("path")
        .data(data2)
      .enter().append("path")
        .attr("d", draw2);
  
  
    console.log(data2);
  
    svg2.append("g")
        .attr("class", "foreground2")
      .selectAll("path")
        .data(data2)
      .enter().append("path")
        .attr("d", draw2);
  
    dimension2.append("g")
        .attr("class", "axis2")
        .each(function(d) { d3.select(this).call(yAxis2.scale(d.scale)); })
      .append("text")
        .attr("class", "title2")
        .attr("text-anchor", "middle")
        .attr("y", -9)
        .text(function(d) { return d.name; });
  
    // Rebind the axis data to simplify mouseover.
    svg2.select(".axis2").selectAll("text:not(.title2)")
        .attr("class", "label2")
        .data(data2, function(d) { return d.name || d; });
  
    var projection2 = svg2.selectAll(".axis2 text,.background2 path,.foreground2 path")
        .on("mouseover", mouseover2)
        //.on("mouseout", mouseout);
  
    function mouseover2(d) {
      svg2.classed("active2", true);
      projection2.classed("inactive2", function(p) { return p !== d; });
      projection2.filter(function(p) { return p === d; }).each(moveToFront2);
    }
  
    // function mouseout(d) {
    //   svg.classed("active", false);
    //   projection.classed("inactive", false);
    // }
  
    function moveToFront2() {
      this.parentNode.appendChild(this);
    }
  });
  
  function draw2(d) {
    return line2(dimensions2.map(function(dimension2) {
      return [x2(dimension2.name), dimension2.scale(d[dimension2.name])];
    }));
  }
  &lt;/script&gt;
  &lt;/body&gt; 
  &lt;html&gt;
  </code></pre>
  
  <p>I would really appreciate if someone can please tell me what wrong am I doing here?
  Thanks in advance.</p>
  
  <p>The data is as follows:</p>
  
  <pre><code>    January February    March   April   name
  87.7    0.29    0.37    18.25   Eckert III
  87.5    0.25    0.19    20.54   Natural Earth
  87.4    0.27    0.17    24.2    Winkel II
  86.5    0.23    0.28    19.15   Kavraisky VII
  85  0.26    0.18    23.28   Winkel Tripel
  84.3    0.27    0.19    21.27   Robinson
  83.2    0.25    0.43    16.14   Fahey
  81.9    0.36    0   28.73   Eckert IV
  81.8    0.26    0.24    22.31   Hölzel
  80.4    0.26    0.34    20.41   Wagner VI
  80  0.3 0.29    23.47   Eckert V
  </code></pre>
  
  <p>Projection2.tsv</p>
  
  <pre><code>    Acc. 40º 150%   Scale   Areal   Angular name
  87.7    0.29    0.37    18.25   Eckert III
  87.5    0.25    0.19    20.54   Natural Earth
  87.4    0.27    0.17    24.2    Winkel II
  86.5    0.23    0.28    19.15   Kavraisky VII
  85  0.26    0.18    23.28   Winkel Tripel
  84.3    0.27    0.19    21.27   Robinson
  83.2    0.25    0.43    16.14   Fahey
  81.9    0.36    0   28.73   Eckert IV
  81.8    0.26    0.24    22.31   Hölzellllll
  </code></pre>