Skip to main content
SimilarExport ZIP
100%

ICE-7 PIE CHART

✓ Published2🌍 Public
SSaiSree0122
Last edited Jul 3, 2022
Created on Jul 2, 2022
Forked from HTML Starter

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.

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 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.

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
93% 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
92% 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…

ICE-7 Pie chart

This example shows a pie chart of student marks, mapping country names to color-coded slices based on their associated death counts. The visualization uses React state to asynchronously load CSV data via `d3.csv`, then generates the pie layout with `d3.pie()` and renders each slice as an SVG path using `d3.arc()`. A `scaleOrdinal` assigns colors, and a separate legend lists the countries with matching color swatches. Charts are centered with a fixed 600x400 viewport, styled with white strokes between segments.

Cchalasanigayaetiri@gmail.com
87% 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