Parallel coordinates (minimal)

_.md

[ Launch: Tributary inlet ] 9532979 by tanemaki

config.json

{"description":"Parallel coordinates (minimal)","endpoint":"","display":"svg","public":true,"require":[{"name":"parcoords","url":"http://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"example.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/n8Vj5of.png"}

example.html

<div id="example" class="parcoords" style="width:360px;height:150px"></div>

inlet.js

// Minimal example from Parallel Coordinates
// http://syntagmatic.github.io/parallel-coordinates/
//
// Press the "Add libraries" button and set the following parameters.
// Title: parcoords
// URL: http://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js

var w = 50;
var h = 50;

var svg = d3.select("svg")
    .attr({width:w, height:h});

var data = [
  [0,-0,0,0,0,3 ],
  [1,-1,1,2,1,6 ],
  [2,-2,4,4,0.5,2],
  [3,-3,9,6,0.33,4],
  [4,-4,16,8,0.25,9]
];

var pc = d3.parcoords()("#example")
  .data(data)
  .render()
  .ticks(3)
  .createAxes();

style.css

.parcoords > svg, .parcoords > canvas { 
  font: 14px sans-serif;
  position: absolute;
}
.parcoords > canvas {
  pointer-events: none;
}
.parcoords rect.background {
  fill: transparent;
}
.parcoords rect.background:hover {
  fill: rgba(120,120,120,0.2);
}
.parcoords .resize rect {
  fill: rgba(0,0,0,0.1);
}
.parcoords rect.extent {
  fill: rgba(255,255,255,0.25);
  stroke: rgba(0,0,0,0.6);
}
.parcoords .axis line, .parcoords .axis path {
  fill: none;
  stroke: #222;
  shape-rendering: crispEdges;
}
.parcoords canvas {
  opacity: 1;
  -moz-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
}
.parcoords canvas.faded {
  opacity: 0.25;
}