ICE-7 PIE CHART

100%

ICE-7 PIE CHART - Manasa

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

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.

AI-generated description

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

Similar vizzes

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

92% match

Loading thumbnail…

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

91% match

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

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

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

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

86% match

Loading thumbnail…

ICE-7 Pie_Chart (Dhanusree Kodali)

This pie chart displays the number of COVID-19 deaths in Asian countries, using raw values for eleven nations with India and Indonesia prominently highlighted. Each slice is rendered as an SVG path via d3.pie and d3.arc, with color from d3.scaleOrdinal and d3.schemeCategory20. Hovering triggers mouseover and mousemove events that adjust slice opacity and append a tooltip group with white background text.

DDhanusree Kodali

86% match

Loading thumbnail…

ICE7-2VarshaG

This visualization displays US mortality rates across states using a pie chart, with each slice sized by the number of deaths and labeled with the state name. The chart is rendered as SVG elements using D3 v5, employing the `pie` and `arc` generators to compute slice geometry, while `scaleOrdinal` maps death counts to a fixed set of colors. A legend on the right lists each state with its corresponding color and formatted death count. Data is loaded asynchronously from a CSV file fetched from a GitHub Gist using D3’s `csv` method.

VVReddy913

86% match