ICE-7 PIE CHART

100%

ICE-7 PIE CHART

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

This interactive donut chart visualizes the distribution of COVID-19 deaths across several US states, with each state's value represented as a proportion of the whole. Built with React and D3 v4, it renders SVG paths using `d3.arc` and `d3.pie` to create the ring, while a hover interaction, implemented with `d3.select` and mouse events, highlights a slice and displays a tooltip with the state name and value. A separate legend built from the same data array lists each category, using `d3.scaleOrdinal` with `d3.schemeCategory10` to assign colors consistently.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE-7 PIE CHART

This example visualizes COVID death percentages across U.S. states using an interactive pie chart built with D3 v4 in a React framework. The chart displays seven state values as colored wedges, with a custom tooltip that appears on mouseover showing the state name and its corresponding percentage, while the SVG-rendered arcs respond to hover by adjusting opacity. The code implements hover and touch interactions using D3 event handlers, and includes a legend generated from the same data array.

SSaiSree0122

94% match

Loading thumbnail…

ICE-7-2 PIE CHART

This pie chart visualizes COVID-19 death statistics across seven U.S. states, with each slice labeled by state name and value. The chart uses D3.js v4’s `d3.pie` and `d3.arc` to generate SVG paths, with categorical colors via `d3.scaleOrdinal`. Hovering over a slice reduces the opacity of other slices and displays a tooltip showing the state and its corresponding death count. The visualization includes an interactive legend and is rendered entirely in SVG, with styling applied through CSS classes.

HHARSHA BUDDANA

93% match

Loading thumbnail…

ICE - 7 Pie Chart

This example visualizes the distribution of COVID-19 deaths across U.S. states as a pie chart, with each slice colored and paired with a legend showing the state name and its corresponding percentage of total deaths. The data is loaded from a CSV file hosted on GitHub, parsed with `d3.csv`, and the chart is rendered as SVG using D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions. The legend, built with appended SVG groups and rectangles, includes formatted percentage values using `d3.format`.

SSaiSree0122

92% match

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart visualizes COVID-19 death percentages across U.S. states, with each slice colored by a categorical scale and labeled through a legend with state names and values. The chart uses d3.pie and d3.arc to generate SVG paths from a CSV dataset, while d3.scaleOrdinal assigns section colors. The legend, rendered with SVG rectangles and text, displays state names and percentage values formatted with d3.format. The code fetches data via a Gist URL using d3.csv and renders all elements synchronously in an SVG container.

SSaiSree0122

91% match

Loading thumbnail…

ICE-7 PIE CHART - Manasa

This pie chart visualizes COVID death statistics across seven US states, with each slice’s size proportional to the reported death value. The chart uses SVG rendering with D3 v4, employing `d3.pie()` and `d3.arc()` to generate the geometric paths, while `d3.scaleOrdinal` assigns categorical colors. Hovering over a slice triggers interactive mouseover events that display a tooltip with the state name and value, and adjusts slice opacity to highlight the selected segment.

MManasa891-git

91% match

Loading thumbnail…

ICE-7 Pie Chart

A pie chart visualizes the distribution of total COVID-19 cases across the top twelve U.S. states, sorted from highest to lowest. Each slice’s size and color correspond to a state’s case count, with an interactive tooltip logging the value on mouseover. The chart uses D3’s `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` APIs to generate SVG paths and a legend. Data is loaded asynchronously from a CSV file via D3’s `csv` function, then rendered with custom SVG elements for state labels and case totals.

Ggayuvurukuti@gmail.com

87% match

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart

A pie chart visualizes COVID-19 death percentages across Indian states, with each slice labeled by state and its corresponding share of total deaths. The chart uses d3.pie and d3.arc to generate the circular segments and d3.scaleOrdinal to map death values to a fixed color palette. A legend, built with SVG rectangles and text elements, lists each state alongside its formatted percentage. Data is loaded as CSV via d3.csv from a GitHub gist, and the visualization renders with SVG in a 1000x500 viewport.

SSaiSree0122

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

86% match