Skip to main content
SimilarExport ZIP
100%

Nutrition & Health Outcomes

✓ Published0🌍 Public
RRyan Offstein
Last edited Aug 31, 2025
Created on Aug 31, 2025
Forked from Loading Data

This visualization displays the nutritional composition of foundation foods, detailing specific vitamins, fatty acids, and minerals for each food item. The interface shows raw JSON data from the `data.json` file in a structured pre-formatted text block. Using D3 v7, the code employs `select` and `join` operations to render the data container, while fetching the dataset asynchronously via `fetch()` and parsing it with `csvParse()` to populate the visualization state.

AI-generated description
MIT Licensed

Similar vizzes

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

Food Nutrition Feedback

This interactive visualization maps nutritional content across a variety of foods, allowing users to compare two nutrients on the x- and y-axes and optionally encode a third nutrient as bubble size. Built with React and D3.js, it plots data from the Foundation Foods dataset, using either a linear or logarithmic scale. The visualization can optionally render food images from Wikipedia as point markers, and includes hover tooltips to identify specific foods.

RRyan Offstein
76% 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
75% 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
74% match
Loading thumbnail…

Playing with Foood

This interactive scatterplot displays the nutritional composition of foods from the USDA’s Foundation Foods dataset. Users can independently map select nutrients to the x-axis, y-axis, and circle radius, with a toggle for logarithmic or linear scaling on both axes. Built with React and D3.js (v7), the visualization uses `scaleLog` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `extent` to compute domains. Hovering over a circle reveals the food’s description via a tooltip.

RRyan Offstein
73% 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
73% match
Loading thumbnail…

Food Nutrition Feedback Bigger Images

This interactive scatterplot, built with React and D3 v7, visualizes the nutritional profiles of foods from the USDA Foundation Foods dataset. Users select which nutrients to plot on the x-axis, y-axis, and as the circle radius; a log or linear scale is available for both axes. The visualization animates point positions when the nutrient selection changes. An optional feature fetches food images from the Wikipedia API to display as point patterns, with a categorized color legend identifying food groups.

RRyan Offstein
72% match
Loading thumbnail…

Week 9 Food Interaction

This interactive scatterplot visualizes nutrient compositions of foods from the USDA Foundation Foods dataset. Users can select which nutrients appear on the x- and y-axes, toggle between linear and logarithmic scales, and optionally map a third nutrient to point radius. The visualization uses D3 v7 scales and axes within a React application, with support for fetching Wikipedia thumbnail images to display as point fills. Animated transitions update the plot when selections change, and a tooltip provides detailed food descriptions and category information.

RRyan Offstein
72% match