Nutrient Database Explorer

100%

Nutrient Database Explorer

✓ Published0🌍 Public

Last edited Aug 3, 2016

Created on Aug 3, 2016

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.

AI-generated description

forked from <a href='http://bl.ocks.org/syntagmatic/'>syntagmatic</a>'s block: <a href='http://bl.ocks.org/syntagmatic/3150059'>Nutrient Parallel Coordinates</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Nutrient Database Explorer

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.

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 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

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

87% 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

86% 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

85% 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

79% match

Loading thumbnail…

Food Nutrition Polishing

An interactive scatter plot visualizes the nutritional content of foods from the USDA Foundation Foods dataset, plotting two selectable nutrients along the x- and y-axes with a log or linear scale. Circle size encodes a third nutrient, and optional Wikipedia thumbnails replace the circles as image patterns. The React app uses D3 scales, axes, and tooltip transitions, with dropdown menus and toggles for scale type, nutrient selection, images, and legend visibility.

RRyan Offstein

78% match