100%

Bar Chart (vertical + filter) - TechTrack

✓ Published1🌍 Public

Last edited Jan 27, 2021

Created on Jan 27, 2021

Forked from Untitled

This vertical bar chart visualizes parking facility capacities across Dutch locations, using data sourced from RDW parking data via a proxy URL. The chart includes an interactive checkbox filter that excludes facilities with unknown capacity values, dynamically updating the scales and re-rendering bars. Built with D3 v6, it uses SVG rendering, d3.scaleBand for categorical positioning, d3.scaleLinear for value mapping, and d3.axisBottom/axisLeft for axes. Bar transitions and enter/exit selections manage the filtered view, while rotated x-axis labels accommodate long descriptions.

AI-generated description

Example of how to add filtering

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bar Chart (vertical + filter) - TechTrack

This example shows a vertical bar chart of parking facility capacities, drawn using D3 v6 with SVG rendering, based on RDW parking data. A checkbox filters out entries with unknown capacity, updating the chart’s scales, bars, and axes dynamically. The code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with enter/update/exit selections to manage bar transitions. Data is loaded from a local JSON file, and the filter logic rebuilds the chart with the filtered dataset.

Ddavidvanr21

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

86% match

Loading thumbnail…

Exploring RDW data - Basic chart with filtering

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.

NNathan Neelis

85% match

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

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

82% match

Loading thumbnail…

Interactive barChart (v11.11.12:00)

This interactive bar chart displays the capacity of park-and-ride parking places across Randstad cities in the Netherlands. Users can toggle a checkbox to aggregate double-named city entries, updating the visualization dynamically. The chart fetches JSON data from a GitHub gist and renders SVG rectangles using d3.scaleBand, d3.scaleLinear, and d3.axisBottom. The code uses d3.select for DOM manipulation and transition-free enter/update/exit selections to handle filtered data changes.

Ssarakouz

82% match

Loading thumbnail…

Interactive barChart TRYING NEW TRANSITIONS

This interactive bar chart shows the parking capacity of P+R facilities across cities in the Randstad region of the Netherlands. A checkbox aggregates data for cities with multiple parking areas, updating the chart with smooth transitions. Built with D3 v6, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map city names and capacities, with SVG rectangles animated via `transition()`. Data is fetched from a JSON endpoint and cleaned through custom transformation functions. Axes update dynamically when the filter is toggled, re-rendering bars and tick labels.

NNathan Neelis

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

82% match