Skip to main content
SimilarExport ZIP
100%

Nutrient Database Explorer

✓ Published0🌍 Public
PPacsangon
Last edited Aug 22, 2015
Created on Jul 21, 2016

This interactive parallel coordinates explorer visualizes USDA nutrient data across 14 dimensions for various foods, colored by food group. Users can brush axes to filter data, reorder axes by dragging labels, invert axes, and remove them entirely. The visualization uses HTML5 Canvas layers for efficient rendering of polylines, with D3.js (v2) managing the SVG axis ticks, labels, and drag interactions. The tool includes features for exporting filtered data as CSV and dynamically searching the dataset.

AI-generated description

Improvements:

  • 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

Bugfixes:

  • Inverting doesn't destroy brushes, instead moves them
  • Keeping preserves inverted axes

Similar vizzes

Loading thumbnail…

Nutrient Database Explorer

This interactive tool explores USDA nutrient data across 14 dimensions using parallel coordinates, with foods colored by group. Users can brush axes to filter, drag labels to reorder dimensions, and click to invert axes. It renders polylines onto multiple layered Canvas elements while SVG handles axis labels and ticks, using D3’s scales and drag behavior for interaction.

CCurran Kelleher
96% match
Loading thumbnail…

Nutrient Database Explorer

This interactive parallel coordinates chart explores USDA nutrient data for foods across 14 dimensions, colored by food group. It renders polylines on layered Canvas elements for performance, while using SVG for axes, ticks, and drag interactions. Users brush axes to filter, invert axes by clicking labels, reorder dimensions by dragging, and remove axes by dragging them to the edge. The code builds on d3.v2, utilizing d3.svg.axis, d3.behavior.drag, and d3.scale.ordinal, with additional controls for exporting data as CSV and toggling between dark and light themes.

PPacsangon
96% match
Loading thumbnail…

Nutrient Database Explorer

This interactive parallel coordinates chart explores USDA nutrient data for thousands of foods across 14 nutritional dimensions, colored by food group. Users brush axes to filter, drag labels to reorder or invert axes, and remove axes by dragging to the edge. The visualization uses D3.js for axes, brushing, and SVG rendering, while Canvas layers handle background, foreground, and highlighted line drawing for performance.

Mmasangar
95% match
Loading thumbnail…

Nutrient Parallel Coordinates IV

This visualization uses parallel coordinates to compare mean nutrient contents across 8,789 foods from the USDA SR28 Nutrient Database. Each food group is color-coded, with axes for macronutrients, vitamins, and minerals, and the chart supports brushing to filter data. The D3 v4 implementation renders axes as SVG while drawing the polylines on a canvas layer for performance, using d3.scaleSqrt for value encoding and d3.scalePoint for axis positioning. Data is processed from SQLite via Node.js.

AAjayyy
85% match
Loading thumbnail…

Nutrient Parallel Coordinates IV

This visualization uses parallel coordinates to display the mean nutrient contents of 8789 foods from the USDA SR28 Nutrient Database. Each axis represents a nutrient, and each line represents a food item, colored by food group. The implementation uses D3 version 4, rendering axes as SVG and the data lines to a Canvas overlay for performance. The code defines custom scales, such as `d3.scaleSqrt` for numeric dimensions, and includes interactive axis highlighting and brushing extents.

AAjayyy
84% match
Loading thumbnail…

Nutrient Parallel Coordinates IV

A parallel coordinates chart displays nutrient amounts across US Department of Agriculture food samples, with 25 numeric axes (fat, sugars, vitamins) plus categorical axes for food group and manufacturer. Each sample is a colored polyline, sorted by food group. Rendering splits into an SVG for axes and a Canvas overlay for the 3,000+ polylines. Built with React and d3.v4, it uses d3.scalePoint, d3.scaleSqrt, d3.axisLeft/Right, and d3.brush for interactive filtering.

Mmuzzheng
82% match
Loading thumbnail…

More Food

This interactive scatterplot visualizes the nutritional composition of foods from the USDA Foundation Foods dataset, letting users compare nutrient levels across three axes. Each circle represents a food item, positioned by two selectable nutrients on the x and y axes, with circle size encoding a third nutrient. Users can switch between log and linear scales via dropdown menus. The visualization uses React for state management and rendering, D3 v7’s `scaleLinear`, `scaleLog`, `axisBottom`, and `axisLeft` for scales and axes, with hover tooltips showing food descriptions.

RRyan Offstein
77% match
Loading thumbnail…

Food Nutrience

This interactive visualization explores the nutritional composition of a curated selection of foods from the USDA FoodData Central dataset. It reads a local `data.json` file containing food items with their associated nutrient values (such as vitamins, fatty acids, and minerals) and uses d3’s `select` and `join` operations to render the raw data as a formatted JSON structure in a `<pre>` element. The visualization serves as a debugging and exploration tool, displaying the exact food and nutrient records loaded from the source, highlighting the distribution of analytical data points, medians, and amounts for each nutrient. The interface is minimal, with a simple body layout and a state-managed loading process that fetches and displays the data upon initialization.

RRyan Offstein
77% match