Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Working with food 2

Public visualization

Viewing a saved revision (read-only)

9aab2a62955d45a3a5b55d538e0225e5

Working with food 2

0 stars0🌍 Public
RRyan Offstein
Last edited Sep 23, 2025
Created on Sep 23, 2025

This visualization displays nutrient data for various foods on a logarithmic scatter plot from the US Department of Agriculture's FoodData Central database. It plots the carbohydrate content against protein content for items like hummus and grape tomatoes. The implementation uses React with D3.js v7, employing `scaleLog`, `axisBottom`, and `axisLeft` APIs to render the axes. The `viz` function filters data points to those with positive values for the logarithmic scale, then draws circles with `join('circle')` to represent each food item.

AI-generated description

React D3 Logarithmic Scatter Plot

This project demonstrates a React application using D3.js to create a logarithmic scatter plot.

Running the Project

  1. Clone the repository: