Skip to main content
SimilarExport ZIP
100%

Pie Chart for nutrition analysis

✓ Published0🌍 Public
Ttejasviteegala@my.unt.edu
Last edited Mar 27, 2024
Created on Mar 27, 2024
Forked from HTML Starter

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.

AI-generated description

This Pie Chart has been created using html,css,d3.js.

MIT Licensed

Similar vizzes

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
81% 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
74% match
Loading thumbnail…

Fork of Pie Chart

This visualization displays the protein content of various cereals as a pie chart, with each slice colored and labeled through an accompanying legend that shows both the cereal name and its protein value in grams. The code uses D3 v5’s `pie` and `arc` generators to compute and render the SVG paths, while `scaleOrdinal` assigns a categorical color palette. Data is loaded asynchronously from a CSV gist via `d3.csv`, and the legend values are formatted using `d3.format`. The chart is rendered as static SVG with no interactivity.

NNikhilMakkena
74% match
Loading thumbnail…

Line Chart Of Sales of KinderJoy

This line chart visualizes the annual sales figures of KinderJoy, highlighting trends in sales performance over time. The visualization uses D3.js v5, employing scales such as `scaleTime` for the x-axis (Year) and `scaleLinear` for the y-axis (Sales in Thousands), with a basis-spline curve smoothing the data line. SVG elements render the axes and path, while the data is loaded from a CSV file. The chart emphasizes clarity with labeled axes, gridlines, and a clean, minimalist design, making it easy to observe yearly fluctuations in sales.

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

Fork of Fork of Pie Chart

This example visualizes the protein content in a cereal dataset as a pie chart, with each slice representing a cereal name and its corresponding protein grams. Using the d3.pie arc generator, the chart is rendered as SVG paths, while a custom legend displays each cereal name and its value. The code loads data from a GitHub gist via d3.csv, applies a categorical color scale from d3.scaleOrdinal, and formats numbers with d3.format. The visualization is built with D3 v5, using SVG for rendering, and includes custom styling for legend text.

Ssitaramchallapalli
73% match
Loading thumbnail…

Fork of Fork of Pie Chart

This example shows the protein content of various cereals as a pie chart, with each slice labeled in the legend alongside its gram value. The chart reads CSV data from a GitHub gist using `d3.csv` (via `getData.js`), then renders SVG paths with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. Legends are appended as grouped rectangles and text, with values formatted using `d3.format`. The visualization is built with D3 v5, rendered entirely in SVG, and includes a red heading for emphasis.

Bbhargavarathod
73% match
Loading thumbnail…

D3 Pie Chart_ICE7

This pie chart visualizes the calorie content per 100g for the top ten food items, sorted in descending order. The visualization is built using D3 version 7, rendering via SVG, with each slice’s value labeled directly on the chart. It uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with `schemeCategory10` for coloring, and appends interactive text elements. The data is loaded from a CSV file, and legends display the food name alongside its formatted calorie count, with the chart centered at (250,250).

NNiharika-Guthikonda
73% match
Loading thumbnail…

Fork of Fork of Pie Chart

This visualization displays the protein content of various cereals as a pie chart, with each slice colored by chest pain type and accompanied by a legend showing exact gram values. The chart uses D3 v5’s `pie` and `arc` generators to create SVG paths, with `scaleOrdinal` for slice colors. Data is loaded asynchronously from a CSV via `d3.csv` and processed in `getData.js`, while labels use `d3.format` to display compact gram measurements.

AAishwarya Manjunath
73% match