D3 Examples - hello world parallel coordinates

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
svg {
  font: 10px sans-serif;
}
​
.background path {
  fill: none;
  stroke: #ccc;
  stroke-opacity: .4;
  shape-rendering: crispEdges;
}
​
.foreground path {
  fill: none;
  stroke: steelblue;
  stroke-opacity: .7;
}
​
.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;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script>
​
var margin = {top: 30, bottom: 10, right: 10, left: 10},
    width = 960 - margin.right - margin.left,
    height = 2000 - margin.top - margin.bottom;
​
var x = d3.scale.ordinal() // the dimensions 
  .rangePoints([0, width], 1); 
​
var y = {},
    ordered_domain,
    index;
​
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 + ")");
  
d3.json("colleges.json", function(err, data) {
  
  // extract the list of dimensions and create ordinal scale for each
  x.domain(dimensions = d3.keys(data[0]).filter(function(d) {
    return (y[d] = d3.scale.ordinal()
      .domain(data.map(function(p){ return p[d]; }))
      .rangePoints([0, height]));
  }));
  
  // put "n/a" at bottom of scale
  ordered_domain = y.top_public_schools.domain();
  index = ordered_domain.indexOf("n/a");
  if (index > -1) {
    ordered_domain.splice(index, 1);
  }
  ordered_domain.push("n/a");
  y.top_public_schools.domain(ordered_domain);
  
  // gray background lines connecting each dimension
  background = svg.append("g")
      .attr("class", "background")
    .selectAll("path")
      .data(data)
    .enter()
      .append("path")
      .attr("d", path);
​
   // blue foreground lines on top of gray background lines
   foreground = svg.append("g")
       .attr("class", "foreground")
     .selectAll("path")
       .data(data)
     .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) + ")"; })
   
   // add an axis and title
   g.append("g")
       .attr("class", "axis")
       .each(function(d) { d3.select(this).call(axis.scale(y[d])); })
     .append("text")
       .attr("text-anchor", "middle")
       .attr("y", -9)
       .text(function(d){ return d; });
     
})
​
// Returns the path for a given data point.
function path(d) {
  return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
d3.select(self.frameElement).style("height", (height + margin.top + margin.bottom) + "px").style("width", width + (margin.left + margin.right) + "px");
</script>
    