Fork of ICE7_PY_PieChart

100%

Fork of ICE7_PY_PieChart

✓ Published0🌍 Public

Last edited Mar 27, 2022

Created on Mar 27, 2022

This pie chart visualizes the percentage contribution of five in-class exercises (ICE-1 through ICE-5) to a final student score. The chart displays each slice with a label and a corresponding color-coded legend, using a D3 ordinal color scheme. The visualization uses D3 v4’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to generate the SVG-based chart. A legend with colored dots and text labels is manually positioned within the SVG, and the data is embedded directly in the code as an array of name-share pairs.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7_PY_PieChart

This pie chart displays the percentage contribution of five individual in-class exercises (ICE-1 through ICE-5) to a final student score. The code uses D3 v4’s `d3.pie` and `d3.arc` to compute and render the SVG arcs, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory10`. A legend is drawn using appended circles and text labels, while each slice is labeled with its corresponding ICE name. The data is hardcoded as an array of objects, totaling 100 percent.

PPY09052021

93% match

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart naimisha

This pie chart visualizes student records, showing the distribution of math scores as proportional slices. The chart renders in SVG using D3 v5, with a scaleOrdinal color scheme and pie/arc generators to create segments. Each slice displays its value as a text label, and a legend on the right pairs color swatches with student results and corresponding numeric values. Data is loaded as CSV from a remote URL and processed asynchronously, with percentages formatted using d3.format.

NNaimisha-M

84% match

Loading thumbnail…

Fork of Fork of Fork of ICE - 7 Pie Chart naimisha

This example shows a pie chart of student math scores from a CSV dataset, with each slice labeled by its value and accompanied by a color-coded legend of results. The chart uses D3 v5 to fetch and parse the data via `d3.csv`, then generates SVG arcs with `d3.arc` and `d3.pie`, coloring slices with `d3.scaleOrdinal`. Labels are placed at arc centroids, and the legend lists each result with its corresponding value. The code applies a custom `d3.format` for tick labels and lays out all elements within an SVG canvas of fixed dimensions.

RRahulChaitu999

83% match

Loading thumbnail…

ICE7 Pie Charts

This chart displays the marks of individual students as a pie chart, with each slice representing one student and the arc length proportional to their marks. A legend to the right identifies each student by name and their corresponding mark value. The visualization is built using D3 v5, employing the `pie` layout function to compute arc data, `arc` for generating SVG path definitions, `scaleOrdinal` with a category10 color scheme, and data loaded asynchronously from a JSON file via `json()`.

BBVNPK001

83% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This example shows the percentage sales of different items in a pie chart, with a legend displaying each item’s name and corresponding value. Built with D3 v5, it loads data from a CSV hosted on GitHub, converts sales values to numbers, and uses `d3.pie()` and `d3.arc()` to generate the SVG path segments. Colors are assigned via `d3.scaleOrdinal`, while the legend is manually created with appended rectangles and text. The chart is rendered entirely in SVG, with a fixed width and height, and no interactive behavior.

MMar-99

83% match

Loading thumbnail…

ICE 7 Pie Chart

This pie chart visualizes the distribution of student marks, displaying each student's name and their corresponding percentage share of the total. The visualization fetches its data from a CSV file hosted on GitHub and renders the chart as an SVG using D3 v5. The code employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the pie segments and color them, with labels and a legend showing the percentage values and names. The chart is built using the `select` and `append` API to construct the SVG elements.

BBVNPK001

83% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This example visualizes album data as a pie chart, showing the percentage contribution of each person to the dataset. D3 v5 loads CSV data from a GitHub URL and uses `d3.pie` and `d3.arc` to generate SVG arc segments, with `d3.scaleOrdinal` assigning categorical colors. Labels display percentages on the arcs, while a side legend lists each person and their corresponding value. The chart is rendered as static SVG, with text formatting handled by `d3.format`.

CCherukuriMilind

83% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart displays the percentage of sales for different items, with a legend positioned to the right showing each item’s name and corresponding value. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate the segments, `d3.scaleOrdinal` for color mapping, and `d3.csv` to load the dataset from a GitHub gist. The visualization renders as SVG, with section labels and legend text styled via CSS.

RRahulSai05

83% match