Skip to main content
SimilarExport ZIP
100%

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

✓ Published0🌍 Public
Aalisaipsoc
Last edited Nov 28, 2022
Created on Nov 28, 2022
Forked from HTML Starter

This example presents a pie chart of the top 10 countries with the highest air pollution-related deaths in 2020, using data from a CSV hosted in a GitHub gist. The visualization uses D3 v5 to parse the data with `d3.csv`, compute the pie layout with `d3.pie()`, and render SVG paths via `d3.arc()`. A `scaleOrdinal` maps categorical colors to each slice, while `d3.format` abbreviates death counts (e.g., "4.5K") for labels and a legend. The SVG is selected and manipulated directly within a React framework, with styling applied via CSS.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This example visualizes the top 10 countries with the highest number of deaths in 2020 attributed to air pollution. A pie chart displays each country's death count as a colored segment, accompanied by a legend pairing each color with a country name and its corresponding value. The visualization uses D3 v5's `pie`, `arc`, and `scaleOrdinal` APIs to generate and style the SVG paths, with data loaded asynchronously from a CSV file via `d3.csv`. The chart and legend are rendered inside a single SVG element using D3 selections.

AAISWARYAMARAPATLA1999
95% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This example displays a pie chart of the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its value in thousands and accompanied by a legend. It loads CSV data via `d3.csv` from a GitHub gist and renders an SVG using D3 v5’s `pie` and `arc` generators. The chart uses `d3.scaleOrdinal` to assign colors, `d3.format` for tick labels, and appends textual labels positioned via `arc.centroid`. The legend includes colored rectangles and text annotations, all drawn with SVG elements.

BBajiSharifPatan@my.unt.edu
95% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart displays the top 10 countries by air pollution deaths in 2020, using a dataset fetched from a GitHub-hosted CSV. Each slice represents a country’s death count, with a legend pairing country names and formatted values. The visualization is built with D3 v5, using `d3.pie()` to compute arc segments, `d3.arc()` for rendering SVG paths, and `d3.scaleOrdinal` for color assignment. Legends are appended as grouped SVG elements, with text formatted via `d3.format`. Data is loaded asynchronously with the `csv` function from D3’s fetch API.

0057SatvikDamera
95% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization presents a pie chart ranking the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its death count in thousands and accompanied by a color-coded legend listing countries and values. The chart uses D3 v5’s `pie()` and `arc()` generators to compute slice angles and SVG paths, with `scaleOrdinal` mapping a fixed color array to each data point. Data is fetched asynchronously via `d3.csv` from a gist URL, and all text and shapes render as SVG elements within a 960×500 canvas.

AArefa Patwary
95% match
Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This example visualizes the top 10 countries by deaths from air pollution in 2020 as a pie chart. Each slice is labeled with the death count in thousands, and a legend lists each country with its corresponding value and color. The code loads CSV data from a GitHub gist using `d3.csv`, then computes pie angles with `d3.pie()` and draws SVG paths using `d3.arc()`. Colors are assigned via `d3.scaleOrdinal()`, and text labels are positioned using `arc.centroid()`.

Ggayathri
95% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, using a dataset fetched from a GitHub gist. Each slice represents a country’s death count, with labels showing values in thousands and a legend listing country names and corresponding figures. The visualization uses d3.pie and d3.arc to generate the chart, with d3.scaleOrdinal assigning colors, d3.csv loading the data, and d3.format for tick labels. The SVG is rendered with appended `path` and `text` elements, while the legend is built from rectangles and texts.

AArefa Patwary
94% match
Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This visualization presents a pie chart of the top 10 countries by air pollution-related deaths in 2020, with each slice labeled in thousands and a corresponding legend listing country names and values. It uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` to generate the chart, while `d3.csv` fetches data from a GitHub gist. Text labels are positioned via `arc.centroid`, and the SVG rendering includes custom styling for the title and legend.

JJyothicherukuri
94% match
Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart visualizes the top 10 countries by deaths from air pollution in 2020, using colored segments with labels showing death counts in thousands, plus a legend listing country names and values. The example loads CSV data from a GitHub gist via `d3.csv`, calculates the pie layout with `d3.pie()`, and draws the chart using `d3.arc()` on an SVG canvas. Colors are assigned via `d3.scaleOrdinal()` with an explicit array, and all styling is applied through D3 selections and inline attributes.

Ppravallikayaram12
94% match