Fork of pie chart

100%

Fork of pie chart

✓ Published0🌍 Public

Last edited Apr 12, 2024

Created on Apr 12, 2024

A fork of a pie chart example visualizes COVID-19 case data from a CSV file, showing three categories (Infected, Recovered, Died) as colored slices with proportional labels and a legend. The D3 v5 code uses `d3.csv` to load the data, `d3.pie` to compute arc segments, and `d3.arc` with an inner radius of zero to generate the paths. Slice colors come from `d3.scaleOrdinal` with a manual range, and text labels are positioned using the arc’s centroid method. The SVG output is centered within a 980×550 canvas.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pie Chart Covid Proj Viz 3

This visualization shows the distribution of total COVID-19 cases across continents as a pie chart with an accompanying legend, using percentages derived from the total case count. The chart is built with D3 v5, employing `d3.pie` and `d3.arc` to generate the segments, and `d3.scaleOrdinal` for color mapping. Data is loaded via `d3.csv` from a GitHub-hosted dataset, and rendered as SVG with custom tick formatting and styled text labels inside each slice.

SSushmaNamidi@my.unt.edu

89% match

Loading thumbnail…

Fork of Pie Chart

A forked pie chart visualizes the distribution of new COVID-19 tests across geographic locations, using a D3 v5 pie layout with an SVG rendering. The chart shows the top 10 locations by test count, with each slice’s fill color and legend labels derived from the `d3.scaleOrdinal` and `d3.schemeCategory10` palette. Data is loaded from a CSV via `d3.csv`, sorted descending, and rendered with `d3.pie` and `d3.arc`; hover events log values to the console, and legends display each location’s name and test total. The React-based example is presented in an HTML page with custom CSS styling.

Ppemmasaniprudhvinadh

89% match

Loading thumbnail…

Fork of ICE - 7 Pie chart viz

This pie chart visualizes the percentage distribution of COVID-19 cases among the top five countries, with each slice labeled and a corresponding legend. Built with D3 v5, the example uses the `pie` layout function to compute arc segments and the `arc` generator to create the SVG paths. Data is loaded from a CSV file via the `csv` method in `getData.js` and `index.js`, with each country's percentage represented by a distinct color from a manual palette. The chart includes an interactive legend that pairs colored rectangles with country names and values.

AArruSkywalker

85% match

Loading thumbnail…

Fork of Fork of Pie chart

This example shows the distribution of shipping amounts across different cities during the Covid era using a pie chart rendered in SVG. The chart fetches data from a CSV file hosted on GitHub and displays each city’s total as a labeled slice, with a color-coded legend on the right. The code uses d3.csv to load the dataset, d3.pie to compute the angles, and d3.arc along with scaleOrdinal for the colored segments and centroid-based text placement.

VVineela Reddy

85% match

Loading thumbnail…

Fork of Pie Chart (with labels) with d3

This interactive donut chart visualizes COVID-19 deaths in US states using React and D3 v4. The pie chart displays state names and death counts with hover tooltips and opacity changes for emphasis. The code loads CSV data from a GitHub gist, parses it with the `csv` function, and renders SVG arcs using `d3.arc` and `d3.pie` within a React component. A legend accompanies the chart, and mouse events trigger tooltip positioning and visual feedback.

SSaiSree0122

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

84% match

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes population distribution by continent using a categorical color scale and labeled slices. The D3.js code loads CSV data from a GitHub gist, applies `d3.pie` to compute arc angles, and renders the result as SVG paths with `d3.arc`. Text labels are positioned at each slice’s centroid using `arc.centroid`. The chart is centered within a fixed 500×500 SVG canvas, with white stroke separators between slices and a clean, bordered container styled by CSS.

Ssumanthpenna0221@gmail.com

84% match

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE 7 Pie Chart

This example visualizes the top 5 countries by reported deaths in 2020 as a pie chart rendered in SVG. Each slice is colored and labeled with the number of deaths, while a legend to the right lists country names and their corresponding totals. The code fetches CSV data from a GitHub gist, parses it with d3.csv, and uses d3.pie and d3.arc to generate the chart. Colors are assigned via d3.scaleOrdinal, and labels are positioned using arc.centroid. The page loads d3 v5 from unpkg and embeds the logic in a bundle.js file.

PPrathyusha0304

84% match