Skip to main content
SimilarExport ZIP
100%

Pie Chart Visualization

✓ Published0🌍 Public
JJames Cruz
Last edited Apr 26, 2024
Created on Apr 26, 2024
Forked from HTML Starter

This pie chart visualizes the distribution of accident severity categories—Fatal (20), Serious (50), and Slight (30)—using a simple three-slice SVG. The code uses d3.pie() to compute arc angles from the data, d3.arc() to generate path geometries, and d3.schemeCategory10 for slice colors. Labels are placed using arc.centroid, with each slice having a clickable cursor style. The chart renders in a React-friendly static HTML page with D3 v7 loaded directly from the CDN.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie Chart

This pie chart shows the number of accidents in each state in 2023, with each slice labeled by its value in thousands and a legend mapping colors to states. The visualization uses D3 v5’s `pie` and `arc` generators to compute slice angles and paths, rendered as SVG elements. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and `scaleOrdinal` assigns colors to states. Slice labels are positioned using `arc.centroid`, while the legend and axis titles are added as HTML divisions.

SSatish Nallamadugu
81% match
Loading thumbnail…

Fork of pie chart

This D3.js example visualizes traffic accident distribution by weather condition as an interactive pie chart. It loads CSV data from a GitHub gist, aggregates accident counts per weather category using `d3.rollups`, and renders SVG pie slices with labels and a legend. The chart uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with `schemeCategory10`, and a reusable `pieChart` function pattern with configurable width, height, and data properties. The visualization displays weather types directly on slices and provides a side legend with count values.

Ppragnyalipsa96@gmail.com
81% match
Loading thumbnail…

Pie chart

A pie chart displays the distribution of CSS named colors, with each slice colored according to its corresponding hex value. The visualization loads a CSV dataset using `d3.csv` and computes the pie layout with `d3.pie`, assigning each record an equal value. React renders the resulting arcs as SVG paths using `d3.arc`, positioned at the center of a 960×500 viewport. The chart uses D3 v5 and React 16.9, with all slices sharing a common radius and no inner gap.

NNikithakatta30
80% match
Loading thumbnail…

Pie Chart

A pie chart displays five categorical values as proportional, colored arcs with hover highlighting and percentage labels. The chart uses d3.layout.pie to compute arc angles and d3.svg.arc to generate SVG paths, with an ordinal color scale for fills. Hovering translates the arc group outward via a transition, while labels rotate to align with each segment’s midpoint. The visualization is built with d3.v3 and renders entirely in SVG.

11Cr18Ni9
80% match
Loading thumbnail…

Pie chart

This visualization is a pie chart that displays the distribution of CSS color names, with each slice colored according to its corresponding RGB hex value from the source data. The chart is rendered as an SVG within a React application, using D3.js v5 for data loading and pie chart geometry. The code fetches color data from a GitHub-hosted CSV file via `d3.csv`, computes the pie slices with `d3.pie`, and draws them using `d3.arc` with an outer radius of half the chart height. Each slice is a `<path>` element filled with the exact hex color it represents.

NNikithakatta30
80% match
Loading thumbnail…

Pie Chart

This pie chart displays categorical data loaded from a CSV file, with slices colored by category and labeled directly on the chart. It uses D3.js APIs such as `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to generate and color the SVG paths. Text labels are positioned using `arc.centroid`, and a legend is built with appended rectangles and text elements. The SVG is centered via a transform, and the chart dimensions are fixed at 500 by 500 pixels.

Rrajeswariamruthabommaraju@my.unt.edu
79% match
Loading thumbnail…

Pie chart in React & D3 - donations data

This example shows a donut chart of donation distribution across five categories—Health, Support, Education, Poverty reduction, and Other—with each slice labeled by its percentage. The visualization is built with React functional components and D3 v6, using `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG path geometry. Slice colors derive from a categorical interpolation via `d3.interpolateRgb`, linking the data’s category order to a warm-to-cool gradient. The chart renders as SVG, with the React state and component structure managing the mapping from data to visual elements.

BbeauMarko
79% match
Loading thumbnail…

myViz

This pie chart displays the distribution of accidents by type, with each slice labeled directly on the visualization. The code loads CSV data from a GitHub gist, uses `d3.rollup` to count accidents per category, and `d3.pie()` to generate the arc layout. Slices are rendered as SVG paths via `d3.arc()`, colored with `d3.scaleOrdinal` and `d3.schemeCategory10`, while labels are positioned using `arc.centroid()`. The chart is built with D3 v6 and rendered entirely in SVG.

Vveeramallivaishnavi3@gmail.com
79% match