100%

Working with food 2

✓ Published0🌍 Public

Last edited Sep 23, 2025

Created on Sep 23, 2025

Forked from Food Scatter Plot with React & D3

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

Clone the repository:

MIT Licensed

Similar vizzes

Loading thumbnail…

Food Project work

This example displays a scatterplot of food items from a USDA Foundation Foods dataset, comparing carbohydrate content on the x-axis against protein on the y-axis. The visualization uses logarithmic scales to accommodate the wide range of values across foods like hummus, black beans, and peanut butter. Built with React and D3 v7, the code handles data filtering and axis rendering through the `scaleLog`, `axisBottom`, and `axisLeft` APIs. Circles are positioned using the `selectAll` join pattern within the `viz.js` module, with labels and tick styling configured through attributes.

RRyan Offstein

89% match

Loading thumbnail…

Food Scatter Plot with React & D3

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.

RRyan Offstein

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

84% match

Loading thumbnail…

Fork of Food Scatter Plot with React & D3

This example plots foods from a USDA Foundation Foods dataset on a log-log scatter plot, comparing carbohydrate and protein content in grams. The React app loads the data with d3.json, then formats nutrient amounts before passing them to a reusable D3 visualization function. The viz module applies d3.scaleLog for both axes, draws axes with d3.axisBottom and d3.axisLeft, and renders food items as steelblue circles. The chart filters out non-positive nutrient values to accommodate the logarithmic scale.

RRyan Offstein

83% match

Loading thumbnail…

Food Images.

This interactive scatterplot maps nutritional data for over a hundred common foods, plotting nutrients like protein and carbohydrates on logarithmic or linear scales. Users can choose which nutrients appear on the x-axis, y-axis, and determine point size, with a toggle to replace colored circles with Wikipedia thumbnail images fetched via the MediaWiki API. Built with React and D3 v7, it uses `scaleLog`, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes and points, with data sourced from the USDA Foundation Foods dataset.

RRyan Offstein

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

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

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

82% match