randy554

@randy554·7 public vizzes

Exploring RDW data - Basic chart with filtering

This example visualizes parking facility data from the RDW, showing capacity as bars along a categorical x-axis. A checkbox filters out entries with unknown capacity, updating the bar chart and axes accordingly. Built with D3 v6, it loads data from a local JSON file and uses d3.scaleBand, d3.scaleLinear, and d3.axisBottom/axisLeft for rendering. The filtering logic uses D3’s data join pattern to update, enter, and exit bars dynamically.

Mar 16, 2021

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.

Nov 30, 2020

Loading thumbnail…

Untitled

This example fetches parking facility data from the RDW open dataset, selecting the first ten facilities and retrieving their detailed static information via asynchronous `Promise.all` requests. It uses D3.js (`d3.json`, `select`) to load and prepare the data, logging unique values for `limitedAccess` and capacities to the console. The visualization scaffolding includes SVG margins and placeholder functions for scales, axes, and bars, but no chart is actually rendered yet. The code relies on a CORS proxy (`cors-anywhere`) to access the external API.

Nov 29, 2020

Loading thumbnail…

Exploring RDW data - Preparing data for Viz

This example prepares Dutch parking facility data from the RDW API for visualization. It fetches an overview of parking locations, selects the first ten, and retrieves detailed information for each using `Promise.all` with `d3.json`. The code logs unique values for properties like `limitedAccess` and capacity, setting up scales and axes for future bar charts. It uses D3 v6, an SVG container, and a proxy URL to handle cross-origin requests.

Nov 20, 2020

Loading thumbnail…

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.

Nov 10, 2020

Loading thumbnail…

Let's make a face with D3.js

This example builds a smiling face out of basic SVG shapes using D3.js. The code creates circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth, all positioned within a centered group. It uses D3’s `select`, `attr`, `append`, and `transition` with `duration` to animate the eyebrows moving up and down. The rendering relies on an SVG element defined in HTML, and the fixed dimensions (960 by 500) are read via `parseFloat(svg.attr(...))`. The face is composed entirely from hardcoded values, with no external data.

Nov 7, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in a large, centered font on a blank page. It demonstrates the basic structure of an HTML document combining embedded CSS and JavaScript. The CSS sets the body’s text alignment and font size, while the JavaScript uses the browser’s `console.log` API to output “Hello JavaScript!” and “Hello D3.js” to the developer tools. The page does not use any external libraries or data, serving as a minimal template for static web content.

Nov 4, 2020