ParalleleCoords by hugolpz

script.js

var data = [
 { "x":0, "-x":-0, "x^":0, "ax":0, "x+b":20, "1/x":0, "random":14 },
 { "x":1, "-x":-1, "x^":1, "ax":2, "x+b":21, "1/x":1, "random":32 },
 { "x":2, "-x":-2, "x^":4, "ax":4, "x+b":22, "1/x":0.5, "random":33 },
 { "x":3, "-x":-3, "x^":9, "ax":6, "x+b":23, "1/x":0.3333333333, "random":31 },
 { "x":4, "-x":-4, "x^":16, "ax":8, "x+b":24, "1/x":0.25, "random":11 },
 { "x":5, "-x":-5, "x^":25, "ax":10, "x+b":25, "1/x":0.2, "random":40 },
 { "x":6, "-x":-6, "x^":36, "ax":12, "x+b":26, "1/x":0.1666666667, "random":50 },
 { "x":7, "-x":-7, "x^":49, "ax":14, "x+b":27, "1/x":0.1428571429, "random":6 },
 { "x":8, "-x":-8, "x^":64, "ax":16, "x+b":28, "1/x":0.125, "random":38 },
 { "x":9, "-x":-9, "x^":81, "ax":18, "x+b":29, "1/x":0.1111111111, "random":10 },
 { "x":10, "-x":-10, "x^":100, "ax":20, "x+b":30, "1/x":0.1, "random":46 },
 { "x":11, "-x":-11, "x^":121, "ax":22, "x+b":31, "1/x":0.0909090909, "random":20 },
 { "x":12, "-x":-12, "x^":144, "ax":24, "x+b":32, "1/x":0.0833333333, "random":47 },
 { "x":13, "-x":-13, "x^":169, "ax":26, "x+b":33, "1/x":0.0769230769, "random":16 },
 { "x":14, "-x":-14, "x^":196, "ax":28, "x+b":34, "1/x":0.0714285714, "random":3 },
 { "x":15, "-x":-15, "x^":225, "ax":30, "x+b":35, "1/x":0.0666666667, "random":8 },
 { "x":16, "-x":-16, "x^":256, "ax":32, "x+b":36, "1/x":0.0625, "random":35 },
 { "x":17, "-x":-17, "x^":289, "ax":34, "x+b":37, "1/x":0.0588235294, "random":9 },
 { "x":18, "-x":-18, "x^":324, "ax":36, "x+b":38, "1/x":0.0555555556, "random":27 },
 { "x":19, "-x":-19, "x^":361, "ax":38, "x+b":39, "1/x":0.0526315789, "random":45 },
 { "x":20, "-x":-20, "x^":400, "ax":40, "x+b":40, "1/x":0.05, "random":42 },
 { "x":21, "-x":-21, "x^":441, "ax":42, "x+b":41, "1/x":0.0476190476, "random":49 },
 { "x":22, "-x":-22, "x^":484, "ax":44, "x+b":42, "1/x":0.0454545455, "random":24 },
 { "x":23, "-x":-23, "x^":529, "ax":46, "x+b":43, "1/x":0.0434782609, "random":2 },
 { "x":24, "-x":-24, "x^":576, "ax":48, "x+b":44, "1/x":0.0416666667, "random":37 },
 { "x":25, "-x":-25, "x^":625, "ax":50, "x+b":45, "1/x":0.04, "random":28 },
 { "x":26, "-x":-26, "x^":676, "ax":52, "x+b":46, "1/x":0.0384615385, "random":13 },
 { "x":27, "-x":-27, "x^":729, "ax":54, "x+b":47, "1/x":0.037037037, "random":44 },
 { "x":28, "-x":-28, "x^":784, "ax":56, "x+b":48, "1/x":0.0357142857, "random":7 },
 { "x":29, "-x":-29, "x^":841, "ax":58, "x+b":49, "1/x":0.0344827586, "random":36 },
 { "x":30, "-x":-30, "x^":900, "ax":60, "x+b":50, "1/x":0.0333333333, "random":48 },
 { "x":31, "-x":-31, "x^":961, "ax":62, "x+b":51, "1/x":0.0322580645, "random":26 },
 { "x":32, "-x":-32, "x^":1024, "ax":64, "x+b":52, "1/x":0.03125, "random":12 },
 { "x":33, "-x":-33, "x^":1089, "ax":66, "x+b":53, "1/x":0.0303030303, "random":29 },
 { "x":34, "-x":-34, "x^":1156, "ax":68, "x+b":54, "1/x":0.0294117647, "random":15 },
 { "x":35, "-x":-35, "x^":1225, "ax":70, "x+b":55, "1/x":0.0285714286, "random":43 },
 { "x":36, "-x":-36, "x^":1296, "ax":72, "x+b":56, "1/x":0.0277777778, "random":17 },
 { "x":37, "-x":-37, "x^":1369, "ax":74, "x+b":57, "1/x":0.027027027, "random":21 },
 { "x":38, "-x":-38, "x^":1444, "ax":76, "x+b":58, "1/x":0.0263157895, "random":0 },
 { "x":39, "-x":-39, "x^":1521, "ax":78, "x+b":59, "1/x":0.0256410256, "random":4 },
 { "x":40, "-x":-40, "x^":1600, "ax":80, "x+b":60, "1/x":0.025, "random":5 },
 { "x":41, "-x":-41, "x^":1681, "ax":82, "x+b":61, "1/x":0.0243902439, "random":1 },
 { "x":42, "-x":-42, "x^":1764, "ax":84, "x+b":62, "1/x":0.0238095238, "random":22 },
 { "x":43, "-x":-43, "x^":1849, "ax":86, "x+b":63, "1/x":0.023255814, "random":18 },
 { "x":44, "-x":-44, "x^":1936, "ax":88, "x+b":64, "1/x":0.0227272727, "random":34 },
 { "x":45, "-x":-45, "x^":2025, "ax":90, "x+b":65, "1/x":0.0222222222, "random":39 },
 { "x":46, "-x":-46, "x^":2116, "ax":92, "x+b":66, "1/x":0.0217391304, "random":41 },
 { "x":47, "-x":-47, "x^":2209, "ax":94, "x+b":67, "1/x":0.0212765957, "random":19 },
 { "x":48, "-x":-48, "x^":2304, "ax":96, "x+b":68, "1/x":0.0208333333, "random":23 },
 { "x":49, "-x":-49, "x^":2401, "ax":98, "x+b":69, "1/x":0.0204081633, "random":30 },
 { "x":50, "-x":-50, "x^":2500, "ax":100, "x+b":70, "1/x":0.02, "random":25 }
];

