Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Working with food 2

Public visualization

Viewing a saved revision (read-only)

cbe9474eff394f1e9568cc79ae6a54b4

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: