ICE-7 Pie Chart

100%

ICE-7 Pie Chart

✓ Published0🌍 Public

Last edited Mar 25, 2023

Created on Mar 24, 2023

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`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

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

84% match

Loading thumbnail…

ICE - 7 Pie Chart

This example displays the percentage of total sales for different items in a pie chart using D3 v5. The code loads CSV data from a GitHub gist and renders an SVG with a pie chart and a legend, with each slice and legend entry colored by a fixed ordinal scale. It uses `d3.csv`, `d3.pie`, and `d3.arc` to compute and draw the arc segments, and `d3.scaleOrdinal` for color mapping, while formatting the percentage labels with `d3.format`.

RRamyapriyaPutta

82% match

Loading thumbnail…

ICE-7 : Pie Chart

This pie chart displays the scores of 10 selected games from a CSV dataset, with each slice colored by game name and accompanied by a legend showing the game and its numeric score. The visualization uses d3.pie and d3.arc to generate the circular segments, with d3.scaleOrdinal assigning colors from a predefined range. Data is loaded asynchronously via d3.csv from a Gist URL, and the SVG rendering includes custom styled text and legends on a black background.

Ggunasindhuja

82% match

Loading thumbnail…

ICE-7

A pie chart visualizes sales by category from a CSV dataset, using d3.csv to load values. The SVG graphic displays category labels on each slice via d3.arc and a legend on the right. D3 v7’s pie generator computes the arc angles, while d3.scaleOrdinal with schemeTableau10 assigns colors. The code uses `d3.pie()` and `d3.arc()` to generate paths, with tooltips added as titles, and a legend built from rectangles and text elements.

Aankitgoudpoodhari07@gmail.com

81% match

Loading thumbnail…

ICE-7:Pie Chart for csv dataset

This pie chart displays the nuclear energy usage of various countries, with each slice representing a country and its corresponding usage value. The chart is rendered as an SVG using D3 v5, with data fetched as CSV from a GitHub Gist. The code uses `d3.csv` to load the dataset, `d3.pie` and `d3.arc` to compute and draw the slices, and `d3.scaleOrdinal` to assign colors. Each slice displays its value in thousands, and a legend on the right shows country names alongside their usage figures.

BBajiSharifPatan@my.unt.edu

81% match

Loading thumbnail…

A10 - 1

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.

MMike Z

81% match

Loading thumbnail…

ICE-7 Varunpie

This visualization presents a pie chart of the top 10 most frequent math scores from a dataset loaded via `d3.csv`. It shows the distribution of these scores by count, with a legend displaying each score and its frequency. The code uses `d3.pie()` and `d3.arc()` to generate the SVG slices, with `d3.schemeCategory10` providing a custom color palette. The chart is rendered with `d3.v7` in an HTML page, fetching data from a GitHub gist URL.

VVarun Gadde

80% match