dispie

100%

✓ Published0🌍 Public

Last edited Dec 5, 2024

Created on Dec 4, 2024

This pie chart shows the count of deaths by disaster type from 2000–2024, aggregating data into the top ten categories plus an “Others” slice. It uses React for component rendering and D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths and color slices. The code fetches a CSV via `d3.csv`, applies `d3.rollups` and `d3.sum` for aggregation, and adds interactive tooltips and percentage labels.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie chart

This interactive pie chart shows the distribution of disease types from a CSV dataset, displaying the count and percentage of each category when hovered. Built with React and D3 v5, the visualization uses d3.pie to compute arc segments, d3.arc to generate paths, and d3.scaleOrdinal with schemeCategory10 for coloring. A tooltip appears on mouseover via d3.select, revealing disease name, count, and percentage.

Bbassansackey@gmail.com

79% match

Loading thumbnail…

Pie Chart

A pie chart shows the top 10 causes of death in 2013, with each slice labeled in thousands using `d3.arc` and `d3.pie`. The chart is rendered as SVG with `d3.select` and `d3.scaleOrdinal` assigning colors from a fixed array. Data is loaded as CSV from a GitHub gist, and a legend lists each country alongside a colored square and its death count. Text formatting uses `d3.format` with the `~4g` specifier.

Nnagarjuna1968

78% match

Loading thumbnail…

Pie Chart

This pie chart displays the top 10 countries by COVID-19 deaths, with each slice labeled in thousands and a corresponding legend. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute and position the slices, while SVG renders the chart. Data is loaded asynchronously from a CSV file via `d3.csv` and sorted to select the top entries. The code also employs `d3.format` for readable tick labels and color-coded legend rectangles.

RRupeshGandham

78% match

Loading thumbnail…

pie chart

A pie chart displays the top 10 countries by recorded deaths from gas pollution in 2021, with each slice labeled in thousands and accompanied by a color-matched legend. The visualization reads data from a CSV file via `d3.csv` and uses `d3.pie` and `d3.arc` to generate the segments, with `d3.scaleOrdinal` assigning colors. Text labels are positioned using the arc centroid, and the chart renders as SVG within an HTML page.

SSai Hemanth Babu Sunkari

78% match

Loading thumbnail…

Pie Chart

This pie chart visualizes death rates across the top 10 countries, with each slice labeled in thousands and a corresponding legend listing country names and values. The data is fetched from a CSV file hosted on GitHub and rendered as an SVG using D3 v5 APIs, including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. The chart applies a custom color palette per slice and uses `d3.format` to display abbreviated numbers.

KKiran3295

77% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the distribution of deaths by country from a remote CSV dataset, displaying each category as a colored arc with value labels and a corresponding legend. Built with D3 v4, the chart uses `d3.pie()` and `d3.arc()` to generate SVG paths, with `d3.scaleOrdinal` and `d3.schemeCategory10` for coloring. The SVG is responsive via a `viewBox`, and the data is loaded asynchronously using `d3.csv`. The chart applies an ordinal color scale and renders text labels positioned via arc centroids.

TTarun Kumar Bosupally

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

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

77% match