D3 Examples - Fisheye Nutrient Parallel Coordinates, 146 Dimensions

Improvements:

Click a food to sort dimensions by that foods y values

Scale to window size and resizes

Click label to invert axis

Drag label to reorder axes

Rendering progress bar

Keep selected button removes unselected data

Exclude selected button removes selected data

Alphabetized random sample

Brushed axes only show tick numbers within extent

Rendering speed optimization targets 30 fps

Dynamic legend with group counts

Filtering by group

Hovering over food highlights polyline

Destination-over rendering feels less "spidery"

Export CSV

Detect numerical columns from first row

Delete column by dragging left

Text Search

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Fisheye - Nutrient Database</title>
    <link rel="stylesheet" type="text/css" href="parallel.css" />
  </head>
  <body>
  <div id="header">
    <h1>Fisheye - Nutrient Database</h1>
    <button title="Zoom in on selected data" id="keep-data" disabled="disabled">Keep</button>
    <button title="Remove selected data" id="exclude-data" disabled="disabled">Exclude</button>
    <button title="Export data as CSV" id="export-data">Export</button>
    <div class="controls">
      Distortion:
      <input type="text" id="distortion" value="7" style="width:24px"></input>
      <strong id="rendered-count"></strong>/<strong id="selected-count"></strong><!--<strong id="data-count"></strong>-->
      <div class="fillbar"><div id="selected-bar"><div id="rendered-bar">&nbsp;</div></div></div>
      <strong id="opacity"></strong> opacity.
      <button id="hide-ticks">Hide Ticks</button>
      <button id="show-ticks" disabled="disabled">Show Ticks</button>
      <button id="dark-theme">Dark</button>
      <button id="light-theme" disabled="disabled">Light</button>
    </div>
    <div style="clear:both;"></div>
  </div>
  <div id="chart">
    <canvas id="background"></canvas>
    <canvas id="foreground"></canvas>
    <canvas id="highlight"></canvas>
    <svg></svg>
  </div>
  <div id="wrap">
    <div class="third" id="controls">
      <div class="little-box">
        <p>
          This parallel coordinates has a <a href="https://bost.ocks.org/mike/fisheye/">fisheye distortion</a> for the widths between columns.
        </p>
        <p>
          <em>To shift the focus, hold the CTRL key while moving the cursor along the chart.</em>
        </p>
        <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/>
          <strong>Remove Axis</strong>: Drag axis label to edge of screen.<br/>
          <strong>Change focus</strong>: CTRL + Mousemove.
        </p>
      </div>
      <div class="little-box">
        <h3>Credits &amp; License</h3>
          <p>
          Adapted from examples by<br/>
          <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>
        </p>
      </div>
    </div>
    <div  class="third">
      <small>
        <!--Last rendered <strong id="render-speed"></strong> lines-->
      </small>
      <h3>Food Groups</h3>
      <p id="legend">
      </p>
    </div>
    <div class="third">
      <div id="sorted-by"></div>
      <h3>Sample of 25 entries <input type="text" id="search" placeholder="Search Foods..."></input></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://underscorejs.org/underscore.js"></script>
  <script src="fisheye.js"></script>
  <script src="parallel.js"></script>
</html>
​
    