Skip to main content
SimilarExport ZIP
100%

Nutrient Database Explorer

✓ Published0🌍 Public
CCurran Kelleher
Last edited Feb 3, 2023
Created on Oct 30, 2025

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.

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

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
80% match
Loading thumbnail…

Scatterplot (Canvas)

This interactive scatterplot displays nutritional data for various foods as colored dots on a canvas. Users can switch the X and Y axes via dropdown menus to explore relationships between nutrients such as protein, calcium, sodium, and calories. Built with D3.js v2 and rendered on an HTML5 canvas, it uses Underscore.js for data handling and updates the visualization dynamically without page reloads. Hovering over a point reveals the food name in a dedicated readout. The example shows how D3 can drive canvas-based scatterplots with axis controls and linked tooltips.

GGerHobbelt
74% match
Loading thumbnail…

Iris parallel coordinate plot

This interactive parallel coordinate plot displays nutritional data for 67 ice cream flavors from a CSV file, using color-coded lines to represent each flavor across four dimensions: trans fat, carbohydrates, sugars, and protein. Users can click and drag axis labels to reorder the dimensions, with adjacent axes swapping positions when crossed. The visualization uses D3 v4 with SVG rendering, employing d3.scaleOrdinal for color mapping, d3.scalePoint for axis positioning, d3.line for path generation, and d3.drag for interactive axis movement. Hovering highlights a flavor by dimming other lines with opacity transitions.

SSumeyya-Eser
70% match
Loading thumbnail…

3D Scatter Plot

A 3D scatter plot visualizes nutrient data for various vegetables, mapping calcium, vitamin, and protein content along the three axes. The chart uses blue circular markers with green outlines and an opacity setting, rendered within a styled layout that includes axis titles and no margin. It loads a CSV dataset from a GitHub gist using D3's `d3.csv` function, then constructs the plot with Plotly's JavaScript API, specifically the `Plotly.newPlot` method and `scatter3d` trace type.

Nnikhilagopi
69% match
Loading thumbnail…

Fastfood Scatter Plot With Menus, Legend, and Tooltips

This interactive scatter plot displays nutritional data for McDonald’s menu items, sourced from a McDonald’s CSV dataset. Users can select which two nutritional variables to compare via dropdown menus, with each category colored using `d3.scaleOrdinal` and a clickable legend. The chart includes tooltips for point details, and a brushing interaction with `d3.brush` allows zooming into a region. A coordinated data table and parallel coordinates chart are also linked, updating based on selections with SVG and canvas rendering.

Wwangjonathan
68% match
Loading thumbnail…

Visualization

This interactive scatterplot visualizes nutritional data for 77 breakfast cereals from a CSV file, plotting calories against potassium while encoding protein in the dot area and manufacturer with color. Users can zoom and pan through the d3.behavior.zoom interface, and a button click switches the x-axis to carbohydrates with a transition. Hovering reveals tooltips via d3-tip. The SVG rendering uses d3.scale.linear for axes and circle elements with dynamic radius calculations based on protein values.

AAndresAnayaIsaza
68% match
Loading thumbnail…

Fastfood Scatter Plot With Menus, Legend, and Tooltips

This interactive scatter plot visualizes nutritional data for McDonald’s menu items, sourced from a CSV hosted on VizHub. Users select which two nutritional attributes (e.g., Calories, Sodium) to compare using dropdown menus, while colored circles represent item categories (Beef, Chicken, etc.). A clickable color legend filters the data, and hovering over a circle reveals a tooltip with the item’s name, category, and values. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition()` for animated circle updates, with SVG rendering and interactive menus.

Wwangjonathan
68% match