Skip to main content
SimilarExport ZIP
100%

Exploring RDW data - Basic chart with filtering

✓ Published0🌍 Public
NNathan Neelis
Last edited Nov 10, 2020
Created on Nov 10, 2020

This example visualizes parking facility capacities from Dutch RDW open data, displaying each location as a bar on a Cartesian chart. A checkbox filters out facilities with unknown capacity, re-scaling the axes and updating the bar positions dynamically. The chart handles the data’s dirty state, where `null` capacities are excluded upon filtering, and it redraws the x-axis tick labels with a rotation for readability. The implementation uses D3 v6 with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to build the SVG, while local JSON test data or a proxied remote API serves as the data source.

AI-generated description

Example of how to add filtering

MIT Licensed

Similar vizzes

Loading thumbnail…

Exploring RDW data - Basic chart with filtering

This example visualizes Dutch parking facility data from the RDW, displaying each location’s capacity as a bar chart. A checkbox filters out entries with unknown capacity, dynamically updating the axes and bars. The visualization loads local JSON via `d3.json` (through a helper `getData`), uses `d3.scaleBand` and `d3.scaleLinear` for scaling, and renders SVG rectangles with D3 v6 selection and data-join methods. Interactive filtering triggers `filterUnknown`, which updates domains and redraws bars with enter, update, and exit patterns.

NNino Schelcher
95% match
Loading thumbnail…

Exploring RDW data - Basic chart with filtering

This example displays a bar chart of parking facility capacities from Dutch RDW open data, with a checkbox filter that hides facilities with unknown capacity values. The visualization uses D3 v6 to render SVG bars, with a band scale for parking facility descriptions on the x-axis and a linear scale for capacity on the y-axis. Data loads from local test data (dataSelection.json) or a remote API via a CORS proxy. The interactive filter updates the chart by re-binding data, adjusting scales, and redrawing bars and axes using D3 selection methods. The chart uses rotated axis labels and a fixed height and width of 960 by 500 pixels.

Ssreen020
95% 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
94% match
Loading thumbnail…

Exploring RDW data - Basic chart with filtering

This example visualizes parking facility capacities from RDW data as a bar chart, with each bar representing a location. A checkbox filters out entries with unknown capacity, dynamically updating the chart. Built with D3 v6, it uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and SVG for rendering. The code loads local JSON data and demonstrates interactive filtering through D3’s selection and update patterns.

LLaurens
94% match
Loading thumbnail…

Exploring RDW data - Basic chart with filtering

This example visualizes parking facility data from the RDW, showing capacity as bars along a categorical x-axis. A checkbox filters out entries with unknown capacity, updating the bar chart and axes accordingly. Built with D3 v6, it loads data from a local JSON file and uses d3.scaleBand, d3.scaleLinear, and d3.axisBottom/axisLeft for rendering. The filtering logic uses D3’s data join pattern to update, enter, and exit bars dynamically.

Rrandy554
93% match
Loading thumbnail…

Exploring RDW data - Basic chart

This example visualizes parking facility capacities from RDW data, showing a bar chart of locations with their available parking spots. The chart uses a bar for each facility, with the y-axis representing capacity and the x-axis showing location descriptions. It demonstrates a workflow for handling potentially messy data, including a data preparation step that extracts relevant fields. The visualization is built with D3 v6, using `d3.scaleBand` and `d3.scaleLinear` for scales, and renders bars as SVG rectangles. Local test data is used by default, with an option to fetch live data from the RDW API.

LLaurens
91% 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
91% 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
91% match