Fork of

100%

✓ Published0🌍 Public

Last edited Mar 12, 2023

Created on Mar 12, 2023

A pie chart displays marks for different subjects, with each slice colored and paired with a legend identifying the subject and its numeric value. The chart reads subject and mark data from a CSV file via `d3.csv`, and uses `d3.pie` and `d3.arc` to compute the slice geometry, while `d3.scaleOrdinal` assigns categorical colors. Legends are generated as SVG groups with rectangles and text, and the whole visualization is rendered as an SVG element.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pie chart Test

This visualization displays a basic pie chart of browser usage shares, with segments colored by a sequential ordinal scale and labeled with their names. The chart is rendered as an SVG using D3 v6, with data hardcoded in the script rather than loaded from the included CSV file. The code uses `d3.pie()` to compute arc angles, `d3.arc()` to generate path data, and `d3.scaleOrdinal()` for color mapping, while labels are positioned using an inner arc's centroid. The SVG is centered via CSS, and the visualization is based on a tutorial by FrontendTips.

SSonuSriN

84% match

Loading thumbnail…

Fork of Pie Chart

This example presents a monthly expenditures dataset as a pie chart, with each slice labeled by department and accompanied by a legend listing exact dollar amounts. Built with D3 v5, the visualization uses `d3.pie()` and `d3.arc()` to generate the slices, `d3.scaleOrdinal` for color mapping, and SVG `<path>` elements for rendering. Data is loaded asynchronously from a CSV URL via `d3.csv`, and the legend is constructed with appended rectangles and text elements.

BBala Sai Krishna

83% match

Loading thumbnail…

Fork of Pie chart Test

This is an SVG pie chart that visualizes the percentages of white, black, and draw results from a dataset of 20,058 total records, with each slice labeled by its name and percentage. The chart uses D3 v6's `d3.pie` function to compute the arc segments and `d3.arc` to define both the path shapes and the text label positions, with a custom color scale (`d3.scaleOrdinal`) mapping values to a palette. The chart is centered within a large 4000x4000 SVG canvas, and the data is hardcoded in `index.js` rather than being loaded from the provided `data.csv` file.

Ppeterwang6666

83% match

Loading thumbnail…

Fork of Pie Chart _Niharika

This pie chart displays the percentage marks achieved by a student in each class subject. The D3.js v5 code loads a CSV dataset from a GitHub gist, computes the pie layout, and renders colored SVG arc segments with percentage labels. A legend on the right maps each color swatch to its corresponding subject and value, while the chart uses `d3.pie()` and `d3.arc()` for geometry and `d3.scaleOrdinal` for color assignment.

NNiharika Reddy Amanaganti

83% match

Loading thumbnail…

Fork of Pie Chart

This visualization displays a pie chart of annual values from 2010 through 2020, with each slice labeled by its corresponding year and colored using the D3 categorical color scheme. The chart is rendered as SVG within a 600x400 pixel canvas, using the `d3.pie` layout function to compute arc segments and `d3.arc` to generate the path geometries, with color assigned via `d3.scaleOrdinal`. Labels are positioned at each slice’s centroid using the arc’s centroid method.

YYashwanth0311

83% match

Loading thumbnail…

Fork of Fork of countries

This example displays a pie chart of sales records, with each slice representing data grouped by country. The visualization renders using SVG and reads its data from a CSV file hosted online via `d3.csv`. The code uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the slices and assign colors to each segment. Each slice is labeled with its value, and a legend is drawn on the right side. The chart is generated by fetching data with `d3.csv` from a provided URL, then iterating through the records to sum the `orderdate` values for the total.

NNaimisha-M

83% match

Loading thumbnail…

Fork of Fork of Pie chart

This example displays an interactive pie chart showing the distribution of survey participants across different age groups, with each slice labeled with its value and accompanied by a legend listing age groups and member counts. The visualization fetches CSV data from a remote GitHub gist using `d3.csv`, then renders SVG paths with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. Text labels are positioned using `arc.centroid`, and the legend is built manually with SVG rectangles and text elements. The chart is styled with custom CSS, including hover-free static rendering and a centered title.

Aajaysonu

83% match

Loading thumbnail…

Fork of Fork of Pie chart Test111

This example displays a pie chart of country populations in SVG, using an ordinal color scale with a fixed palette. The chart is generated with d3.pie and d3.arc, and each slice is labeled with the country name positioned via d3.arc centroid coordinates. Data is loaded from a CSV file with d3.csv, and the chart is centered inside a large 4000x4000 SVG viewport. The code uses d3.v6 and relies on data binding to append path and text elements per slice.

Ppeterwang6666

82% match