Playing

Making a Bar Chart with D3.js

This example shows a horizontal bar chart comparing the number of charging points across major Dutch cities in the Randstad region, using a CSV dataset with city names and numerical values. The visualization encodes the data with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. The code loads the data via `d3.csv`, converts the numeric column to integers, and uses a data join with `selectAll` and `enter()` to append SVG `rect` elements. The bars are positioned using the y-scale and sized by the x-scale's domain and range.

Rrandy554

83% match

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.

75% match

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_

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.

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

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

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.

Scatter plot

This scatter plot displays population counts for six Dutch cities, with country names on the y-axis and population on the x-axis. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleLinear` for the x-scale, `d3.scalePoint` for the y-scale, and `d3.axisLeft` and `d3.axisBottom` for the axes. The code loads data from a CSV file using `d3.csv` and applies custom number formatting with `d3.format`. Styled circles represent each data point, with axis labels and a title added to the chart.