CODEWITHSUNDEEP
javascriptnode.jsd3.jsdata-visualization
crazyy_photonn
crazyy_photonn

Reputation: 171

Chart is not showing correctly

I am making two charts using d3.js

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.

The problem that I am facing is that in the second svg, the < path > is not getting the correct values and the lines are not getting displayed at all.

I am getting something like this:

https://i.sstatic.net/e3oRT.jpg

I want the exact same lines in the second chart as well.

The code for the same is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
    <style>
    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;
    }

    </style>
 </head> 


<body>

  <nav class="navbar navbar-inverse bg-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" style="color: #ffffff;" href="/">News: A friend or foe</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a style="color: #ffffff;" href="/">Home</a></li>
                    <li><a style="color: #ffffff;" href="/">About</a></li>

            </div>
        </div>
  </nav>

<div>
    <div class="col-md-6">
      <svg id= "svg1" width="800" height="400" style="background: white;"></svg>

    </div>


    <div class="col-md-6">
      <svg id="svg2" width="800" height="400" style="background: white;"></svg>

    </div>

</div> 

<script>
/////////////////////////////////////////////////////////////////////////////////////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])];
  }));
}
</script>
</body> 
<html>

I would really appreciate if someone can please tell me what wrong am I doing here? Thanks in advance.

The data is as follows:

    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

Projection2.tsv

    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

Upvotes: 1

Views: 70

Answers (1)

mgraham
mgraham

Reputation: 6207

It's diffcult to tell without a working example - we lack the projections.tsv / projections2.tsv files that we could make a working jsfiddle out of your code with

But I did notice this -->

  .attr("width2", width2 + margin2.left2 + margin2.right2)
    .attr("height2", height2 + margin2.top2 + margin2.bottom2)

should be .attr("width" ... and .attr("height" ... not suffixed with '2' .. prob a search and replace error?

Edit:

Ah, you're saying the second file has different headings, so it's not getting picked up by the parallel coordinate plot in the second chart which is still looking for January, February etc - http://jsfiddle.net/osnky2qr/6/ - here's a fiddle where the second chart looks for the headings in the second file and works (I changed the tsv loading to load data locally rather than as a callback 'cos that's easier in jsfiddle)

Upvotes: 1

Related Questions