Skip to main content
Log in
D

davidvanr21

@davidvanr21·9 public vizzes

Loading thumbnail…

Bar Chart (vertical + filter) - TechTrack

This vertical bar chart visualizes parking facility capacities across Dutch locations, using data sourced from RDW parking data via a proxy URL. The chart includes an interactive checkbox filter that excludes facilities with unknown capacity values, dynamically updating the scales and re-rendering bars. Built with D3 v6, it uses SVG rendering, d3.scaleBand for categorical positioning, d3.scaleLinear for value mapping, and d3.axisBottom/axisLeft for axes. Bar transitions and enter/exit selections manage the filtered view, while rotated x-axis labels accommodate long descriptions.

Jan 27, 2021
Loading thumbnail…

Fork of Bar Chart (vertical + filter) - TechTrack

This example shows a vertical bar chart of parking facility capacities, drawn using D3 v6 with SVG rendering, based on RDW parking data. A checkbox filters out entries with unknown capacity, updating the chart’s scales, bars, and axes dynamically. The code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with enter/update/exit selections to manage bar transitions. Data is loaded from a local JSON file, and the filter logic rebuilds the chart with the filtered dataset.

Jan 27, 2021
Loading thumbnail…

Vertical Bar Chart - Volkskrant

This example presents a vertical bar chart comparing the populations of ten countries, rendered as SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. The bars initially appear steelblue, and on `mouseover` events, the chart highlights the hovered bar in red with a blue stroke and displays a text label inside it showing the country name and population in billions, formatted using D3’s `format` function. The `mouseout` handler removes the label and restores the original fill. Data loads from a CSV file, with population values multiplied by 1000.

Jan 27, 2021
Loading thumbnail…

D3 Exercise - Bar Chart

This bar chart visualizes the population of ten countries, using a horizontal bar for each nation ordered by population size. The chart is built with D3 version 6, using the `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` modules from the D3 API. The data is loaded from a local CSV file via D3’s `csv` function, with population values parsed and multiplied by 1,000. The SVG rendering is driven by a `select`-based pipeline, appending rectangles whose widths and y-positions are computed from the scales. The visualization appears clean and readable with fixed margins and a steelblue bar fill.

Jan 27, 2021
Loading thumbnail…

D3 Exercise - Bar Chart

This bar chart displays yearly population changes for a country from 2014 to 2019, using horizontal bars scaled by population values. The visualization loads CSV data, multiplies population figures by 1,000, and renders SVG rectangles with D3’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis. It uses `axisLeft` and `axisBottom` for labeled ticks, with margins applied to the main group for clear presentation.

Jan 27, 2021
Loading thumbnail…

D3 Exercise - Bar Chart

This bar chart displays population figures for a country from 2014 through 2019, with the values scaled to represent thousands. Built with D3 v6, the visualization uses `scaleLinear` and `scaleBand` to map populations to horizontal bars, while `axisLeft` and `axisBottom` generate the chart’s axes. Data is loaded from a CSV file and rendered as SVG rectangles, with the bars colored steelblue and text labels in grey.

Nov 12, 2020
Loading thumbnail…

D3 Exercise - Smiley

This example renders a smiling face built from basic SVG shapes, centered within a 950×400 viewport. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and an arc-based mouth using the `d3.arc` generator. The code imports `select` and `arc` from D3 v6, applies geometric transforms to position the face, and demonstrates fundamental SVG composition within a React project. Source data is hardcoded rather than loaded externally, with all styling handled through inline attributes.

Nov 3, 2020
Loading thumbnail…

Live API Coding - By Laurens

This example fetches live data from the RDW Open Data API using the `fetch` function, starting with the endpoint `https://opendata.rdw.nl/resource/t5pc-eb34.json`. It retrieves the JSON response, logs the full dataset and the first record, and then applies a custom `filterData` function to extract all values for the `areaid` column. The code also defines a `listUnique` function to identify unique values in an array, though it is not called in the visible flow. The page itself is minimal, with no visual output—only console logging and basic HTML/CSS styling.

Oct 27, 2020
Loading thumbnail…

Some refactored API live coding

This example demonstrates a live-coding workflow for inspecting and cleaning data fetched from the Dutch RDW open-data API (`https://opendata.rdw.nl/resource/t5pc-eb34.json`). It fetches the raw JSON using the `fetch` API within an `async` function, then maps results down to a single selected column (`areaid`). With the filtered array, the code logs all data, a single record, and the cleaned column values, then uses a `Set` to list unique entries and filters for values containing "WEST". The visualization is limited to console output, with no graphical rendering.

Oct 27, 2020