100%

Untitled

✓ Published0🌍 Public

Last edited Nov 29, 2020

Created on Nov 29, 2020

Forked from Exploring RDW data - Preparing data for Viz

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.

AI-generated description

Example of how to work with the RDW data

MIT Licensed

Similar vizzes

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

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

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

82% match

Loading thumbnail…

Combining data from multiple fetches d3

This example demonstrates how to coordinate multiple asynchronous data fetches in D3.js by combining parking facility data from two separate RDW API endpoints. It uses the `d3.json` method with a CORS proxy URL to retrieve both datasets, then employs `Promise.all` to wait for both fetches to complete before processing the combined results. The code logs the overview of parking locations, selects the first ten facilities, and matches them with their corresponding data sources. The visualization itself is minimal, displaying only console output rather than rendered graphics.

LLaurens

81% match

Loading thumbnail…

Exploring RDW data - Basic chart

This example visualizes parking facility capacities from RDW data, highlighting entries with missing capacity values. It first loads local test data or fetches remote data via a CORS proxy, then transforms and filters the dataset. The visualization uses d3.scaleBand and d3.scaleLinear to map descriptions and capacities, drawing bars with d3.select and appending rect elements. Axes are created with d3.axisBottom and d3.axisLeft. The code includes intermediate exploration steps like inspecting unique values, demonstrating a typical data-cleaning workflow before rendering the final SVG chart.

VVictor Boucher

78% match

Loading thumbnail…

Exploring RDW data - Basic chart

This example visualizes parking facility capacities from the Dutch RDW dataset, focusing on the first ten facilities and their associated usage types. It renders a static bar chart using SVG, where each bar represents a facility, and the bar height corresponds to its capacity. Facilities with missing capacity data appear as zero-height bars. The visualization is built with D3 v6, employs `d3.scaleBand` and `d3.scaleLinear` for the axes, and uses `d3.axisBottom` and `d3.axisLeft` to draw the chart's axes. The code includes a data preparation pipeline that selects a subset of the remote data, transforms it, and handles missing values, with a toggle for loading local test data.

NNathan Neelis

77% match

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

77% match

Loading thumbnail…

Combining data from multiple fetches d3

This example demonstrates how to combine data from multiple asynchronous fetches in D3.js. It first loads an overview of Dutch parking facilities using `d3.json` with a CORS proxy, then filters locations by name. It concurrently fetches two specific parking location datasets and uses `Promise.all` to wait for both before processing the results. The code logs the combined response arrays without rendering any visualization, focusing purely on the data-fetching and merging workflow.

Rralfz123

75% match