DONUT CHART

100%

✓ Published0🌍 Public

Last edited Apr 25, 2024

Created on Apr 25, 2024

This donut chart visualizes the distribution of orders by state, offering interactive tooltips for state-specific counts and a color-coded legend. It loads data from a remote CSV file, grouping rows by state using d3.rollup. The visualization uses d3.pie and d3.arc to generate SVG path slices, with mouseover and mouseout events to control an HTML tooltip. A d3.scaleOrdinal with the schemeCategory10 palette assigns colors, while d3.csv with d3.autoType handles data parsing, and the legend is constructed with SVG rect and text elements.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

ghantt chart

This donut chart visualizes the distribution of orders by state, using a pie chart where each slice represents a state's count. The chart is rendered with SVG and uses D3’s `pie` and `arc` functions to create the donut shape. Interactive tooltips appear on mouseover, displaying the state name and count. A legend on the right maps colors to states. Data is loaded from a remote CSV file via `d3.csv` and grouped using `d3.rollup`.

Ssannihitha.k23@gmail.com

89% match

Loading thumbnail…

Donut Multiples

Donut multiples display age-group population proportions for each U.S. state as small pie charts, with a legend mapping seven age brackets to distinct colors. The charts are generated from a CSV file parsed via d3.csv, with d3.scale.ordinal assigning colors, d3.layout.pie computing arc angles, and d3.svg.arc rendering the donut segments as SVG paths. Each state’s label appears centered within its donut, highlighting proportional differences across regions.

Mmbostock

81% match

Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07

80% match

Loading thumbnail…

Donut Chart v2

A donut chart displays country-level aggregated values, ranking the United States highest, followed by the United Kingdom and Germany, with each slice labeled and connected via polylines. Built with D3 v4 and SVG, it uses `d3.pie()` for slice generation, `d3.arc()` for inner and outer radii, and `d3.scaleOrdinal()` for colors. Data is loaded from `data.json` via `d3.json()`, and labels are positioned dynamically based on slice angles.

MMaeva B

79% match

Loading thumbnail…

Donut Chart

This donut chart displays five equal segments, each representing a donut count of 1000 from the Data.json file. The circular visualization uses a ring geometry with an inner radius of 140 and outer radius of 185, with segments colored green, blue, yellow, red, and teal. The visualization is built using D3 version 5, leveraging the `pie` API to compute arc segments and the `arc` API to generate the SVG paths. A `scaleOrdinal` color scale maps the data values to the custom color palette. The chart reads its data asynchronously from a JSON file and renders within an SVG element on an HTML page.

Xxyzcorrupt@gmail.com

78% match

Loading thumbnail…

Fork of Donut Chart v2 - Le bon qui fonctionne

This example shows the distribution of language popularity as a donut chart, aggregating the six largest categories into labeled slices and grouping all remaining categories into a single "others" slice. It uses d3.pie and d3.arc to generate the SVG paths, with an ordinal color scale from d3-scale-chromatic (schemeDark2) for slice fills. Labels and connecting polylines are positioned using outerArc.centroid and conditional text-anchor logic based on mid-angle, with data loaded from data.json via d3.json.

SSuzie1022susu

78% match

Loading thumbnail…

Untitled

A matrix of donut charts displays the population distribution across age groups for each U.S. state, with each donut's area scaled proportionally to the state's total population. The visualization uses a `d3.scaleSqrt` for radius and `d3.pie` with `padAngle` to generate the arcs. The code leverages `selection.each` to create a context where parent and child data—state totals and individual age-group values—are accessible simultaneously within each SVG rendering. Data is loaded via `d3.csv` from a local CSV file, and `d3.arc` handles the arc paths.

Ssowbalas

78% match

Loading thumbnail…

Fork of Donut Chart v2

This donut chart displays proportional data from a JSON file (data.json) with country names and numeric sums, rendered as an SVG using D3.js v4. The visualization uses a pie layout with a half-radius inner hole and divergent color scheme from d3-scale-chromatic. Labels are positioned outside the arcs using polyline connectors and text elements, with the arc generator determining slice geometry and outerArc handling label placement. The example demonstrates D3’s modular approach to building interactive, data-driven graphics.

MMaeva B

77% match