Skip to main content
SimilarExport ZIP
100%

Nutrient Profile

✓ Published0🌍 Public
NNita
Last edited Jan 1, 2020
Created on Dec 27, 2019
Forked from Stylized Bar Chart

This chart displays the nutritional profile of peanut butter, with the amount of each nutrient represented by horizontal bars. The data visualization is built with React and rendered as an SVG, using D3 v5 functions like `scaleBand` and `scaleLinear` to position the bars and axes. The underlying data is loaded from a CSV file and comes from the Wikipedia nutritional profile of peanut butter. Interactive tooltips provide the precise value for each nutrient when the mouse hovers over a bar.

AI-generated description

The viz shows Nutritional Profile of Peanut Butter.

Data: Nutritional profile of Peanut Butter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Food

This example shows a horizontal bar chart of nutritional data for the top ten foods, using a bar’s length to encode each item’s 2019 nutrient value. The chart renders as an SVG using React, with the `d3.csv` loader fetching data from a GitHub Gist. Scales from `d3.scaleBand` and `d3.scaleLinear` position the bars and axes, while D3’s `axisBottom` and `axisLeft` are manually replaced by custom tick rendering. The visualization highlights the relative nutrient amounts across food categories.

KKeerthipriyaBankuru
70% match
Loading thumbnail…

Scatter plot of nutrition data

This scatter plot compares nutrient levels in peanut oil and extra light olive oil, using USDA foundation food data from 2020. The x-axis encodes nutrient ID, the y-axis shows grams per 100g of food, and colored dots distinguish the two oil types based on food ID. It uses D3 v6 with scaleLinear for axes, circle elements rendered in SVG, and csv loading from a GitHub Gist. The code filters data to two specific foods and provides axis labels via axisLeft and axisBottom.

MMing Liu
68% match
Loading thumbnail…

Bar graph

This example shows a horizontal bar graph that compares the protein content of various food items, with each item’s name on the y-axis and protein grams on the x-axis. The visualization uses React to manage the component state and D3 v6 scales (`scaleBand`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) to render the SVG chart. Data is loaded asynchronously from a CSV file using D3’s `csv` method, and bars are drawn as SVG rectangles with a fixed color.

Ppanduvik99@gmail.com
67% match
Loading thumbnail…

Nutrient Parallel Coordinates IV

A parallel coordinates chart displays nutrient amounts across US Department of Agriculture food samples, with 25 numeric axes (fat, sugars, vitamins) plus categorical axes for food group and manufacturer. Each sample is a colored polyline, sorted by food group. Rendering splits into an SVG for axes and a Canvas overlay for the 3,000+ polylines. Built with React and d3.v4, it uses d3.scalePoint, d3.scaleSqrt, d3.axisLeft/Right, and d3.brush for interactive filtering.

Mmuzzheng
67% match
Loading thumbnail…

Nutrient Database Explorer

This interactive parallel coordinates chart explores USDA nutrient data for thousands of foods across 14 nutritional dimensions, colored by food group. Users brush axes to filter, drag labels to reorder or invert axes, and remove axes by dragging to the edge. The visualization uses D3.js for axes, brushing, and SVG rendering, while Canvas layers handle background, foreground, and highlighted line drawing for performance.

Mmasangar
65% match
Loading thumbnail…

Pie Chart for nutrition analysis

This pie chart visualizes the nutritional breakdown of a Kinder Joy product, showing the percentage distribution of components like fat, sugar, and protein. The chart uses D3.js v5 to generate SVG arcs, with each segment labeled with its percentage value and a legend identifying the corresponding nutrient. Data is loaded from a CSV file hosted in a GitHub gist. The visualization employs `d3.pie` for angle generation, `d3.arc` for path construction, and `d3.scaleOrdinal` to assign distinct colors to each category.

Ttejasviteegala@my.unt.edu
65% match
Loading thumbnail…

Barchart (nutriments)

This example shows a bar chart of nutrient data for various crops. Each rectangle’s height encodes the value of the AvN field (nitrogen) from a TSV dataset of plant nutrient measurements, with the bars positioned along the x-axis by row index. The chart is rendered as SVG using D3 v4, with blue-outlined rectangles on a gold background. Though axes and labels are not implemented, the chart effectively communicates relative differences in nitrogen content across the listed crops, such as broccoli and lettuce showing higher values than tomato or papaya. The visualization is minimal, using a fixed scale from 0 to 67 (scaled to a height of 100) and colored gold background to emphasize the bar strokes.

EEsdras08
64% match
Loading thumbnail…

Nutrient Database Explorer

This interactive tool explores USDA nutrient data across 14 dimensions using parallel coordinates, with foods colored by group. Users can brush axes to filter, drag labels to reorder dimensions, and click to invert axes. It renders polylines onto multiple layered Canvas elements while SVG handles axis labels and ticks, using D3’s scales and drag behavior for interaction.

CCurran Kelleher
63% match