D3 Examples - Parallel Coordinates Intersections

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Broken Parallel Coordinates</title>
    <style type="text/css">
html {
  margin: 0;
}
body { 
  font-family: sans-serif;
  font-size: 13px;
  line-height: 1.4em;
  background: #f2f2f2;
  color: #666;
  margin: 10px 0 0 0;
  overflow: hidden;
}
​
body.dark {
  background: #121212;
  color: #ccc;
}
​
#wrap {
  padding: 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,1);
  stroke: rgba(255,255,255,1);
  shape-rendering: crisp-edges;
}
​
.dark .brush rect.extent {
  stroke: rgba(0,0,0,1);
  stroke: rgba(0,0,0,1);
  fill: #000;
  shape-rendering: crisp-edges;
}
​
.resize rect {
  fill: rgba(180,180,180,0.3);
}
​
.background {
  fill: none;
}
​
.axis {
  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-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff;
  text-anchor: middle;
}
​
.axis text.label {
  fill: #444;
  font-size: 13px;
  font-weight: bold;
}
​
.dark .axis text {
  fill: #f2f2f2;
  text-shadow: 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%;
}
​
#food-list {
  height: 450px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f8f8f8;
}
#legend {
  text-align: right;
}
.dark #food-list {
  background: #0b0b0b;
}
.color-block {
  display: inline-block;
  height: 6px;
  width: 6px;
  margin: 2px 4px;
}
    </style>
  </head>
  <body>
  <div id="chart">
    <canvas id="foreground"></canvas>
    <svg></svg>
  </div>
  <div id="wrap">
    <div  class="quarter"id="legend"></div>
    <div class="quarter" id="controls">
      <p>
      Rendered: <strong id="rendered-count"></strong><br/>
      Selected: <strong id="selected-count"></strong><br/>
      Opacity: <strong id="opacity"></strong><br/>
      <button id="dark-theme">Dark</button>
      <button id="light-theme">Light</button>
      </p>
      <p>
        Drag along a vertical axis to brush<br/>
        Tap the axis to remove its brush                                          
      </p>
      <p>
      This is a random sample of &rarr;<br/>
      up to 80 selected foods
      </p>   
    </div>
    <div class="half" id="food-list"></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>
    