Fork of Fork of Making an Interactive Pie Chart

100%

Fork of Fork of Making an Interactive Pie Chart

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

Forked from Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes mortality rates across ten countries, with each slice's arc length proportional to the death count from a CSV file. The chart displays country labels and uses a categorical color scale from `d3-scale-chromatic`. On hover, a tooltip appears showing the percentage of total deaths, calculated from the data. The visualization is built with D3.js using `select`, `pie`, `arc`, and `sum` from the D3 module, rendering as an SVG with custom styling for hover effects.

AI-generated description

MIT Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

Fork of Fork of Fork of ICE 7 Pie Chart

The visualization shows the top five countries by reported deaths in 2020 as a donut-style pie chart with a color-coded legend listing each country and its corresponding death count. Data is loaded from a CSV file via `d3.csv`, then processed with `d3.pie` and rendered as SVG paths using `d3.arc`, while `d3.scaleOrdinal` assigns the section colors. The chart also draws a legend group with rectangles and text, and uses `d3.format` to display concise numeric values. The SVG canvas is 900×250 pixels, with the pie centered at (250,250) and the legend placed to the right.

PPrathyusha0304

87% match

Loading thumbnail…

Fork of Fork of Fork of ICE - 7 Pie Chart

A pie chart visualizes the top 10 countries by COVID-19 deaths in 2020, with each slice labeled with the death count in thousands. The chart uses `d3.pie` to compute arc angles and `d3.arc` for path generation, colored via `scaleOrdinal`. A legend on the right lists countries with corresponding color swatches and death values. Data is fetched as CSV from a GitHub gist, and the SVG is rendered with D3 v5, using `select` and `append` for elements and `format` for tick labels.

NNaimisha-M

86% match

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart

This example visualizes the top 10 countries by COVID-19 deaths in 2020 using a pie chart rendered as SVG. Each slice is labeled with its death count in thousands, and a legend on the right pairs country names with their corresponding values and color swatches. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate the sectors, `d3.scaleOrdinal` for color mapping, and `d3.csv` to load the data from a GitHub gist. The visualization highlights relative mortality contributions across countries with a clean, annotated layout.

NNaimisha-M

86% match

Loading thumbnail…

Fork of Pie chart Visualization

This example displays a pie chart showing the top 10 countries by deaths from air pollution in 2020. Each slice is labeled with the death count in thousands, and a legend lists the countries alongside their corresponding values. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute the arc paths and assign colors, while rendering the chart as SVG. Data is loaded asynchronously via `d3.csv` from a remote gist URL.

DDanthalakirankumar

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

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

85% match