More than 5 years have passed since last update.

最小限のParallel Coordinate Plotの作り方

d3.js

Posted at 2014-02-03

d3.jsを使ってParallel Coordinate Plotを作る。

http://bl.ocks.org/jasondavies/1341281 にサンプルがあるが、これをシンプルにしてプロットだけ表示するものを作成した。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Parallel Coordinates</title>
    <style type="text/css">
svg {
  font: 10px sans-serif;
}

.foreground path {
  fill: none;
  stroke: steelblue;
  stroke-opacity: .7;
}

.axis line, .axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  text-shadow: 0 1px 0 #fff;
}
    </style>
  </head>
  <body>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
    <script type="text/javascript">

var m = [30, 10, 10, 10],
    w = 960 - m[1] - m[3],
    h = 500 - m[0] - m[2];

var svg = d3.select("body").append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

d3.csv("cars.csv", function(cars) {

  // Extract the list of dimensions and create a scale for each.
  var dimensions = d3.keys(cars[0]).filter(function(d) { return d != "name" });
  // ["economy", "cylinders", ... ]

  var x = d3.scale.ordinal().rangePoints([0, w], 1).domain(dimensions);

  var y = {};
  dimensions.forEach(function (d) {
    var extent = d3.extent( cars, function(r) { return +r[d]; } );
    y[d] = d3.scale.linear().domain(extent).range([h, 0]);
  });

  // Returns the path for a given data point.
  function path(d) {
    // d is an object like {"economy": "21.1", "cylinders": 4, .... }
    var points = dimensions.map(function(p) {
      return [x(p), y[p](d[p])];  // y[p] is yScale
    });
    var l = d3.svg.line();
    return l(points);
  }

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

  // Add a group element for each dimension.
  var g = svg.selectAll(".dimension")
      .data(dimensions)
    .enter().append("svg:g")
      .attr("class", "dimension")
      .attr("transform", function(d) { return "translate(" + x(d) + ")"; });

  // Add an axis and title.
  var axis = d3.svg.axis().orient("left");
  g.append("svg:g")
      .attr("class", "axis")
      .each(function(d) { d3.select(this).call(axis.scale(y[d])); }) // append axis to g
    .append("svg:text")
      .attr("text-anchor", "middle")
      .attr("y", -9)
      .text(String); // set text to the data values
});

    </script>
  </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up