Skip to main content
SimilarExport ZIP
100%

Butter Macronutrients

✓ Published0🌍 Public
CCurran Kelleher
Last edited Sep 3, 2025
Created on Sep 3, 2025
Forked from Clickable Circles

A pie chart visualizes butter's macronutrient composition per 100 grams, showing fat as the dominant slice at 81.11g alongside smaller protein and carbohydrate segments. Clicking any slice highlights it with a darker stroke and full opacity while dimming others. Built with D3 v7, the chart uses pie and arc generators with a custom start angle for rotation, and labels position via arc centroid calculations. A unidirectional data flow pattern manages selection state, with the SVG rendered through d3.select and join operations.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Butter Macronutrients

This interactive pie chart visualizes voting results from 602 total members, showing 275 cast votes with 270 agreeing, 5 disagreeing, and 327 not voting. Clicking an arc highlights that segment by increasing its opacity and stroke width. Built with D3 v7, the chart uses `d3.pie` and `d3.arc` generators to compute arc paths and label positions, rendered into an SVG with a unidirectional data flow architecture managing state updates.

Ooxiomz@gmail.com
78% match
Loading thumbnail…

Fork of Butter Macronutrients

This example shows a reusable pie chart that displays two different macronutrient datasets, toggled by a button. The chart renders SVG arcs with white text labels at each slice’s centroid, using `d3.pie()` and `d3.arc()`. It demonstrates a function-based reusable chart pattern with getter/setter methods for width, height, value, label, and color scales. The `d3.schemeCategory10` ordinal scale assigns colors to slices, and the button switches between the two sample datasets.

224cs077@kpriet.ac.in
77% match
Loading thumbnail…

Pie Chart

This pie chart visualizes the percentage breakdown of nutritional components, such as carbohydrates, proteins, and fats, using interactive slices with hover effects that display exact values via tooltips. A legend on the right side highlights corresponding slices when hovered, dimming non-related arcs. Built with D3 v7, the chart uses the `pie` and `arc` functions to generate the layout and `scaleOrdinal` with `schemeTableau10` for colors. Transitions and opacity changes create a smooth, interactive experience for exploring the data.

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

Fork of Butter Macronutrients

A bar chart displays the percentage of varicella cases in Bolivia by year, with bars colored teal by default and turning coral when clicked to highlight a selected year. The chart loads data from a CSV file, maps it with numeric year and percentage values, and renders axes and bars using d3.scaleBand, d3.scaleLinear, d3.axisBottom, and d3.axisLeft. A unidirectional data flow pattern in udf.js manages state, passing selections between viz.js, setupSVG.js, and renderBarChart.js.

Eerickflorescallejas064@gmail.com
66% 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
66% match
Loading thumbnail…

Food Tree

A radial tree visualization displays estimated macronutrient percentages (fats, protein, carbs) for various foods, with each leaf node showing a small pie chart. The hierarchical layout groups foods into categories like grains, fruits, and proteins, using `d3.tree` with a radial size. Pie slices are rendered via `d3.pie` and `d3.arc`, while `d3.scaleOrdinal` maps the three nutrients to distinct colors. Data is embedded in the source as generated content. A color legend clarifies the nutrient color coding.

CCurran Kelleher
66% match
Loading thumbnail…

Pie Chart Analysis Of Chocolate

This pie chart visualizes the proportional distribution of chocolate types or attributes, with each categorical segment sized to its share of the whole. Built with D3.js, the chart uses SVG arcs and a color scale to distinguish slices, while HTML and CSS structure and style the page. The rendering relies on D3’s pie and arc generators to compute angles, and transitions are applied to animate the chart on load, revealing the data-driven layout directly from the embedded dataset.

Bbhavana.bayyapu@gmail.com
66% match
Loading thumbnail…

Pie chart For Milk Production

The pie chart visualizes milk production across various countries, showing each country’s proportional contribution with labeled slices and a hover tooltip that displays the percentage of total production. The chart is rendered in SVG using D3.js, with data fetched from a GitHub-hosted CSV file via `d3.csv`. It employs `d3.pie()` for angle computation, `d3.arc()` for slice geometry, and `d3.scaleOrdinal()` with a custom color range. Tooltips appear on mouseover, and the visualization uses `d3.select` for DOM manipulation and event handling.

PPriyaEnuganti
66% match