Pie chart RDW Final 2 datasets

100%

Pie chart RDW Final 2 datasets

✓ Published0🌍 Public

Last edited Nov 12, 2020

Created on Nov 12, 2020

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.

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 beter?

This visualization displays a pie chart that uses data from the RDW (Dutch vehicle registration authority) to explore parking usage purposes, though the chart currently renders hardcoded year values (2013–2019) rather than the fetched API data. The code fetches JSON from two RDW Open Data endpoints using the Fetch API, filters location data by the `startdataarea` column, and then builds the chart with d3.pie() and d3.arc(), styled with d3.scaleOrdinal and d3.schemeCategory10. Rendering occurs as SVG elements within a 400x400 viewport.

SSergio Eijben

90% match

Loading thumbnail…

Pie chart RDW OWN CODE

This example shows a pie chart displaying the distribution of parking area start years from RDW open data, where each slice represents a unique year value from the dataset. The visualization fetches JSON data from the RDW API, filters it to extract the first four characters of the `startdataarea` column, and identifies unique values before rendering the chart. Using D3 v6, the code employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the `schemeTableau10` color palette to generate SVG paths and labels. Text labels are placed using an inner arc centroid calculation.

SSergio Eijben

89% match

Loading thumbnail…

Pie chart RDW Final

This pie chart displays how many Park & Ride locations were created per year, based on Dutch open data from RDW. The chart uses d3.pie and d3.arc to generate slices, with each slice labeled by year and count, colored via d3.scaleOrdinal. Hovering a slice triggers a transition that expands the arc using d3.arc with adjusted radii. The data is fetched from two RDW JSON endpoints using async/await, filtered and aggregated before rendering as an SVG.

SSergio Eijben

89% match

Loading thumbnail…

Pie chart RDW With help from Laurens

This example shows a pie chart of parking data from the RDW open data API, visualizing the distribution of start dates by year. The code loads JSON data via `fetch`, filters it to the first four characters of the `startdataarea` field, counts occurrences per year, and renders the chart using D3.js v6’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`. The SVG is centered on the page, with each slice labeled by year and colored using the category10 scheme.

SSergio Eijben

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

88% match

Loading thumbnail…

Pie chart RDW filter op andere dataset

This example visualizes the distribution of parking data usage years from the RDW open dataset, filtering by the `usageid` and `startdataarea` columns, and aggregating counts per year into a pie chart. It fetches data from the RDW API via `fetch`, filters and maps values with custom functions, then uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to render the SVG slices. Labels are placed using `arc.centroid`, and the chart displays unique year values as text on each segment. The dataset is retrieved from `opendata.rdw.nl` with a CORS proxy.

SSergio Eijben

88% match

Loading thumbnail…

Pie chart RDW

This example displays a pie chart of yearly values using D3.js, rendering four labeled slices with a categorical color scheme. The visualization is built with the `d3.pie` layout function and `d3.arc` for paths and labels, rendered as SVG. It uses `d3.scaleOrdinal` for colors and `d3.schemeCategory10` for the palette, with data hardcoded in the script. The chart is centered using an SVG group transform, and each slice’s year is placed via the label centroid.

SSergio Eijben

83% match

Loading thumbnail…

Fork of Pie chart RDW

This example displays a donut chart showing four yearly values. It uses D3 v6 with an SVG canvas on a 400-by-400 coordinate system, centering the visualization. The code creates the chart using `d3.pie` to compute the pie segments and `d3.arc` for the outer and inner radii. A categorical color scheme, `d3.schemeCategory10`, colors each slice, while labels positioned via the arc’s centroid display the year. The data is a static inline array for 2013–2015 and 2019, and the chart is an unmodified fork of a FrontendTips tutorial.

MMar-99

83% match