Another Inlet

_.md

[ Launch: Another Inlet ] 6c87429c7b90452672312e921275899d by rickdg
[ Launch: Another Inlet ] 5a94bef8b0fe8c150c2014dbfcf98f1d by MLxMantic

cars.csv

config.json

{"description":"Another Inlet","endpoint":"","display":"div","public":true,"require":[{"name":"parcoords","url":"http://syntagmatic.github.com/parallel-coordinates/d3.parcoords.js"}],"fileconfigs":{"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"example.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"cars.csv":{"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}},"tab":"edit","display_percent":0.7,"play":false,"loop":true,"restart":true,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false,"fullscreen":false,"ajax-caching":true}

example.html

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

inlet.js

//Parallel Coordinates reusable component
//http://syntagmatic.github.com/parallel-coordinates/

var example = d3.select("#example")
    .style({
      width: tributary.sw + "px",
      height: tributary.sh + "px"
    })

/*
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 data = tributary.cars;

var blue_to_brown = d3.scale.linear()
  .domain([9, 50])
  .range(["#05368D", "#CE2121"])
  .interpolate(d3.interpolateLab);

var color = function(d) { 
  return blue_to_brown(d['economy (mpg)']); 
}

var pc = d3.parcoords()("#example")
  .data(data)
  .color(color)
    .alpha(0.336)
    .composite("lighter")
  .render()
  .createAxes()
  .reorderable()
  .brushable()
;

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;
}