Parallel Coordinate Example

README.md

Minimalist file showing how to reorder a Parallel Coordinate using reorder.js with https://syntagmatic.github.io/parallel-coordinates/

index.html

<meta charset="UTF8">
<script src="http://jdfekete.github.io/reorder.js/lib/d3.v3.js"></script>
<script src="http://jdfekete.github.io/reorder.js/lib/d3.parcoords.js"></script>
<script src="http://jdfekete.github.io/reorder.js/lib/science.v1.js"></script>
<script src="http://jdfekete.github.io/reorder.js/lib/tiny-queue.js"></script>
<script src="http://jdfekete.github.io/reorder.js/reorder.v1.js"></script>
<link rel="stylesheet" type="text/css" href="http://jdfekete.github.io/reorder.js/lib/d3.parcoords.css">
<div id="example" class="parcoords" style="width:360px;height:150px"></div>
<div id="example2" class="parcoords" style="width:360px;height:150px"></div>

<script>
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]
],
  dimensions = reorder.range(6),
  axes = ['a', 'b', 'c', 'd', 'e', 'f'];

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

var pc2 = d3.parcoords()("#example2")
  .data(data);
  reorder.parcoords(pc2);
  pc2
  .render()
  .ticks(3)
  .createAxes();

</script>