Skip to main content
100%

Donut scale

✓ Published0🌍 Public
AAbin
Last edited Mar 20, 2017
Created on Mar 16, 2017

This donut chart displays yearly counts for a single country from 2004 to 2017, using a ring of colored arcs sized by count. Each slice corresponds to a year, with a legend of colored rectangles that can be clicked to toggle individual years on or off, recalculating the pie layout and animating transitions. Hovering over a slice reveals a tooltip with the year, count, and percentage of the enabled total. The visualization is built with d3.v4, using d3.pie, d3.arc, d3.scaleBand for the legend, and d3.scaleOrdinal with the schemeCategory20b color palette, rendered as SVG with transition animations.

AI-generated description

Similar vizzes

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
83% 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
82% match
Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
82% 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
82% match
Loading thumbnail…

Reusable Donut Chart in D3 v4

A reusable donut chart for D3 v4 displays the distribution of inspection outcomes across six categories, with percentage labels connected to each slice. The code uses `d3.pie` to compute slice angles, `d3.arc` for the donut geometry, and `d3.scaleOrdinal` with `schemeCategory20` for coloring. Hovering over a slice or label triggers a custom tooltip rendered as an SVG circle, while `d3.format` handles numeric and percentage formatting. The chart is built from a TSV dataset and styled with CSS drop shadows and label lines.

Aabrown004
81% match
Loading thumbnail…

Donut Chart

This donut chart displays the population distribution across seven age groups, from under 5 to 65 and older, using a ring of color-coded arcs. The chart is built with D3 v3, loading data from a CSV file via `d3.csv` and rendering SVG paths. It uses `d3.scale.ordinal` for color encoding, `d3.layout.pie` to compute arc angles from the population values, and `d3.svg.arc` to define the ring geometry with an inner and outer radius. Each segment includes a label positioned at the arc’s centroid.

Mmbostock
81% match
Loading thumbnail…

Fork of Pie chart

This fork of a D3 pie chart visualizes the top 10 countries in the world for 2022, using an interactive, animated donut chart rendered as SVG. The chart segments expand on mouse hover and, upon clicking, drill down to reveal a nested second-level breakdown based on additional data attributes. Built with D3 v2 and jQuery, the visualization uses `d3.layout.pie`, `d3.svg.arc` with inner and outer radii, and `transition.attrTween` for smooth entry animations, while handling color assignments via a categorical ordinal scale.

MMalempatiSaranya
80% 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
80% match