Randstad city vs Capacity

100%

Randstad city vs Capacity - styling

✓ Published1🌍 Public

Last edited Nov 10, 2020

Created on Nov 10, 2020

This bar chart visualizes the total park-and-ride capacity for each Randstad city in the Netherlands, sourced from an NPR dataset. The chart shows capacity values on a descending y-axis, with city names rotated vertically along the x-axis. Built with D3 v6, the visualization uses `scaleLinear` and `scaleBand` for positioning, with custom data transformation functions cleaning and aggregating city-specific entries. The SVG render includes styled axes, gridlines, and a steelblue title, demonstrating a clean, margin-based layout.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

This bar chart shows the total parking capacity for each city in the Randstad region, with capacities aggregated for cities that appear under multiple names. The visualization uses D3 v6 with SVG rendering, employing `scaleBand` for the x-axis and `scaleLinear` for the y-axis. Data is fetched as JSON from a GitHub gist, then processed through custom functions to filter, clean, and combine city entries before rendering.

NNathan Neelis

93% match

Loading thumbnail…

clean code with modules (v10.11_17:00)

A bar chart displays the parking capacity of park-and-ride facilities across nine Randstad cities in the Netherlands, sourced from an NPR dataset. Each bar represents a city, labeled with its description, while the y-axis measures capacity. The visualization uses d3.scaleLinear and d3.scaleBand for scales, d3.axisLeft and d3.axisBottom for axes, and SVG rects for bars. Data is cleaned and aggregated through imported transform modules, with setup scales, axes, and drawing separated into a visual module.

GGiovanniD_

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

85% match

Loading thumbnail…

Making a Bar Chart - NPR data

This example visualizes the parking capacity of Park & Ride facilities in the Randstad region of the Netherlands, using a horizontal bar chart. Each bar represents a city, with bar length scaled to total capacity. The code loads JSON data from a GitHub gist and processes it through custom transformation functions to filter, clean, and aggregate city entries, combining duplicate city names. The chart is rendered as an SVG using D3 v6, with `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` to create the axes.

NNathan Neelis

84% match

Loading thumbnail…

Interactive barChart (v12.11.20:00)

This interactive bar chart displays the number of park-and-ride parking spaces available in each Randstad city, sourced from NPR data. A checkbox filter toggles between showing individual parking garages and aggregated capacities per city. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` and `scaleBand` for scales, `axisBottom` and `axisLeft` for axes. Bars animate in with a transition over one second, and the same transition updates, enters, and exits bars when the filter changes. The chart rotates x-axis labels for readability.

MMillycc

84% match

Loading thumbnail…

Interactive barChart (v11.11.12:00)

This interactive bar chart shows the number of P+R parking places for cities in the Randstad region of the Netherlands, sourced from NPR park-and-ride data loaded via a gist URL. A checkbox toggles between showing individual parking facilities and combined totals per city, which updates the visualization. Built with D3 v6 in SVG, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` for the axes and bars, with data cleaning and merging handled through custom functions in a transform module.

NNathan Neelis

83% match

Loading thumbnail…

Interactive barChart (v11.11_11:10)

This interactive bar chart displays the number of P+R parking places for each city in the Randstad region of the Netherlands. Users can toggle a checkbox to combine parking capacity data for cities with multiple locations, updating the visualization. The chart uses D3 v6 with SVG rendering, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to create and update bars. Data is fetched from a GitHub gist and processed through custom transformation functions that clean, filter, and aggregate the raw dataset.

NNathan Neelis

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