nadinevdbosch

@nadinevdbosch·8 public vizzes

Barchart met RDW Data v6

This bar chart displays three categorical values for two datasets, comparing taxis and passenger cars. Two buttons switch between the datasets, triggering a smooth animated transition of the rectangular bars. The visualization uses D3.js version 5 with SVG rendering, leveraging `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and the `.transition()` method for animations. The chart initializes with the passenger car data and updates bar positions, heights, and fill colors dynamically.

Nov 18, 2020

Loading thumbnail…

Barchart met RDW Data v5

This bar chart, built with D3 v5, visualizes the distribution of vehicle colors for cars and taxis registered in the Netherlands, using a dropdown to switch between the two categories. It shows a horizontal bar chart ranking color counts. The code loads data from the RDW Open Data API, processes the JSON, and renders the chart using D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with an SVG output.

Nov 18, 2020

Loading thumbnail…

Barchart a.h.v tutorial Curran

This example displays a horizontal bar chart of country populations from a CSV file, with each bar’s length proportional to its population value. The visualization uses D3 v5’s `csv`, `scaleLinear`, and `scaleBand` to map data to x and y positions, while `axisLeft` and `axisBottom` generate the axes. SVG rectangles are appended and styled with a teal fill via CSS. The chart includes margins and padding, and the population values are converted from strings to numbers with the unary plus operator.

Nov 13, 2020

Loading thumbnail…

Barchart met RDW Data v5

This bar chart visualizes the distribution of taxi vehicle colors from RDW open data, showing counts for white, black, gray, blue, red, and green taxis. The visualization filters the dataset for passenger cars with a taxi indicator, then aggregates records by primary color. Built with D3.js v5, it uses `d3.json` for data loading, `scaleBand` and `scaleLinear` for the axes, and renders bars as SVG rectangles. The chart highlights color preferences among Dutch taxis.

Nov 11, 2020

Loading thumbnail…

Barchart met RDW Data v4

This bar chart visualizes the number of non-taxi passenger cars in the Netherlands by primary color, using RDW open data. It shows counts for white, black, gray, blue, red, and green vehicles. The chart uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG bar chart. Data is fetched as JSON from the RDW API, filtered for vehicles with taxi indicator "Nee", and aggregated by the `eerste_kleur` field.

Nov 11, 2020

Loading thumbnail…

Barchart met RDW Data v3

This bar chart compares the counts of taxis versus non-taxi passenger cars in the Netherlands, using live data from the RDW Open Data API. It queries the API for vehicle records, filters them by vehicle type and taxi indicator, and displays the resulting two-category counts as horizontal bars. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` for axes, and renders SVG rectangles with counts labeled by category.

Nov 11, 2020

Loading thumbnail…

Barchart met RDW Data v2

This bar chart compares the number of passenger cars versus taxis in a dataset from the RDW (Dutch vehicle authority). The chart shows two horizontal bars, with taxi counts and personenautos (passenger car) counts, displayed using an SVG canvas. The visualization is built with D3 v5, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and appends rectangles to the chart. Data is fetched asynchronously from a remote API and processed through filters to isolate the two categories.

Nov 11, 2020

Loading thumbnail…

Barchart met RDW Data v1

This bar chart compares the count of taxis versus passenger cars in the Netherlands, using data retrieved live from the RDW open data portal. The visualization fetches up to 1500 records and aggregates the occurrences of each vehicle type. Built with D3 v5, it renders two horizontal bars as SVG rectangles, using `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The chart displays the absolute numbers for both categories, highlighting the much larger population of passenger cars compared to taxis.

Nov 11, 2020