Fork of Pie Chart

100%

Fork of Pie Chart

✓ Published0🌍 Public

Last edited Mar 27, 2022

Created on Mar 27, 2022

This example displays a pie chart of deaths in Canada by state, with each slice colored and labeled, alongside a legend showing state names and death counts. The visualization is built with D3 v5, using `d3.pie()` and `d3.arc()` to generate the chart segments and label positions. Data is loaded asynchronously via `d3.csv()` from a GitHub Gist, with colors assigned through `d3.scaleOrdinal()`. The SVG rendering includes text labels on each slice and a legend with colored rectangles and formatted values, all styled with embedded CSS.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pie Chart

This example visualizes mortality rates across U.S. states as an annotated pie chart, with each slice labeled and accompanied by a legend showing state names and death counts. The visualization uses D3 v5 (d3.pie, d3.arc, d3.scaleOrdinal) to generate SVG paths and text elements, pulling data from a remote CSV file. It applies a custom color scale to distinguish slices and renders the chart centered on an SVG canvas with a static legend to the right.

RRahulSai05

89% match

Loading thumbnail…

Fork of Pie Chart

This example displays mortality rates across US states using a pie chart, with each slice representing a state’s death count and a legend listing state names alongside their numeric values. It loads CSV data from a GitHub gist, parses it with the `csv` function from D3 v5, and renders the chart as SVG. The visualization uses `pie` to compute slice angles, `arc` to generate path geometry, and `scaleOrdinal` to map states to a fixed color palette. Slice labels are positioned using `arc.centroid`, and the legend is built manually with appended `rect` and `text` elements.

Jjampani921@gmail.com

89% match

Loading thumbnail…

Pie Chart

This example shows a pie chart of country-level death counts, with each slice labeled by its value in thousands and accompanied by a color-coded legend. The chart is rendered as SVG using D3 v5, pulling CSV data from a GitHub gist. The code uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute slice geometry, assign colors, and draw paths, while `d3.select` and `d3.format` handle DOM updates and label formatting. The legend and slice labels are added as SVG text elements, with an outer ring arc generator used only for positioning text at slice centroids.

Hheykrizza

87% match

Loading thumbnail…

Fork of Pie Chart

This visualization displays mortality rates across countries in the United States using a pie chart, with colored segments and a legend showing each country’s death count. The chart is built with D3 v5, using the `pie` and `arc` generators to create the segments, and `scaleOrdinal` to map colors to data categories. It loads CSV data from a remote URL, processes the values, and renders the pie and legend as SVG elements, with text labels positioned via `arcGenerator.centroid`.

Aamiralitah

85% match

Loading thumbnail…

Pie Chart

This pie chart visualizes mortality rates across U.S. states, with each slice sized by the number of deaths and labeled with a value. The chart is rendered as an SVG using D3 v5, employing `d3.pie` and `d3.arc` to generate the segments and centroids for text placement. A legend on the right maps each color to its state and death count, with data fetched from a CSV via `d3.csv`. The visualization uses a custom color scale (`scaleOrdinal`) and formats death numbers with `d3.format`.

Ttarungunda

85% match

Loading thumbnail…

Fork of Fork of Pie Chart

This example presents a pie chart of internet usage deaths by country, using a dataset loaded from a GitHub gist via `d3.csv`. The chart displays each country’s share of total deaths as a colored arc segment, with a legend listing country names and matching color swatches. The visualization is rendered entirely in SVG, using `d3.pie` to compute the arc data, `d3.arc` to generate path segments, and `d3.scaleOrdinal` for the categorical color mapping. The page layout and styling are defined in HTML and CSS, with the chart drawn on a 960×450 SVG canvas.

NNaimisha-M

85% match

Loading thumbnail…

Pie Chart

This pie chart displays the mortality rate across different states in the United States. The visualization uses a donut-style pie chart with color-coded segments and a legend that lists each state alongside its corresponding death count. The data is loaded from a remote CSV file and rendered as SVG. The code leverages D3 v5 APIs such as `pie`, `arc`, `scaleOrdinal`, and `select` to generate the chart, with custom text styling applied to segment labels.

Kkranthireddyskr

84% match

Loading thumbnail…

Pie Chart

This pie chart displays COVID death rates per million for the top 20 states, using colored slices with labels and a corresponding legend that lists each state and its numerical value. The visualization is built with D3 v5, fetching data from a CSV via `d3.csv`, transforming it with `pie()` and rendering SVG paths using `arc()` and `arcGenerator.centroid`. Slice colors are assigned using `scaleOrdinal`, and the chart is presented on an SVG canvas with a fixed width and height.

RRohith Reddy

84% match