Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
JJordy S
Last edited Jan 28, 2021
Created on Jan 26, 2021

This example shows the total parking capacity per province, sorted from highest to lowest, using a bar chart. The visualization uses D3.v6 to load the data from a JSON URL, nest and roll up the records by province, and sum the capacity values. Axes and bars are updated dynamically via `d3.axisBottom`, `d3.axisLeft`, and `d3.descending`, with the SVG output rendered in a 960x500 canvas.

AI-generated description

Example of how to add filtering

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example renders a bar chart of garage capacities by province inside an SVG element. It loads JSON data from a GitHub gist using D3’s `json` function, then maps capacity values to bar widths with `scaleLinear` and province names to vertical positions via `scaleBand`. The code demonstrates a minimal HTML/CSS/JavaScript setup with D3 v6, though the y-axis scale is configured but not fully applied, leaving bars unpositioned vertically.

JJordy S
75% 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
74% match
Loading thumbnail…

Untitled

This stacked bar chart displays the total population for each state across selected years, with bars segmented by three categories. A dropdown menu lets viewers switch between years, triggering a smooth transition that updates bar heights and the y-axis scale. The visualization is built with D3.js v5, using d3.stack for data aggregation, d3.scaleBand and d3.scaleLinear for positioning, and SVG transitions to animate changes. Data comes from a local CSV file, with each bar labeled with its total value.

Pp189
74% match
Loading thumbnail…

Untitled

This stacked bar chart displays the total population for each state across selected years, with bars segmented by three categories. A dropdown menu lets viewers switch between years, triggering a smooth transition that updates bar heights and the y-axis scale. The visualization is built with D3.js v5, using d3.stack for data aggregation, d3.scaleBand and d3.scaleLinear for positioning, and SVG transitions to animate changes. Data comes from a local CSV file, with each bar labeled with its total value.

Pp189
74% match
Loading thumbnail…

Untitled

This bar chart visualizes total car sales across different locations, with each location represented by a vertical bar scaled against a fixed y-axis range of 0 to 13. The chart uses D3.js v4 to fetch data from a CSV file hosted on GitHub, then renders the visualization as an SVG. The code employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. Bars are drawn as SVG rectangles with a teal fill color, and x-axis labels are rotated 45 degrees for readability.

MManideeprenikindi
74% 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_
73% match
Loading thumbnail…

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

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.

NNathan Neelis
73% 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
73% match