CODEWITHSUNDEEP
d3.jsvisualization
Selrac
Selrac

Reputation: 2293

Integrate data in html for Parallel Coordinates visualization in D3

Following the example on this page: Parallel Coordinates

I'm trying to add the data inside the html page. I'm using the following code:

  var cars = [ 
['AMC Ambassador Brougham',13,8,360,175,3821,11,73],
['AMC Ambassador DPL',15,8,390,190,3850,8.5,70]
];

  var  dimensions = ['name','economy (mpg)','cylinders','displacement (cc)','power (hp)','weight (lb)','0-60 mph (s)','year'];

But I'm getting a blank screen.

I'm guessing the format of the data is not right.

Could someone advice on how can I format the data inside the html file so that I can display the data correctly.

Thanks

Upvotes: 0

Views: 112

Answers (1)

Mark
Mark

Reputation: 108537

d3.csv will return an array of objects where each row in the file is an object in the array with properties of the CSV header and values of the row values. So to translate that directly to JSON would look like:

var cars = [{
  "name": "AMC Ambassador Brougham",
  "economy (mpg)": "13",
  "cylinders": "8",
  "displacement (cc)": "360",
  "power (hp)": "175",
  "weight (lb)": "3821",
  "0-60 mph (s)": "11",
  "year": "73"
}, {
  "name": "AMC Ambassador DPL",
  "economy (mpg)": "15",
  "cylinders": "8",
  "displacement (cc)": "390",
  "power (hp)": "190",
  "weight (lb)": "3850",
  "0-60 mph (s)": "8.5",
  "year": "70"
}];

Running code:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  svg {
    font: 10px sans-serif;
  }
  
  .background path {
    fill: none;
    stroke: #ddd;
    shape-rendering: crispEdges;
  }
  
  .foreground path {
    fill: none;
    stroke: steelblue;
  }
  
  .brush .extent {
    fill-opacity: .3;
    stroke: #fff;
    shape-rendering: crispEdges;
  }
  
  .axis line,
  .axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .axis text {
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
    cursor: move;
  }
</style>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    var margin = {
        top: 30,
        right: 10,
        bottom: 10,
        left: 10
      },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal().rangePoints([0, width], 1),
      y = {},
      dragging = {};

    var line = d3.svg.line(),
      axis = d3.svg.axis().orient("left"),
      background,
      foreground;

    var svg = d3.select("body").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 + ")");

    var cars = [{
      "name": "AMC Ambassador Brougham",
      "economy (mpg)": "13",
      "cylinders": "8",
      "displacement (cc)": "360",
      "power (hp)": "175",
      "weight (lb)": "3821",
      "0-60 mph (s)": "11",
      "year": "73"
    }, {
      "name": "AMC Ambassador DPL",
      "economy (mpg)": "15",
      "cylinders": "8",
      "displacement (cc)": "390",
      "power (hp)": "190",
      "weight (lb)": "3850",
      "0-60 mph (s)": "8.5",
      "year": "70"
    }];

    // Extract the list of dimensions and create a scale for each.
    x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
      return d != "name" && (y[d] = d3.scale.linear()
        .domain(d3.extent(cars, function(p) {
          return +p[d];
        }))
        .range([height, 0]));
    }));

    // Add grey background lines for context.
    background = svg.append("g")
      .attr("class", "background")
      .selectAll("path")
      .data(cars)
      .enter().append("path")
      .attr("d", path);

    // Add blue foreground lines for focus.
    foreground = svg.append("g")
      .attr("class", "foreground")
      .selectAll("path")
      .data(cars)
      .enter().append("path")
      .attr("d", path);

    // Add a group element for each dimension.
    var g = svg.selectAll(".dimension")
      .data(dimensions)
      .enter().append("g")
      .attr("class", "dimension")
      .attr("transform", function(d) {
        return "translate(" + x(d) + ")";
      })
      .call(d3.behavior.drag()
        .origin(function(d) {
          return {
            x: x(d)
          };
        })
        .on("dragstart", function(d) {
          dragging[d] = x(d);
          background.attr("visibility", "hidden");
        })
        .on("drag", function(d) {
          dragging[d] = Math.min(width, Math.max(0, d3.event.x));
          foreground.attr("d", path);
          dimensions.sort(function(a, b) {
            return position(a) - position(b);
          });
          x.domain(dimensions);
          g.attr("transform", function(d) {
            return "translate(" + position(d) + ")";
          })
        })
        .on("dragend", function(d) {
          delete dragging[d];
          transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
          transition(foreground).attr("d", path);
          background
            .attr("d", path)
            .transition()
            .delay(500)
            .duration(0)
            .attr("visibility", null);
        }));

    // Add an axis and title.
    g.append("g")
      .attr("class", "axis")
      .each(function(d) {
        d3.select(this).call(axis.scale(y[d]));
      })
      .append("text")
      .style("text-anchor", "middle")
      .attr("y", -9)
      .text(function(d) {
        return d;
      });

    // Add and store a brush for each axis.
    g.append("g")
      .attr("class", "brush")
      .each(function(d) {
        d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brushstart", brushstart).on("brush", brush));
      })
      .selectAll("rect")
      .attr("x", -8)
      .attr("width", 16);

    function position(d) {
      var v = dragging[d];
      return v == null ? x(d) : v;
    }

    function transition(g) {
      return g.transition().duration(500);
    }

    // Returns the path for a given data point.
    function path(d) {
      return line(dimensions.map(function(p) {
        return [position(p), y[p](d[p])];
      }));
    }

    function brushstart() {
      d3.event.sourceEvent.stopPropagation();
    }

    // Handles a brush event, toggling the display of foreground lines.
    function brush() {
      var actives = dimensions.filter(function(p) {
          return !y[p].brush.empty();
        }),
        extents = actives.map(function(p) {
          return y[p].brush.extent();
        });
      foreground.style("display", function(d) {
        return actives.every(function(p, i) {
          return extents[i][0] <= d[p] && d[p] <= extents[i][1];
        }) ? null : "none";
      });
    }
  </script>

Upvotes: 1

Related Questions