Skip to main content
SimilarExport ZIP
100%

ICE - 7 Pie Chart

✓ Published1🌍 Public
Aachalasam
Last edited Jul 4, 2022
Created on Jul 3, 2022
Forked from HTML Starter

This pie chart displays the top 10 countries by COVID-19 deaths, with each slice labeled with the death count in thousands and accompanied by a legend listing country names and values. The visualization uses D3 v5 (including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`) to compute arcs and colors, rendering SVG elements dynamically. Data is loaded from a CSV via `d3.csv` and sorted before selecting the first ten rows, all within a React-compatible setup.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart visualizes the top 10 countries by COVID-19 deaths, with each slice’s area proportional to the total fatalities and labeled with values in thousands. A legend on the right pairs each country with its corresponding color and death count. Built with D3.js v5, the example uses `d3.pie` to compute arc angles, `d3.arc` to generate SVG paths, and `d3.scaleOrdinal` for slice colors. Data is loaded asynchronously from a CSV via `d3.csv` and sorted before rendering.

Ttejasviprasad06@gmail.com
97% match
Loading thumbnail…

ICE - 7 Pie Chart

This example presents a pie chart visualizing COVID-19 death counts for the top 10 countries, with each slice labeled in thousands and accompanied by a legend listing countries and their corresponding values. The chart reads data from a CSV file hosted on GitHub, processed using `d3.csv`, and renders with SVG via `d3.pie()` and `d3.arc()`. Slices are colored using `d3.scaleOrdinal` with a fixed palette, and labels are positioned using arc centroids. The visualization is built with D3 v5 within a React framework.

Nnehabaddam
96% match
Loading thumbnail…

ICE7 Pie Chart - 2nd

This pie chart visualizes the top 10 countries by total COVID-19 deaths, using a categorical color scale. The chart displays each country’s death count as a slice, with labels directly positioned at the slice centroids and a legend mapping colors to country names. Built with D3 v7, it loads data from a CSV file, sorts it in descending order, and slices the top 10 entries. The SVG rendering uses `d3.pie` and `d3.arc` to generate the chart, while `d3.scaleOrdinal` with `schemeCategory10` assigns colors.

MM Hema
94% match
Loading thumbnail…

ICE-7 Pie Chart

This pie chart displays the top 10 countries with the most COVID-19 deaths, with each slice’s color mapped from a categorical scale and labeled in a legend showing country names and death totals in thousands. The visualization loads CSV data from a GitHub gist using d3.csv, then uses d3.pie and d3.arc to generate SVG path segments. d3.scaleOrdinal assigns a fixed color palette, while the legend is built manually with appended SVG rect and text elements. The chart is rendered entirely with d3.v5 and SVG.

Jjayanthamol99
94% match
Loading thumbnail…

ICE - 7 Pie Chart

This visualization presents a pie chart of COVID-19 death counts by country, with each slice labeled with the death total in thousands and a corresponding legend listing country names and values. The chart uses d3.pie to compute slice angles, d3.arc to generate SVG path segments, and a d3.scaleOrdinal with a custom color array to fill each slice. Data is loaded asynchronously from a remote CSV via d3.csv, and the SVG rendering is handled entirely through D3 v5 selections and path elements.

SSnarasimhap
94% match
Loading thumbnail…

ICE 7 Pie Chart- bhargava

This example visualizes the top 10 countries with the highest COVID-19 death cases as a pie chart, using data from a GitHub Gist. The chart displays each country’s death count as a colored slice with a label in thousands, alongside a legend showing the country names and corresponding values. Built with React and D3 v5, the code uses `d3.pie` and `d3.arc` to generate the chart, `d3.scaleOrdinal` for coloring, and `d3.format` for tick labels. The SVG rendering includes text overlays and an interactive legend, all styled with CSS.

Bbhargavarathod
93% match
Loading thumbnail…

ICE - 7 Pie Chart

A pie chart visualizes the top 10 countries by reported COVID-19 cases, with each slice colored and labeled via an adjacent legend. The chart uses D3 v5 to load CSV data, compute arc paths with `d3.arc()`, and render SVG elements. Colors are assigned through `d3.scaleOrdinal`, while numeric values are formatted with `d3.format`. The legend pairs colored rectangles with country names and abbreviated case counts, all positioned within an SVG canvas.

RRohithReddy-thoughts
92% match
Loading thumbnail…

Fork of ICE-7 Pie Chart

This pie chart displays the top 10 countries with the most COVID-19 deaths, using a legend to identify each country and its corresponding death count in thousands. The visualization loads CSV data from a GitHub gist via `d3.csv`, then builds the chart with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color encoding. SVG elements are rendered dynamically, with the chart centered on a 960x500 canvas and legends placed to the right. The code uses D3 v5 and imports specific modules from the library.

Aajaysonu
92% match