Skip to main content
SimilarExport ZIP
100%

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

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

A bar chart displays the parking capacity of P+R facilities across Randstad cities, with data fetched from a GitHub gist. The chart communicates total capacity per city, highlighting relative differences in parking availability. The visualization is built with D3 v6, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the plot. The code organizes data cleaning and visual encoding into separate modules, utilizing `fetch` to retrieve and process JSON, then renders the result as an SVG with steel-blue rectangles and rotated city labels.

AI-generated description
MIT Licensed

Similar vizzes

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_
93% match
Loading thumbnail…

Interactive barChart (v12.11.20:00)

This interactive bar chart visualizes the number of P+R parking spaces across Randstad cities, with each bar representing a city’s total capacity. A checkbox aggregates parking data for cities with multiple locations, updating the chart through dynamic transitions. Built with D3 v6, it uses `scaleBand` and `scaleLinear` for axes, employs SVG rectangles with animated height transitions, and loads data from a remote Gist endpoint. The visualization supports smooth updates via enter, update, and exit selections.

NNathan Neelis
87% match
Loading thumbnail…

Interactive barChart (v11.11_10:00)

This interactive bar chart displays the number of P+R parking spaces in cities across the Randstad region, sourced from a JSON endpoint. Users can toggle a checkbox to aggregate parking capacities for each city, combining data from multiple locations within the same municipality. The visualization is built with D3 v6, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render and update SVG bars, enter/exit selections, and refresh the axes dynamically.

NNathan Neelis
87% 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
86% match
Loading thumbnail…

Interactive barChart (v10.11_19:00)

This interactive bar chart visualizes the number of P+R parking places in Randstad cities, sourced from a JSON endpoint. A checkbox toggle aggregates capacity values for cities with multiple parking areas, merging them on the fly. The chart is rendered with SVG using D3 v6, employing scales, axes, and bar transitions to update the visualization dynamically.

NNathan Neelis
86% 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
86% match
Loading thumbnail…

Interactive barChart (v11.11.13:30)

This interactive bar chart shows the number of P+R parking spaces across cities in the Randstad region of the Netherlands. A checkbox toggles between individual parking locations and combined city totals, with bars animating between states using D3 transitions. The visualization uses d3.scaleBand and d3.scaleLinear for axes, with data fetched from a GitHub-hosted JSON file and processed through custom cleaning and transformation functions. SVG rendering includes animated height transitions for entering, updating, and exiting bars.

NNathan Neelis
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