xxxxxxxxxx
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Nutrient Database Explorer</title>
<link rel="stylesheet" type="text/css" href="parallel.css" />
</head>
<body>
<div id="header">
<h1>Nutrient Explorer</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">
<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"> </div></div></div>
Lines at <strong id="opacity"></strong> opacity.
<span class="settings">
<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>
</span>
</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="bright">
<h3>What is this?</h3>
<p>
A multidimensional explorer of <a href="nutrients.csv">nutrient data</a> from the <a href="https://ndb.nal.usda.gov/">USDA</a>.
</p>
<p>
The parallel coordinates displays the nutrient content of foods in the database across 14 dimensions, colored by food group.
</p>
<p>
<a href="https://eagereyes.org/techniques/parallel-coordinate">Never heard of parallel coordinates? Read this tutorial.</a>
</p>
<p>
<a href="https://eagereyes.org/techniques/parallel-coordinates#brushing">Brush</a> the visualization to update other charts on this page.
</p>
<p>
Let me know what you think on <a href="https://www.reddit.com/r/d3js/comments/xh2ks/nutrition_parallel_coordinates_canvas/">Reddit</a>.
</p>
</div>
<div class="little-box">
<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 the left edge.<br/>
</p>
</div>
<div class="little-box">
<h3>Credits & 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 © 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">
<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="parallel.js"></script>
</html>
Modified http://mbostock.github.com/d3/d3.v2.js to a secure url
Modified http://underscorejs.org/underscore.js to a secure url
https://mbostock.github.com/d3/d3.v2.js
https://underscorejs.org/underscore.js