Nutrient Parallel Coordinates IV

100%

Nutrient Parallel Coordinates IV

✓ Published0🌍 Public

Last edited Jun 14, 2018

Created on Jun 14, 2018

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.

AI-generated description

Previous Version. This version is implemented using D3 Version 4.

A visualization of the mean nutrient contents of all 8789 foods in USDA's SR28 Nutrient Database.

Data processed with SQLite and Node.js.

Also see the Nutrient Explorer.

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

mit Licensed

Similar vizzes

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

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

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

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

84% match

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

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

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

78% match

Loading thumbnail…

Simple Foods

This interactive scatterplot, built with React and D3 v7, visualizes the nutritional composition of everyday foods from the USDA Foundation Foods dataset. Users can select which nutrients to plot on the x- and y-axes, adjust the point radius based on a third nutrient, and switch between linear and logarithmic scales. The visualization uses D3 scales, axes, and SVG circles, with tooltips revealing the specific food item and its nutrient values.

RRyan Offstein

76% match