Fork of Fork of Pie Chart

100%

Fork of Fork of Pie Chart

✓ Published0🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

93% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example shows the calorie distribution of various foods using a pie chart, with a legend displaying each food's name and calorie count. It loads a CSV dataset from a GitHub gist using D3's `csv` function and renders the chart as SVG. The code uses `pie()` to compute arc data, `arc()` to generate the path segments, and `scaleOrdinal()` to assign categorical colors. Text labels and legend entries are added with `select()` and `append()`, while `format('.4~g')` formats the calorie values in the legend.

Mmounishnaidu96@gmail.com

84% match

Loading thumbnail…

Pie Chart ICE 7(Revanth)

This pie chart visualizes the protein content (in grams) of various cereals, displaying each cereal as a colored slice with a corresponding legend. The chart uses D3 v5, reading CSV data from a GitHub gist, and renders the pie slices using the `pie` and `arc` functions. Each slice is filled based on the cereal name using a categorical color scale, while legends are appended with a rect and text, with protein values formatted using `format` and genre-specific styling.

RRevanthGrreddy

83% match

Loading thumbnail…

Fork of Pie Chart

This example shows a pie chart of fruit sweetness levels, with each slice labeled by fruit name and its corresponding sweetness value in a legend beside the chart. The visualization splits the data into colored segments using D3’s `pie` and `arc` generators, with colors assigned via `scaleOrdinal`. It loads CSV data from a GitHub gist using `d3.csv`, renders the chart as SVG, and displays legend entries with fruit names and formatted sweetness numbers using `d3.format`. The code uses React for component structure and D3 v5 for all data binding and visual encoding.

SSravaniPosina

81% match