var color= d3.scale.linear()
    .domain([0, 50])
    .range(["steelblue", "chocolate"])
    .interpolate(d3.interpolateLab);


 var pc_simple= d3.parcoords()("#example1")
   .data(data)
   .color(function(d) { return color(d['x']); })
   .alpha(0.6)
   .margin({ top: 40, left: 0, bottom: 22, right: 0 })
   .render()
   .createAxes()
   .brushable()
   .reorderable();
   
 var pc_simple = d3.parcoords()("#example2")
   .data(data)
   .alpha(0.6)
   .margin({ top: 40, left: 0, bottom: 22, right: 0 })
   .render()
   .createAxes()
   .brushable()
   .reorderable();

var data2 = [
 { "Horsepower":0, "$ saved/day":-0, "Price":0, "Owner income":0, "Car's weight":20, "h/100miles":0, "Smarties in car":14 },
 { "Horsepower":1, "$ saved/day":-1, "Price":1, "Owner income":2, "Car's weight":21, "h/100miles":1, "Smarties in car":32 },
 { "Horsepower":2, "$ saved/day":-2, "Price":4, "Owner income":4, "Car's weight":22, "h/100miles":0.5, "Smarties in car":33 },
 { "Horsepower":3, "$ saved/day":-3, "Price":9, "Owner income":6, "Car's weight":23, "h/100miles":0.3333333333, "Smarties in car":31 },
 { "Horsepower":4, "$ saved/day":-4, "Price":16, "Owner income":8, "Car's weight":24, "h/100miles":0.25, "Smarties in car":11 },
 { "Horsepower":5, "$ saved/day":-5, "Price":25, "Owner income":10, "Car's weight":25, "h/100miles":0.2, "Smarties in car":40 },
 { "Horsepower":6, "$ saved/day":-6, "Price":36, "Owner income":12, "Car's weight":26, "h/100miles":0.1666666667, "Smarties in car":50 },
 { "Horsepower":7, "$ saved/day":-7, "Price":49, "Owner income":14, "Car's weight":27, "h/100miles":0.1428571429, "Smarties in car":6 },
 { "Horsepower":8, "$ saved/day":-8, "Price":64, "Owner income":16, "Car's weight":28, "h/100miles":0.125, "Smarties in car":38 },
 { "Horsepower":9, "$ saved/day":-9, "Price":81, "Owner income":18, "Car's weight":29, "h/100miles":0.1111111111, "Smarties in car":10 },
 { "Horsepower":10, "$ saved/day":-10, "Price":100, "Owner income":20, "Car's weight":30, "h/100miles":0.1, "Smarties in car":46 },
 { "Horsepower":11, "$ saved/day":-11, "Price":121, "Owner income":22, "Car's weight":31, "h/100miles":0.0909090909, "Smarties in car":20 },
 { "Horsepower":12, "$ saved/day":-12, "Price":144, "Owner income":24, "Car's weight":32, "h/100miles":0.0833333333, "Smarties in car":47 },
 { "Horsepower":13, "$ saved/day":-13, "Price":169, "Owner income":26, "Car's weight":33, "h/100miles":0.0769230769, "Smarties in car":16 },
 { "Horsepower":14, "$ saved/day":-14, "Price":196, "Owner income":28, "Car's weight":34, "h/100miles":0.0714285714, "Smarties in car":3 },
 { "Horsepower":15, "$ saved/day":-15, "Price":225, "Owner income":30, "Car's weight":35, "h/100miles":0.0666666667, "Smarties in car":8 },
 { "Horsepower":16, "$ saved/day":-16, "Price":256, "Owner income":32, "Car's weight":36, "h/100miles":0.0625, "Smarties in car":35 },
 { "Horsepower":17, "$ saved/day":-17, "Price":289, "Owner income":34, "Car's weight":37, "h/100miles":0.0588235294, "Smarties in car":9 },
 { "Horsepower":18, "$ saved/day":-18, "Price":324, "Owner income":36, "Car's weight":38, "h/100miles":0.0555555556, "Smarties in car":27 },
 { "Horsepower":19, "$ saved/day":-19, "Price":361, "Owner income":38, "Car's weight":39, "h/100miles":0.0526315789, "Smarties in car":45 },
 { "Horsepower":20, "$ saved/day":-20, "Price":400, "Owner income":40, "Car's weight":40, "h/100miles":0.05, "Smarties in car":42 },
 { "Horsepower":21, "$ saved/day":-21, "Price":441, "Owner income":42, "Car's weight":41, "h/100miles":0.0476190476, "Smarties in car":49 },
 { "Horsepower":22, "$ saved/day":-22, "Price":484, "Owner income":44, "Car's weight":42, "h/100miles":0.0454545455, "Smarties in car":24 },
 { "Horsepower":23, "$ saved/day":-23, "Price":529, "Owner income":46, "Car's weight":43, "h/100miles":0.0434782609, "Smarties in car":2 },
 { "Horsepower":24, "$ saved/day":-24, "Price":576, "Owner income":48, "Car's weight":44, "h/100miles":0.0416666667, "Smarties in car":37 },
 { "Horsepower":25, "$ saved/day":-25, "Price":625, "Owner income":50, "Car's weight":45, "h/100miles":0.04, "Smarties in car":28 },
 { "Horsepower":26, "$ saved/day":-26, "Price":676, "Owner income":52, "Car's weight":46, "h/100miles":0.0384615385, "Smarties in car":13 },
 { "Horsepower":27, "$ saved/day":-27, "Price":729, "Owner income":54, "Car's weight":47, "h/100miles":0.037037037, "Smarties in car":44 },
 { "Horsepower":28, "$ saved/day":-28, "Price":784, "Owner income":56, "Car's weight":48, "h/100miles":0.0357142857, "Smarties in car":7 },
 { "Horsepower":29, "$ saved/day":-29, "Price":841, "Owner income":58, "Car's weight":49, "h/100miles":0.0344827586, "Smarties in car":36 },
 { "Horsepower":30, "$ saved/day":-30, "Price":900, "Owner income":60, "Car's weight":50, "h/100miles":0.0333333333, "Smarties in car":48 },
 { "Horsepower":31, "$ saved/day":-31, "Price":961, "Owner income":62, "Car's weight":51, "h/100miles":0.0322580645, "Smarties in car":26 },
 { "Horsepower":32, "$ saved/day":-32, "Price":1024, "Owner income":64, "Car's weight":52, "h/100miles":0.03125, "Smarties in car":12 },
 { "Horsepower":33, "$ saved/day":-33, "Price":1089, "Owner income":66, "Car's weight":53, "h/100miles":0.0303030303, "Smarties in car":29 },
 { "Horsepower":34, "$ saved/day":-34, "Price":1156, "Owner income":68, "Car's weight":54, "h/100miles":0.0294117647, "Smarties in car":15 },
 { "Horsepower":35, "$ saved/day":-35, "Price":1225, "Owner income":70, "Car's weight":55, "h/100miles":0.0285714286, "Smarties in car":43 },
 { "Horsepower":36, "$ saved/day":-36, "Price":1296, "Owner income":72, "Car's weight":56, "h/100miles":0.0277777778, "Smarties in car":17 },
 { "Horsepower":37, "$ saved/day":-37, "Price":1369, "Owner income":74, "Car's weight":57, "h/100miles":0.027027027, "Smarties in car":21 },
 { "Horsepower":38, "$ saved/day":-38, "Price":1444, "Owner income":76, "Car's weight":58, "h/100miles":0.0263157895, "Smarties in car":0 },
 { "Horsepower":39, "$ saved/day":-39, "Price":1521, "Owner income":78, "Car's weight":59, "h/100miles":0.0256410256, "Smarties in car":4 },
 { "Horsepower":40, "$ saved/day":-40, "Price":1600, "Owner income":80, "Car's weight":60, "h/100miles":0.025, "Smarties in car":5 },
 { "Horsepower":41, "$ saved/day":-41, "Price":1681, "Owner income":82, "Car's weight":61, "h/100miles":0.0243902439, "Smarties in car":1 },
 { "Horsepower":42, "$ saved/day":-42, "Price":1764, "Owner income":84, "Car's weight":62, "h/100miles":0.0238095238, "Smarties in car":22 },
 { "Horsepower":43, "$ saved/day":-43, "Price":1849, "Owner income":86, "Car's weight":63, "h/100miles":0.023255814, "Smarties in car":18 },
 { "Horsepower":44, "$ saved/day":-44, "Price":1936, "Owner income":88, "Car's weight":64, "h/100miles":0.0227272727, "Smarties in car":34 },
 { "Horsepower":45, "$ saved/day":-45, "Price":2025, "Owner income":90, "Car's weight":65, "h/100miles":0.0222222222, "Smarties in car":39 },
 { "Horsepower":46, "$ saved/day":-46, "Price":2116, "Owner income":92, "Car's weight":66, "h/100miles":0.0217391304, "Smarties in car":41 },
 { "Horsepower":47, "$ saved/day":-47, "Price":2209, "Owner income":94, "Car's weight":67, "h/100miles":0.0212765957, "Smarties in car":19 },
 { "Horsepower":48, "$ saved/day":-48, "Price":2304, "Owner income":96, "Car's weight":68, "h/100miles":0.0208333333, "Smarties in car":23 },
 { "Horsepower":49, "$ saved/day":-49, "Price":2401, "Owner income":98, "Car's weight":69, "h/100miles":0.0204081633, "Smarties in car":30 },
 { "Horsepower":50, "$ saved/day":-50, "Price":2500, "Owner income":100, "Car's weight":70, "h/100miles":0.02, "Smarties in car":25 }
];

 var pc_simple = d3.parcoords()("#example3")
   .data(data2)
   .color(function(d) { return color(d['Horsepower']); })
   .alpha(0.6)
   .margin({ top: 40, left: 0, bottom: 22, right: 0 })
   .render()
   .createAxes()
   .brushable()
   .reorderable();

