Skip to main content
SimilarExport ZIP
100%

Assignmnet 7 Pie Chart

✓ Published0🌍 Public
AAshrith Kudidhi
Last edited Jul 2, 2022
Created on Jul 2, 2022
Forked from Hello VizHub

This pie chart visualizes the proportion of COVID-19 cases across the top five nations, with each slice labeled with its percentage and a color-coded legend listing country names and values. It loads CSV data from a GitHub gist and renders the chart using D3 v5’s pie and arc generators, with a scaleOrdinal for slice colors. Text labels are positioned via arc.centroid, and the legend is assembled manually with rect and text elements. The SVG is selected and sized from the HTML attributes, and data processing occurs asynchronously with async/await.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE - 7 Pie chart viz

This pie chart visualizes the percentage distribution of COVID-19 cases among the top five countries, with each slice labeled and a corresponding legend. Built with D3 v5, the example uses the `pie` layout function to compute arc segments and the `arc` generator to create the SVG paths. Data is loaded from a CSV file via the `csv` method in `getData.js` and `index.js`, with each country's percentage represented by a distinct color from a manual palette. The chart includes an interactive legend that pairs colored rectangles with country names and values.

AArruSkywalker
88% match
Loading thumbnail…

ICE7 Pie Chart

This pie chart displays the top 25 countries with confirmed COVID-19 cases, using a categorical color scale to distinguish each nation. The visualization is rendered as an SVG with a legend listing country names and case counts in thousands. Built with D3 v5, the code uses `d3.pie` and `d3.arc` to generate segments, `d3.scaleOrdinal` for colors, and `d3.csv` to load data from a GitHub gist.

Ddheeraj1509
86% match
Loading thumbnail…

ICE7-Pie Chart 11540905

A pie chart displays Covid case totals for nine countries, with each slice labeled by its case count and a color-coded legend listing country names and values. The visualization uses D3 v5 to load CSV data from a GitHub gist, compute pie arc angles with `pie()`, and render SVG `path` and `text` elements via `arc()`. Colors are assigned with `scaleOrdinal()`, while D3’s `format()` handles numeric labels. The chart is centered in an SVG container, with legends positioned to the right.

Nnagasai-gummadi
86% match
Loading thumbnail…

Pie Chart (ICE 7)

This example displays a pie chart of the top 10 countries with the most COVID-19 cases, using data loaded from a CSV file via d3.csv. The chart is rendered as SVG paths, with each segment sized by the "Total Cases" value and filled using a d3.scaleOrdinal color scale. A legend on the right pairs each country with its total, formatted in thousands (e.g., "1.234K"). The code uses d3.pie, d3.arc, and d3.select to build and position the chart.

AAashish Pandey
85% match
Loading thumbnail…

ICE - 7 Pie chart

This example visualizes the top 10 countries by COVID-19 cases as a pie chart, with each slice labeled with its percentage share. The chart is rendered as an SVG element using D3 version 5, with data fetched from a CSV file hosted on GitHub. The code employs D3’s `pie`, `arc`, and `scaleOrdinal` APIs to compute the pie segments, generate paths, and assign colors from a hardcoded palette. A legend on the right maps each country’s name to its corresponding slice and percentage value.

RRajeevMukhesh
85% 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
85% match
Loading thumbnail…

ICE-7 Pie Chart

This example displays a pie chart of COVID-19 active cases by country, rendering each segment with a distinct color and labeling its percentage share. The chart includes a legend that maps colors to country names and active case counts. Built with React and D3 v5, the visualization uses d3.pie, d3.arc, and d3.scaleOrdinal to generate SVG paths and text labels. Data is loaded asynchronously from a CSV file using d3.csv, with the chart centered in an 800x450 SVG canvas.

Mmanojgne
85% match
Loading thumbnail…

ICE - 7 Pie chart viz

This pie chart visualizes the percentage distribution of the top five countries with the most coronavirus cases. The data is loaded from a CSV file hosted on GitHub Gist. Built with D3.js v5, the visualization uses `d3.pie` to compute arc segments, `d3.arc` to generate the sector paths, and `d3.scaleOrdinal` for color mapping. Each sector is labeled with its percentage, and a legend displays the country names and corresponding values. The SVG canvas is 960 by 460 pixels, with the chart centered and styled via external CSS.

SSravan1888
84% match