Skip to main content
๐ŸŒ Public

Share visualization

Send this visualization to others.

Food Scatter Plot with React & D3

Public visualization

Food Scatter Plot with React & D3

0 stars3๐ŸŒ Public
RRyan Offstein
Last edited Oct 19, 2025
Created on Sep 18, 2025

This scatter plot displays the relationship between carbohydrate and protein content in various foods, with both axes using a logarithmic scale. The data comes from the USDA Foundation Foods dataset, which is loaded and formatted in App.js before being passed to the visualization. The plot is rendered by a custom viz.js component that uses D3's scaleLog, axisBottom, and axisLeft APIs to construct the chart within a React application. Each food item is represented as a steelblue circle, with the chart axes labeled to identify the nutrient values.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed