D3 Examples - Improved Parallel Coordinates

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Parallel Coordinates</title>
    <style type="text/css">
html {
  margin: 0;
  width: 100%;
  height: 100%;
}
body { 
  font-family: sans-serif;
  font-size: 13px;
  line-height: 1.4em;
  background: #f9f9f9;
  color: #333;
  width: 100%;
  height: 100%;
}
​
body.dark {
  background: #070707;
  color: #e3e3e3;
}
​
#wrap {
  padding: 0 14px;
}
​
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.4);
  stroke: rgba(55,55,55,0.4);
  shape-rendering: crisp-edges;
}
​
.dark .brush rect.extent {
  fill: rgba(0,0,0,0.4);
  stroke: rgba(200,200,200,0.5);
}
​
.resize rect {
  fill: none;
}
​
.background {
  fill: rgba(255,255,255,0.4);
  stroke: rgba(255,255,255,0.8);
}
.dark .background {
  fill: rgba(0,0,0,0.4);
  stroke: rgba(0,0,0,0.8);
}
​
.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;
  font-weight: bold;
  text-anchor: middle;
  font-size: 12px;
  text-shadow: 0 1px 1px #fff, 1px 0 1px #fff, 0 -1px 1px #fff, -1px 0 1px #fff;
}
​
.axis text.label {
  fill: #444;
  font-size: 13px;
  font-weight: bold;
  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, .half {
  float: left;
}
​
.quarter {
  width: 23%;
  margin: 0 1%;
}
​
.half {
  width: 48%;
  margin: 0 1%;
}
​
h3 {
  margin: 0.9em 0 0.6em;
}
​
p {
  margin: 0.6em 0;
}
​
#food-list {
  overflow-x: hidden;
  overflow-y: auto;
  height: 400px;
  background: #f8f8f8;
}
#legend {
  text-align: right;
  overflow-y: auto;
  height: 400px;
}
.dark #food-list {
  background: #0b0b0b;
}
.color-block {
  display: inline-block;
  height: 6px;
  width: 6px;
  margin: 2px 4px;
}
#rendered-bar,
#selected-bar {
  width:0%;
  background: rgba(120,120,120,0.6);
  font-weight: bold;
  border-right: 1px solid rgba(120,120,120,1);
}
.fillbar {
 border:1px solid rgba(120,120,120,0.5);
}
    </style>
  </head>
  <body>
  <div id="chart">
    <canvas id="foreground"></canvas>
    <svg></svg>
  </div>
  <div id="wrap">
    <div  class="quarter">
      <h3>Legend</h3>
      <p id="legend">
      </p>
    </div>
    <div class="quarter" id="controls">
      <h3>Controls</h3>
      <p>
        Drag vertically along an axis to brush<br/>
        Tap the axis background to remove its brush<br/>
        Drag labels horizontally to reorder axes<br/>
      </p>
​
      <h3>Rendering Progress</h3>
      <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><br/>
        Opacity set at <strong id="opacity"></strong> to reduce overplotting<br/>
      </p>
​
      <h3>Filters</h3>
      <p>
        Click this button to rescale the axes for selected data, and remove unselected data.
      </p>
      <button id="keep-data">Keep Selected</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>
    </div>
    <div class="half">
      <h3>Random sample of 30 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>
    