index.html

<!DOCTYPE html>
<html>
<head><meta chartset="utf-8">
  <script src="https://syntagmatic.github.io/parallel-coordinates/examples/lib/d3.min.js#d3.v2.js"></script>
  <link rel="stylesheet" type="text/css" href="https://syntagmatic.github.io/parallel-coordinates/d3.parcoords.css">
  <script src="https://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js" ></script>
</head>
<body>
<h4>Graph of several representatives dimensions:</h4>
<div id="example1" class="parcoords" style="width:600px;height:300px"></div>
<div id="example2" class="parcoords" style="width:600px;height:300px"></div>
<h4>Reading out relationships : from graphic patterns to dimensional relationships.</h4>
Note: you should select and drag axis to display the given axis side by side.
<li><b>x ⇔ -x :</b> lines crossings around a given point = negative relationship.
<li><b>x ⇔ x^ (x<sup>2</sup>):</b> lines somewhat parallel with increating gaps = positive relationship (correlation), with expentional property 
<li><b>x ⇔ ax (2x):</b> lines mostly parallel with exactly similar gaps = positive relationship (correlation), with exactly linear property 
<li><b>x ⇔ x+b :</b> lines mostly parallel with exactly similar gaps and different values in axis = positive relationship (correlation), with exactly linear property, plus translation 
<li><b>x ⇔ 1/x :</b> lines somewhat converging with decreating gaps = negative relationship (invert), with expentional property
<li><b>x ⇔ random :</b> lines crossing all around forming a messy net  = no specific relationship.

