Fork of Pie Chart (with labels) with d3

100%

Fork of Pie Chart (with labels) with d3

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

Forked from Pie Chart (with labels) with d3

This interactive donut chart visualizes COVID-19 deaths in US states using React and D3 v4. The pie chart displays state names and death counts with hover tooltips and opacity changes for emphasis. The code loads CSV data from a GitHub gist, parses it with the `csv` function, and renders SVG arcs using `d3.arc` and `d3.pie` within a React component. A legend accompanies the chart, and mouse events trigger tooltip positioning and visual feedback.

AI-generated description

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

85% match

Loading thumbnail…

Fork of Pie Chart

A forked pie chart visualizes the distribution of new COVID-19 tests across geographic locations, using a D3 v5 pie layout with an SVG rendering. The chart shows the top 10 locations by test count, with each slice’s fill color and legend labels derived from the `d3.scaleOrdinal` and `d3.schemeCategory10` palette. Data is loaded from a CSV via `d3.csv`, sorted descending, and rendered with `d3.pie` and `d3.arc`; hover events log values to the console, and legends display each location’s name and test total. The React-based example is presented in an HTML page with custom CSS styling.

Ppemmasaniprudhvinadh

85% match

Loading thumbnail…

Fork of Pie Chart

This example visualizes mortality rates across U.S. states as an annotated pie chart, with each slice labeled and accompanied by a legend showing state names and death counts. The visualization uses D3 v5 (d3.pie, d3.arc, d3.scaleOrdinal) to generate SVG paths and text elements, pulling data from a remote CSV file. It applies a custom color scale to distinguish slices and renders the chart centered on an SVG canvas with a static legend to the right.

RRahulSai05

85% match

Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes mortality rates across ten countries, with each slice's arc length proportional to the death count from a CSV file. The chart displays country labels and uses a categorical color scale from `d3-scale-chromatic`. On hover, a tooltip appears showing the percentage of total deaths, calculated from the data. The visualization is built with D3.js using `select`, `pie`, `arc`, and `sum` from the D3 module, rendering as an SVG with custom styling for hover effects.

Aamiralitah

84% match

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

84% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays COVID-19 death counts for the first 20 states from a CSV dataset, rendered as SVG rectangles using React and D3. The code uses `d3.csv` to load data, `scaleBand` for the y-axis state categories, and `scaleLinear` for the death-count x-axis. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, with tick marks and labels generated via the scales’ `.ticks()` and `.domain()` methods.

DDaniel Mata

83% match

Loading thumbnail…

Pie Chart

This pie chart displays COVID death rates per million for the top 20 states, using colored slices with labels and a corresponding legend that lists each state and its numerical value. The visualization is built with D3 v5, fetching data from a CSV via `d3.csv`, transforming it with `pie()` and rendering SVG paths using `arc()` and `arcGenerator.centroid`. Slice colors are assigned using `scaleOrdinal`, and the chart is presented on an SVG canvas with a fixed width and height.

RRohith Reddy

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

83% match