A10 - 1 — VizHub

100%

A10 - 1

✓ Published0🌍 Public

Last edited Nov 23, 2022

Created on Nov 23, 2022

This visualization shows the protein content of various foods as a pie chart, with each segment colored and labeled in a legend. The chart reads data from a CSV file, converts protein values to numbers, and computes the total to render the arcs. Using D3 v5, the code applies the `pie` and `arc` generators, scales colors with `scaleOrdinal`, and formats tick values with `format`. A legend displays each item name and its protein amount in grams, with the SVG positioned at a fixed size.

AI-generated description

MIT Licensed

Similar vizzes

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

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

82% match

Loading thumbnail…

Fork of Fork of Pie Chart

This example shows the amount of protein in grams present in various cereals as a pie chart, with a legend identifying each cereal and its corresponding protein value. The visualization loads a CSV dataset from a GitHub gist using `d3.csv` and renders the chart as SVG. It uses `d3.pie` to compute the arc angles, `d3.arc` to generate the path segments, and `d3.scaleOrdinal` to assign colors from a fixed palette. A separate legend group is built by appending rectangles and text labels for each data entry.

Eeravellisaimeghana

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

81% match

Loading thumbnail…

ICE-7 Pie Chart

This example displays a pie chart ranking the top nine foods by protein content, distinguishing between vegetarian and non-vegetarian options. It uses D3 v5 APIs (`d3.pie`, `d3.arc`, `d3.scaleOrdinal`) to generate SVG paths, with a legend showing food names and protein values in grams. The data is loaded asynchronously from a CSV file via a Gist URL using D3's `csv` import, and formatted with `d3.format`.

Aabdhaseeeb

81% match

Loading thumbnail…

Fork of Fork of Pie Chart

This pie chart visualizes the protein content in grams for different cereals, using a dataset loaded from a GitHub-hosted CSV file via d3.csv. The chart encodes categorical values with d3.pie and d3.arc paths, while a d3.scaleOrdinal color scheme distinguishes each cereal across nine distinct hues. A legend rendered alongside the chart pairs each cereal’s name with its numerical protein value, formatted using d3.format. The visualization is built entirely with SVG elements in D3 v5, with the chart centered in an HTML page and styled via an external stylesheet.

Nnsatyaprakash22

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

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

79% match