<h4>My data:</h4>
<div id="example3" class="parcoords" style="width:600px;height:300px"></div>
<h4>Reading out relationships for car ownership: from graphic patterns to dimensional relationships.</h4>
Note: you should select and drag axis to display the given axis side by side.
<li>Interval <b>Horsepower (x) ⇔ $ saved/day (-x):</b> lines crossings around a given point = negative relationship.
<li>Interval <b>Horsepower (x) ⇔ Price (x<sup>2</sup>):</b> lines somewhat parallel with increating gaps = positive relationship (correlation), with expentional property 
<li>Interval <b>Horsepower (x) ⇔ Owner income (2x):</b> lines mostly parallel with exactly similar gaps = positive relationship (correlation), with exactly linear property 
<li>Interval <b>Horsepower (x) ⇔ Weight (x+b):</b> lines mostly parallel with exactly similar gaps and different values in Owner incomeis = positive relationship (correlation), with exactly linear property, plus translation 
<li>Interval <b>Horsepower (x) ⇔ h/100miles (1/x):</b> lines somewhat converging with decreating gaps = negative relationship (invert), with expentional property
<li>Interval <b>Horsepower (x) ⇔ Smarties in car (random):</b> lines crossing all around forming a messy net  = no specific relationship.
</body>
</html>

parallelecoords.markdown

ParalleleCoords
---------------


A [Pen](https://codepen.io/hugolpz/pen/WqvvPx) by [Lopez Hugo](https://codepen.io/hugolpz) on [CodePen](https://codepen.io).

[License](https://codepen.io/license/pen/WqvvPx).

styles.css

.parcoords > canvas {
  font: 14px sans-serif;
  position: absolute;
}
.parcoords > canvas {
  pointer-events: none;
}
.parcoords text.label {
  cursor: default;
}
.parcoords rect.background:hover {
  fill: rgba(120,120,120,0.2);
}
.parcoords canvas {
  opacity: 1;
  transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
}
.parcoords canvas.faded {
  opacity: 0.25;
}
.parcoords {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: white;
}