Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart with D3.js

✓ Published1🌍 Public
Rrandy554
Last edited Nov 10, 2020
Created on Nov 8, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Playing

This visualization displays the number of charging points for electric vehicles in four major Dutch cities: Amsterdam, Rotterdam, The Hague, and Utrecht. Horizontal bars represent each city, with bar length corresponding to the charging point count. The example uses D3.js version 6 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position the bars. Data is loaded from a CSV file using D3's `csv` function.

Rrandy554
83% 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
83% match
Loading thumbnail…

Making a bar chart

This example demonstrates a horizontal bar chart comparing the area of major cities, using data loaded from a CSV file. The visualization positions each city along the y-axis and scales the bar lengths according to the area values. It relies on D3.js v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. The SVG rendering uses a purple fill for bars, which changes to a lighter shade on hover, with the chart area defined by explicit margins.

Vvladvaculin
80% 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_
78% 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
77% 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
77% match
Loading thumbnail…

Making a Bar Chart with D3.js

This example demonstrates a basic bar chart built with D3.js, mapping country populations from a CSV file to SVG rectangles. The code uses `d3.csv` to load the data, `d3.scaleLinear` for scaling, and `selection.enter()` to append rectangular elements. The chart reads the data.csv file, multiplies population values by 1,000, and renders static 300-by-300-pixel bars without axes or labels.

GGS500
77% 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
77% match