Skip to main content
SimilarExport ZIP
100%

Parking Viz v1

✓ Published0🌍 Public
Mmbergevoet
Last edited Nov 3, 2020
Created on Nov 3, 2020
Forked from Smiley Face

This visualization shows parking rate data from the RDW open data API (endpoint `https://opendata.rdw.nl/resource/534e-5vdg.json`), fetched via JavaScript `fetch`. The code defines a `calcParkingRate` function to compute rates from fare parts but does not yet render any visual elements—the SVG remains empty. It uses D3 v6 selection (`select("svg")`) and destructured `arc` and `select` imports, with an HTML/CSS layout controlling page margins and overflow. The chart’s dimensions are parsed from SVG attributes for future drawing.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Exploring RDW data - Basic chart

This visualization uses D3 v6 to explore a selection of RDW parking data from the Dutch national parking registry. It displays a horizontal bar chart showing the capacity of various Park & Ride, carpool, and paid street parking locations, with bars colored Darkmagenta via `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The example loads data either from a local JSON file or a remote API proxy, and renders the chart as SVG using D3 selections and margin conventions.

SSergio Eijben
79% match
Loading thumbnail…

Parking rate barchart

This bar chart visualizes parking rates across different area managers by comparing the calculated fare per step size. The chart uses a horizontal layout with rectangles scaled proportionally to the rate values, while country names are displayed on the y-axis. Data is fetched from two RDW API endpoints and combined asynchronously. The visualization is built with D3 v6, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG elements.

Mmbergevoet
78% match
Loading thumbnail…

Exploring RDW data - Preparing data for Viz

This example prepares Dutch parking facility data from the RDW API for visualization. It fetches an overview of parking locations, selects the first ten, and retrieves detailed information for each using `Promise.all` with `d3.json`. The code logs unique values for properties like `limitedAccess` and capacity, setting up scales and axes for future bar charts. It uses D3 v6, an SVG container, and a proxy URL to handle cross-origin requests.

Rrandy554
78% match
Loading thumbnail…

Exploring RDW data - Basic chart

This example shows the parking capacity of various Park & Ride, carpool, and paid street parking facilities in the Netherlands, using a bar chart where each bar’s height represents the number of parking spots. The visualization is built with D3 v6 and rendered as SVG, using `d3.scaleBand` and `d3.scaleLinear` to map descriptions and capacities, and `d3.axisBottom`/`d3.axisLeft` for the axes. Data is loaded from a local JSON file via `d3.json`, with an optional remote RDW API path, and bars are appended as SVG rectangles.

SSergio Eijben
78% match
Loading thumbnail…

Exploring RDW data - Basic chart

The visualization displays parking facility data from the RDW open dataset, plotting variables from a selectable form. It fetches a list of facilities, retrieves static details for the first ten, and logs unique values for fields like limited access. The code uses d3.json with a CORS proxy and d3 v6, rendering an SVG scaffold with margins and a group element, though no axes or bars are drawn yet.

SSharon
77% match
Loading thumbnail…

RDW Data cleaning

This interactive dashboard visualizes the distribution of P+R parking capacities across Dutch cities, using data from the RDW open data portal. A bar chart shows the number of P+R locations per city, and clicking any bar generates a pie chart breaking down the parking capacity of each facility within that city. The visualization uses d3.scaleBand and d3.scaleLinear for the bar chart, while the pie chart is built with d3.arc and d3.pie. All graphics are rendered as SVG, with React managing the page structure.

Llars-ruijs
76% match
Loading thumbnail…

Exploring RDW data - Preparing data for Viz

This example explores Dutch RDW parking facility data by fetching an overview of locations and then retrieving detailed information for the first ten facilities. The visualization prepares data for a bar chart by logging unique values for fields like limited access, while commenting on future steps for scales, axes, and bars. It uses d3.json with a CORS proxy to access the external API, chains Promises with Promise.all, and relies on D3 v6 for SVG rendering and data manipulation.

LLaurens
75% match
Loading thumbnail…

Untitled

This example fetches parking facility data from the RDW open dataset, selecting the first ten facilities and retrieving their detailed static information via asynchronous `Promise.all` requests. It uses D3.js (`d3.json`, `select`) to load and prepare the data, logging unique values for `limitedAccess` and capacities to the console. The visualization scaffolding includes SVG margins and placeholder functions for scales, axes, and bars, but no chart is actually rendered yet. The code relies on a CORS proxy (`cors-anywhere`) to access the external API.

Rrandy554
75% match