D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
syntagmatic
Full window
Github gist
Nutrient Parallel Coordinates
<!DOCTYPE html> <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://d3js.org/d3.v2.js"></script> <script src="https://underscorejs.org/underscore.js"></script> <script src="parallel.js"></script> </html>
https://d3js.org/d3.v2.js
https://underscorejs.org/underscore.js