ralfz123

@ralfz123·6 public vizzes

Local Storage Example

This example demonstrates how a browser persists user input across page reloads using the Web Storage API. It shows a text field and button; entering a name and submitting it saves the value, which is then restored into the input field upon refreshing the page. The JavaScript code uses `window.localStorage`, `storage.getItem`, and `storage.setItem` to manage the stored data, and it appends a new paragraph element to the document body after each submission.

Nov 24, 2020

Loading thumbnail…

Customizing Axe$()

This example shows a horizontal bar chart of population by country and religion, using data loaded from a CSV file. It customizes the chart’s axes by removing default domain lines and tick lines, formatting tick labels (e.g., converting "G" to "B" for billions), and adding custom axis titles and labels. The code uses D3 v5 APIs such as `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `format`, rendering to SVG.

Nov 19, 2020

Loading thumbnail…

D3 Provincie Nederland

This interactive map of Dutch provinces uses D3.js to display geographic boundaries and animate a zoom-and-pan interface. It fetches TopoJSON data from Cartomap, projects it with `d3.geoMercator`, and renders paths via `d3.geoPath`. Clicking a province highlights it in red and smoothly zooms using `d3.zoom` and `transform` transitions, while a custom dummy coordinate marker appears as a small circle. The SVG output includes subtle stroke opacity and a dark background for contrast.

Nov 16, 2020

Loading thumbnail…

Proberen eigen data te renderen

This example displays a horizontal bar chart of country populations. The chart uses a dark red fill for the bars and includes axis labels. The code attempts to fetch data from the RDW open data API but ultimately renders from a local CSV file, mapping the population values to the bar widths. It utilizes D3 v5 functions like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the visualization within an SVG element.

Nov 9, 2020

Loading thumbnail…

Making barchart$()

This example displays a horizontal bar chart of religious populations across countries, using a dataset loaded from a CSV file. The bars are rendered as SVG rectangles, with a linear scale mapping population values to widths and a band scale positioning each country along the vertical axis. The code leverages d3.csv, d3.scaleLinear, d3.scaleBand, and d3.axisLeft/axisBottom to construct the visualization.

Nov 4, 2020

Loading thumbnail…

Combining data from multiple fetches d3

This example demonstrates how to combine data from multiple asynchronous fetches in D3.js. It first loads an overview of Dutch parking facilities using `d3.json` with a CORS proxy, then filters locations by name. It concurrently fetches two specific parking location datasets and uses `Promise.all` to wait for both before processing the results. The code logs the combined response arrays without rendering any visualization, focusing purely on the data-fetching and merging workflow.

Nov 2, 2020