D3 Examples - Parallel Coordinates with Invertible Axes

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Invertible Parallel Coordinates</title>
    <style type="text/css">
​
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}
body { 
  font-family: sans-serif;
  font-size: 13px;
  line-height: 1.4em;
  background: #f9f9f9;
  color: #333;
}
​
body.dark {
  background: #070707;
  color: #e3e3e3;
}
​
#wrap {
  padding: 0 0.5%;
}
​
svg {
  font: 10px sans-serif;
}
​
canvas, svg {
  position: absolute;
  top: 0;
  left: 0;
}
​
#chart {
  position: relative;
}
​
.brush rect.extent {
  fill: rgba(255,255,255,0.2);
  stroke: #777;
}
​
.dark .brush rect.extent {
  fill: rgba(0,0,0,0.2);
  stroke: #aaa;
}
​
.resize rect {
  fill: none;
}
​
.background {
  fill: rgba(255,255,255,0.3);
  stroke: rgba(255,255,255,0.4);
}
.dark .background {
  fill: rgba(0,0,0,0.3);
  stroke: rgba(0,0,0,0.4);
}
​
.axis g {
  pointer-events: none;
}
​
.axis line, .axis path {
  display: none;
  fill: none;
  stroke: rgba(180,180,180,1);
  shape-rendering: crispEdges;
}
​
.axis .tick {
  width: 200px;
}
​
.axis text {
  fill: #222;
  text-anchor: middle;
  font-size: 10px;
  text-shadow: 0 1px 1px #fff, 1px 0 1px #fff, 0 -1px 1px #fff, -1px 0 1px #fff;
}
​
.axis text.label {
  fill: #333;
  font-weight: normal;
  font-size: 13px;
  cursor: move;
}
​
.dark .axis text {
  fill: #f2f2f2;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000, -1px 0 0 #000;
}
​
.dark .axis text.label {
  fill: #ddd;
}
​
.quarter, .third, .half {
  float: left;
}
​
.quarter {
  width: 23%;
  margin: 0 1%;
}
​
.third {
  width: 31%;
  margin: 0 1%;
}
​
.half {
  width: 48%;
  margin: 0 1%;
}
​
h3 {
  margin: 0.9em 0 0.6em;
}
​
p {
  margin: 0.6em 0;
}
​
#food-list {
  width: 100%;
  height: 460px;
  overflow-x: auto;
  overflow-y: auto;
  background: #f8f8f8;
  white-space: nowrap;
}
#legend {
  text-align: right;
  overflow-y: auto;
  height: 460px;
}
.dark #food-list {
  background: #0b0b0b;
}
.color-block {
  display: inline-block;
  height: 6px;
  width: 6px;
  margin: 2px 4px;
}
#rendered-bar,
#selected-bar {
  width:0%;
  font-weight: bold;
}
#rendered-bar {
  border-right: 1px solid rgba(120,120,120,1);
  background: rgba(120,120,120,0.6);
}
#selected-bar {
  border-right: 1px solid rgba(120,120,120,0.5);
  background: rgba(120,120,120,0.4);
}
.fillbar {
  height: 12px;
  line-height: 12px;
  border:1px solid rgba(120,120,120,0.5);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
 
::-webkit-scrollbar-track {
  background: #ddd;
  border-radius: 12px;
}
 
::-webkit-scrollbar-thumb {
  background: #b5b5b5;
  border-radius: 12px;
}
.dark ::-webkit-scrollbar-track {
  background: #222;
}
.dark ::-webkit-scrollbar-thumb {
  background: #444;
}
    </style>
  </head>
  <body>
  <div id="chart">
    <canvas id="foreground"></canvas>
    <svg></svg>
  </div>
  <div id="wrap">
    <div  class="third">
      <h3>Legend</h3>
      <p id="legend">
      </p>
    </div>
    <div class="third" id="controls">
​
      <h3>Rendering Progress</h3>
      <small>
        <strong id="data-count"></strong> entries, <strong id="selected-count"></strong> selected, <strong id="rendered-count"></strong> rendered
        <p>
          <div class="fillbar"><div id="selected-bar"><div id="rendered-bar">&nbsp;</div></div></div>
          Lasted rendered <strong id="render-speed"></strong> lines at <strong id="opacity"></strong> opacity.
        </p>
      </small>
​
​
      <h3>Controls</h3>
      <p>
        <strong>Brush</strong>: Drag vertically along an axis.<br/>
​
        <strong>Remove Brush</strong>: Tap the axis background.<br/>
​
        <strong>Reorder Axes</strong>: Drag a label horizontally.<br/>
​
        <strong>Invert Axis</strong>: Tap an axis label.<br/>
      </p>
      <p>
        Permanently filter the dataset with these buttons.<br/>
        Reload the page to start over.
      </p>
      <button id="keep-data">Keep</button>
      <button id="exclude-data">Exclude</button><br/>
​
      <h3>Appearance</h3>
      <button id="hide-ticks">Hide Ticks</button>
      <button id="show-ticks">Show Ticks</button><br/>
      <button id="hide-brush">Hide Brush Area</button>
      <button id="show-brush">Show Brush Area</button><br/>
      <button id="dark-theme">Dark</button>
      <button id="light-theme">Light</button>
​
      <h3>Credits &amp; License</h3>
        <small>
        <p>
        Adapted from examples by <a href="https://bl.ocks.org/1341021">Mike Bostock</a> and <a href="https://bl.ocks.org/1341281">Jason Davies</a>.<br/>
        </p>
        <p>
          Copyright &copy; 2012, Kai Chang<br/>
          All rights reserved. Released under the <a href="https://opensource.org/licenses/bsd-3-clause">BSD License</a>.
        </p>
        </small>
      </p>
    </div>
    <div class="third">
      <h3>Random sample of 25 entries</h3>
      <p id="food-list">
      </p>
    </div>
  </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/underscore@1.12.1/underscore-min.js"></script>
  <script src="parallel.js"></script>
</html>
    