Untitled

100%

✓ Published0🌍 Public

Last edited Nov 12, 2020

Created on Nov 12, 2020

A donut chart displays the distribution of Dutch parking area start years, sourced from RDW open data. The visualization updates with randomized values on button click, animating arc paths, labels, and connecting polylines using `d3.layout.pie`, `d3.svg.arc`, and `attrTween` interpolations. Color encoding uses an ordinal scale, with SVG rendering and smooth transitions in D3 v3.

AI-generated description

Thanks to https://www.youtube.com/watch?v=lnXf1mpFGb8&t=50s&ab_channel=FrontendTips

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie chart RDW Final 2 datasets

This example presents a donut pie chart displaying parking data from two Dutch RDW datasets, showing the distribution of years extracted from start and end area values. The visualization includes interactive hover effects and click events on arc segments. Built with D3.js v6, the code uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the SVG chart, with buttons to switch between datasets. Data is loaded asynchronously from the RDW Open Data API via fetch and processed through custom filtering functions that slice four-digit year values from the selected columns.

SSergio Eijben

82% match

Loading thumbnail…

Untitled

A donut chart displays the distribution of a small dataset with categories a through e, each rendered as a colored arc segment. The visualization uses D3's `pie` function to compute angular values from object entries, with `arc` paths using inner and outer radii. Label lines and text annotations are positioned via `arc.centroid` calculations and polar-coordinate adjustments. The SVG output is generated through a React rendering pipeline, using `scaleOrdinal` for categorical color mapping and `join` for declarative element creation.

Ssubratanp

81% match

Loading thumbnail…

Untitled

A donut chart displays five values as colored arcs with labels positioned outside the chart. Each label is connected to its corresponding arc by a thin pointer line ending in a small circular marker. The visualization uses d3.pie to compute arc angles and d3.arc for the donut shape, while d3.scaleOrdinal with interpolateHslLong assigns colors. Labels and pointer paths are positioned manually using trigonometry, and SVG markers define the pointer endpoints.

PPiotr Paszek

81% match

Loading thumbnail…

Untitled

A donut chart displays three categorical values—Country, City, and Continent—with proportional arcs colored via a categorical scale. A legend aligns beneath the chart, using text labels and colored rectangles. The code builds the visualization with d3.pie and d3.arc, and positions legend items by measuring each group’s bounding box width. The chart is rendered as SVG on an HTML page using React-style class syntax, with margins and a fixed outer size.

AAndrea Mignone

80% match

Loading thumbnail…

Fork of Pie chart RDW - Sergio

This visualization shows how many Park & Ride locations were created per year in the Netherlands, using data from the RDW Open Data API. A donut chart displays each year as a segment, with year labels placed at the outer edge and hover interactions intended to reveal exact counts (though the mouseover functions are defined but not yet attached). The code uses d3.pie, d3.arc, and d3.scaleOrdinal with the category10 scheme, fetching data via the Fetch API and rendering as SVG with transitions prepared for hover effects.

VVeerle

80% match

Loading thumbnail…

Untitled

This example shows a donut chart that visualizes a small dataset of five categorical values, with each slice colored distinctly and separated by black strokes. The chart uses D3.js version 6, where `d3.pie()` computes the arc angles from the data and `d3.arc()` generates the SVG path geometries with an inner radius creating the donut hole. A color scale via `d3.scaleOrdinal()` maps each category to a unique color, while the SVG rendering is sized and centered within a fixed 450×450 viewport. The slices are semi-transparent and rendered as SVG path elements appended to a grouped container.

Nnicolekevans

79% match

Loading thumbnail…

Untitled

This example shows a donut chart with labels connected by polylines, using dummy data with eight categories where three have value one and five have value nine. The chart uses d3.pie and d3.arc to generate slices with a donut hole, while d3.scaleOrdinal and d3.schemeDark2 assign colors. Labels are positioned outside the chart using outerArc centroids, with text-anchor adjusted based on the slice angle for left or right alignment. The SVG rendering includes semi-transparent fills and white stroke separations.

SSampras Dsouza

79% match

Loading thumbnail…

Untitled

A donut chart displays a value range between two labeled extremes, with a yellow arc on the right and an orange arc on the left, separated by horizontal lines. The chart animates by repeatedly expanding the yellow arc’s end angle using `d3.interval` and `transition.attrTween` with an arc interpolator. The visualization is built with D3 v4, rendering SVG paths generated by `d3.arc`. Static text labels and connector lines annotate the chart, while the animation runs continuously in a loop.

Bbharatbobby

79% match