Skip to main content
Log in
L

Laurens

@Razpudding·50 public vizzes

Loading thumbnail…

SVG text experiment - Choreography of elements

A circular arrangement of text cards, each containing a category label and a body of related words, rotates continuously around a central statement. The central text repeatedly fades out and rewrites itself with a new sentence composed of words from the taxonomy dataset. D3.js (v5) constructs the SVG elements and performs the text transitions, while the GreenSock (GSAP) library animates the cards' rotation and the progress of text along SVG paths.

Mar 7, 2023
Loading thumbnail…

CBA_map

This map visualization displays locations of kombucha-related businesses and events across Amsterdam, using colored circles to distinguish between origins, resellers, and events. The d3.js and Leaflet code generates an organic growth pattern by repeatedly spawning smaller colored circles near original data points, simulating diffusion across the map. It renders over a dark CartoDB tile layer using Canvas elements, with data loaded from a local JavaScript file containing coordinates and category labels.

Feb 15, 2022
Loading thumbnail…

CSS Grid work

This example demonstrates a CSS Grid layout using four colored panels arranged in an asymmetric pattern within a full-viewport section. The grid defines named areas—left, center, centerone, and right—to position the crimson divs across rows and columns with gaps. It uses pure CSS grid-template-areas and grid-template-rows to control the layout, while the HTML page includes no JavaScript or external frameworks. The visualization highlights how grid-area assignments and fractional row units (1fr) create a responsive, non-uniform structure.

Sep 28, 2021
Loading thumbnail…

d3-v7 template

This example demonstrates a minimal setup for the latest version of the d3 library, d3.v7, loaded from a CDN, and uses the `d3.min` aggregation function to compute the minimum of an array of values derived from an arithmetic expression. The console output shows both the loaded d3 object and the calculated result, serving as a basic template for initializing a d3 visualization project. The code is housed in an index.html file that loads a separate bundle.js script, with the main logic concentrated in that JavaScript file.

Jul 29, 2021
Loading thumbnail…

Local Storage Example

This example demonstrates how to persist and retrieve user input across page reloads using the Web Storage API. It shows a text input and button that save a name to `window.localStorage`, then restore that value when the page is reloaded. The code also illustrates storing and retrieving structured JSON data, including updating nested objects and converting them back to strings for storage. The interface is plain HTML and JavaScript, with no external visualization libraries.

Nov 24, 2020
Loading thumbnail…

React + D3 Hooks template

A scatter plot visualizes student eye colors, encoding each color's red, green, and blue components along the x and y axes while using circle area for blue intensity. The React component uses the `useEffect` and `useRef` hooks to integrate D3 v5, loading eye-color and gender data from a GitHub gist. D3 scales map RGB values to pixel coordinates, and animated transitions with `d3.easeBounce` adjust circle positions and radii over 1.5 seconds.

Nov 23, 2020
Loading thumbnail…

React + D3 Class template

A React class component wraps a D3.js scatterplot that visualizes student eye colors from a JSON dataset. The plot initially renders circles at raw red and green color values, then transitions them to scaled positions using `d3.scaleLinear` and animates their radius based on blue intensity. The code filters and parses hex color data into RGB components with `d3.json`, and uses SVG circles with `transition.attr` for the animated scaling.

Nov 22, 2020
Loading thumbnail…

Exploring RDW data - Basic chart with filtering

This example visualizes parking facility capacities from RDW data as a bar chart, with each bar representing a location. A checkbox filters out entries with unknown capacity, dynamically updating the chart. Built with D3 v6, it uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and SVG for rendering. The code loads local JSON data and demonstrates interactive filtering through D3’s selection and update patterns.

Nov 12, 2020
Loading thumbnail…

Exploring RDW data - Basic chart

This example visualizes parking facility capacities from RDW data, showing a bar chart of locations with their available parking spots. The chart uses a bar for each facility, with the y-axis representing capacity and the x-axis showing location descriptions. It demonstrates a workflow for handling potentially messy data, including a data preparation step that extracts relevant fields. The visualization is built with D3 v6, using `d3.scaleBand` and `d3.scaleLinear` for scales, and renders bars as SVG rectangles. Local test data is used by default, with an option to fetch live data from the RDW API.

Nov 10, 2020
Loading thumbnail…

Exploring survey data interactively - both axes

This interactive bar chart lets users explore survey data by changing both axes through dropdown menus. Selecting a variable re-nests the data using `d3.nest()` and updates the scales, axes, and bars with the general update pattern, including explicit enter, update, and exit selections. The visualization uses D3 v5 to render SVG elements, with data loaded from a JSON endpoint. The y-axis displays aggregated metrics like averages or totals computed via `d3.mean` and `d3.sum`, while the x-axis groups respondents by categorical fields.

Nov 10, 2020
Loading thumbnail…

Exploring RDW data - Preparing data for Viz

This example explores Dutch RDW parking facility data by fetching an overview of locations and then retrieving detailed information for the first ten facilities. The visualization prepares data for a bar chart by logging unique values for fields like limited access, while commenting on future steps for scales, axes, and bars. It uses d3.json with a CORS proxy to access the external API, chains Promises with Promise.all, and relies on D3 v6 for SVG rendering and data manipulation.

Nov 10, 2020
Loading thumbnail…

Exploring survey data interactively - d3V6

An interactive bar chart displays survey data grouped by study preferences, letting users select from a dropdown menu to change the y-axis variable. The visualization updates scales, axes, and bar heights dynamically as users explore metrics like average height, stress, or sibling counts. Using d3.rollup to aggregate data and the general update pattern with enter and exit selections, the chart re-renders smoothly. The SVG-based visualization loads JSON survey data and generates dropdown options automatically from dataset fields.

Nov 9, 2020
Loading thumbnail…

Loading CBS data

This example demonstrates how to load and parse a semicolon-delimited CSV file from a remote URL using D3 v6. It fetches age-related statistics from a CBS dataset via `d3.dsv` with a semicolon delimiter, then logs the parsed data array to the browser console. The page displays a large title but no visual chart, focusing instead on the data-loading and parsing workflow. The code relies on D3’s promise-based `d3.dsv` method and the `then` callback to handle the asynchronous response.

Nov 4, 2020
Loading thumbnail…

Combining data from multiple fetches d3

This example demonstrates how to coordinate multiple asynchronous data fetches in D3.js by combining parking facility data from two separate RDW API endpoints. It uses the `d3.json` method with a CORS proxy URL to retrieve both datasets, then employs `Promise.all` to wait for both fetches to complete before processing the combined results. The code logs the overview of parking locations, selects the first ten facilities, and matches them with their corresponding data sources. The visualization itself is minimal, displaying only console output rather than rendered graphics.

Nov 3, 2020
Loading thumbnail…

Exploring survey data interactively - y-axis

An interactive bar chart explores survey data by letting users select a y-axis variable from a dropdown menu, redrawing bars and axes accordingly. The x-axis groups students by subject interest, while the y-axis displays metrics like average height, stress, or expenses, computed from the raw survey data. Built with D3 v5, it uses the general update pattern to dynamically update scales and SVG elements. The dropdown options are generated via a data join, and D3's `d3.nest()` and `d3.mean()` prepare the aggregated values.

Nov 3, 2020
Loading thumbnail…

D3 map

D3 map visualizes museum object locations on a natural Earth projection, plotting over 1,500 coordinates from a SPARQL query against the Network Digital Heritage dataset. The map renders countries as goldenrod paths using `d3.geoPath` and `topojson.feature`, then animates white circles bouncing onto each location with staggered `transition.attr` delays. Built with d3.v5 and SVG, it uses `geoNaturalEarth1` for projection and fetches live JSON data from the dataset endpoint.

Nov 2, 2020
Loading thumbnail…

Bind data to html with d3

This example demonstrates how to bind external JSON data to SVG elements using D3. The code loads eye color and gender data from a GitHub gist, filters and transforms the entries into valid hexadecimal colors, then sorts them by blue channel value. It binds the data to circles, positioning them horizontally based on their index and coloring each fill with the corresponding eye color. The example uses `d3.json` for data loading, `d3.select` for DOM selection, and the data join pattern with `enter()` and `append()` to create circles without using any scales.

Oct 30, 2020
Loading thumbnail…

SVG text experiment - Interactive tool

This interactive tool arranges text cards around a central, dynamically generated phrase, drawing words from a CSV taxonomy of themes like body, material, and action. Users can adjust settings such as card count, theme, and pattern to remix content in real time. The visualization uses D3.js to load data, render SVG, and transition text, while GSAP’s TimelineMax and TextPlugin handle card rotation and path-based text animation. Center text updates recursively via D3 transitions, creating a generative brainstorming interface.

Oct 30, 2020
Loading thumbnail…

Live API + d3 coding for fame

This example fetches live parking location data from the RDW open data API and processes it using custom JavaScript functions. It loads JSON from the endpoint `https://opendata.rdw.nl/resource/t5pc-eb34.json`, extracts values from columns such as `areaid` and `usageid`, and lists unique values or counts empty entries in the arrays. The page displays a large text label reading "Hello Js" and relies on a bundled script (`bundle.js`) with no D3 or other visualization library; it only demonstrates API fetching and array manipulation.

Oct 29, 2020
Loading thumbnail…

Live API coding for fame

This example demonstrates how to fetch and explore parking-location data from the RDW open-data API, logging unique area and usage identifiers to the console. It uses the Fetch API to retrieve a JSON endpoint (`https://opendata.rdw.nl/resource/t5pc-eb34.json`), then maps over the objects to extract values from specific columns. Custom functions filter the data, list unique values, and count empty strings, revealing data-quality issues and the diversity of geographic regions and usage types.

Oct 27, 2020
Loading thumbnail…

Some refactored API live coding

This example demonstrates a live-coded workflow for inspecting and cleaning data from the Dutch government’s open-data API for road traffic information, accessed via the `fetch` API. It fetches JSON from the RDW endpoint, extracts values from a specified column (`areaid`), and then logs unique values and filters entries containing “WEST” using standard JavaScript array methods. The code shows a step-by-step refactoring process, with console output at each stage, but does not render a visualization. It uses no external libraries, relying solely on native JavaScript functions like `Set` for deduplication.

Oct 27, 2020
Loading thumbnail…

Js template

This example demonstrates a minimal JavaScript project setup, displaying the static text "Hello Js" in a large, centered font on a plain webpage. The page's appearance is controlled by a `style.css` file that applies 13em font sizing and center alignment to the body element. The JavaScript component, loaded via `bundle.js` from `index.js`, executes a single `console.log` statement to confirm that the code is running. The example uses no external libraries or APIs, relying solely on vanilla HTML, CSS, and JavaScript to show a basic template structure.

Oct 27, 2020
Loading thumbnail…

React + D3 experiment

A scatterplot maps eye-color and gender data from a JSON file, plotting red and green color components on the x- and y-axes. The visualization animates circles into place using D3 transitions with a bounce easing function, while circle size encodes the blue component. Built as a React experiment, the example wraps only the root SVG element in React, leaving all sub-elements to D3 v5. The code uses `d3.json`, `d3.select`, `d3.scaleLinear`, and `transition.attr` methods to render and animate the SVG.

Sep 10, 2020
Loading thumbnail…

SVG text experiment - Generative poetry restructured

This visualization presents a generative poetry interface where users construct sentences by selecting sequential textual dimensions from dropdown menus. The system loads word categories from a CSV file via `d3.csv` and dynamically creates dropdown menus using D3’s selection and data-binding methods. Each sentence selects random words from the chosen categories, with a length adjustable through an input field. The interface renders twenty generated sentence variations in HTML paragraphs, producing associative, often thought-provoking lines from the taxonomic word data.

Jul 17, 2020
Loading thumbnail…

SVG text experiment - Animating texts using d3+Greensock

Eight cards containing associative words and short texts orbit a central call to action on a dark background. The words “Body,” “Audience,” and “Precarity” repeat with varying prose, each card’s text tracing a rectangular path via SVG `<textPath>` elements. Using d3.v5 for dynamic SVG creation and Greensock (GSAP) for animation, the text strokes sequentially into view from a hidden start offset, with `gsap.from` controlling the `startOffset` attribute per card. The final invitation fades in after all cards finish animating.

Jul 15, 2020
Loading thumbnail…

SVG text experiment - Text along multiple paths using GreenSock

A short, looping animation moves the word "served" along a rectangular path rendered in an SVG. The path is drawn using `d3.path().rect()` and attached to the text element via an `href` reference, while GreenSock's `gsap.from` with an `attr` tween animates the `startOffset` attribute of the `textPath` from 100% to 0%. The example demonstrates combining d3 for path construction and SVG creation with GreenSock for attribute-based animation, all within a fixed 1000x500 viewBox.

Jul 8, 2020
Loading thumbnail…

SVG text experiment - Generative poetry

This interactive tool generates poetic sentences based on a taxonomy of word meanings across dimensions like time, body, emotion, and communication. Users select a sequence of dimensions via dropdown menus, set sentence length, and adjust an accepted meaning level. The interface uses d3.csv to load the data, and d3 selections to bind options, handle change events, and append generated sentences as paragraph elements.

Jun 24, 2020
Loading thumbnail…

Exploring survey data interactively - new join() version

This interactive bar chart explores survey data, allowing users to select different variables for both the x and y axes via dropdown menus. It visualizes average values like height, stress, and family size, grouped by categorical preferences. The visualization uses D3 v5’s `join()` method to handle enter, update, and exit selections, dynamically updating scales, axes, and bar positions. Data from a JSON file is cleaned and nested using `d3.nest()` with rollups.

Jun 24, 2020
Loading thumbnail…

SVG text experiment - Generative poetry -3

This interactive text generator lets users compose poetic sentences by selecting consecutive semantic dimensions from dropdown menus. The interface displays twenty generated word sequences, each built by randomly picking words from a taxonomy CSV file that match the chosen dimensions. The example uses d3.csv to load the data and d3.select with method chaining to dynamically populate select elements and render output paragraphs. Words are filtered through JavaScript array methods like filter and includes based on their assigned dimension categories.

Jun 23, 2020
Loading thumbnail…

SVG text experiment - Text along multiple paths

An interactive SVG experiment renders user-supplied text along a closed rectangular path, using the @svgdotjs/svg.js library to construct the drawing. Typing in the input field updates the text via a keyup listener that calls customTextPath.tspan(). The display shows a static pink text block, while commented-out code hints at attempted animation of text along Bézier curves but remains inactive. The visualization explores the limits of automated text placement on multiple geometric paths.

May 29, 2020
Loading thumbnail…

SVG text experiment - Text along a complex path

SVG text experiments place a poem along an irregular, hand-drawn path using the svg.js library. The custom path, defined with string commands, guides the red text, which users can edit via an input field, triggering a keyup event to update the tspan elements. The piece explores text orientation along complex geometric shapes and animation possibilities within an art project context.

May 22, 2020
Loading thumbnail…

Js-Bootcamp Livecode - February 5th 2020

This example demonstrates JavaScript object and array mutability, scope, and hoisting concepts through live code examples. It uses native JavaScript objects, arrays, and console logging to illustrate dot and bracket notation for property access, alongside `Object.entries()` for iteration. The code shows global versus function scope with `var`, `let`, and `const`, and explains hoisting by logging a variable before its declaration. The accompanying `index.html` loads a `bundle.js` for execution.

Apr 23, 2020
Loading thumbnail…

three.js webgl - simple text from json

This example renders the text "Three.js\nStroke text." as 3D geometry in a WebGL scene using Three.js. A `FontLoader` loads a typeface JSON file containing glyph outlines, from which `generateShapes` creates filled shapes with semi-transparent material and stroked outlines with darker material. The scene includes an `OrbitControls` camera for interactive rotation and a light gray background. The rendering highlights both the filled and stroked paths of each character.

Apr 13, 2020
Loading thumbnail…

Js app without modules

This example demonstrates a two-level single-page application without any module system, using plain JavaScript and XMLHttpRequest. Clicking a todo item in the overview renders its detail view, and clicking the detail title returns to the list. The app routes between overview and detail states via object-literal methods for routing, API calls, and rendering, fetching data from the JSONPlaceholder API. Global state is limited to a few object literals, with the DOM fully rebuilt on each render.

Feb 15, 2020
Loading thumbnail…

Js app without modules

This example demonstrates a two-level single-page application without any module system, using plain JavaScript and XMLHttpRequest. Clicking a todo item in the overview renders its detail view, and clicking the detail title returns to the list. The app routes between overview and detail states via object-literal methods for routing, API calls, and rendering, fetching data from the JSONPlaceholder API. Global state is limited to a few object literals, with the DOM fully rebuilt on each render.

Feb 11, 2020
Loading thumbnail…

Js xhr test

This example tests the behavior of the JavaScript `XMLHttpRequest` object inside a React environment, rendering a single "Hello Js" message in large text. The code attempts two approaches: one creates an `XMLHttpRequest` and accesses a nested `.xhr` property, while the other directly instantiates it. Each instance has a `load` event listener added, though the page displays no data loading or visualization output. The example uses plain HTML, CSS for styling, and vanilla JavaScript with no external libraries like D3 or React components.

Feb 11, 2020
Loading thumbnail…

Untitled

This example demonstrates a single-page reference guide for Chrome DevTools, organized into sections covering the Network tab, Console, Debugger, and common error-handling practices. It uses the `routie` hash router to map URL fragments to corresponding sections, logging each route change to the browser console via `console.log`. The page is built with plain HTML and vanilla JavaScript, featuring anchor links for navigation and a "Back to top" link for each section.

Feb 10, 2020
Loading thumbnail…

Requesting data from the Github API

This example demonstrates a simple user-driven data request to the Wikipedia API. It shows how a text input and submit button trigger a `fetch` call to the opensearch endpoint, retrieving and displaying search results based on the submitted subject. The code uses the browser’s built-in `fetch` API to request JSON data, then logs the response and result titles to the console via chained `.then()` promises. The interface includes a loader placeholder and a result article, though the visible rendering of the results is minimal, focusing on the request-response flow.

Feb 4, 2020
Loading thumbnail…

Requesting data from the Github API

This example demonstrates the complete workflow of fetching repository data from the GitHub API and rendering it as an HTML list. It uses a raw XMLHttpRequest to request JSON from `https://api.github.com/users/razpudding/repos`, parses the response with `JSON.parse`, and then dynamically creates a `<ul>` element with `<li>` items for each repository name using the DOM methods `document.createElement` and `appendChild`. The visualization highlights the data pipeline from an asynchronous API call to interactive webpage content.

Feb 4, 2020
Loading thumbnail…

A special scatterplot with d3

This scatterplot visualizes survey responses on police contact, split into two groups based on whether respondents initiated contact or were approached by police. Each country appears as a distinct color, with circles positioned along the x-axis by rapportcijfer (1–10) and separated vertically per country. Circle size encodes the percentage of respondents giving each rating. The visualization uses d3.json to load data, d3.nest for aggregation, d3.scaleLinear for axes, and d3.scaleOrdinal with d3.schemeDark2 for colors, rendering circles as SVG elements.

Jan 27, 2020
Loading thumbnail…

An experiment with flags in svg elements

This example demonstrates how to scale flag images inside SVG elements using D3. A single circle is rendered and filled with a flag pattern sourced from the country-flags GitHub repository, using the Mexican flag’s PNG image. The code employs D3 selections to create a `<pattern>` element and an `<image>` inside a `<defs>` block, then applies the pattern as the circle’s fill. The `patternUnits` attribute is set to `objectBoundingBox`, allowing the flag to scale with the circle’s size.

Jan 8, 2020
Loading thumbnail…

Visualizing transformed data

The example displays a world map with animated, color-coded circles representing cultural heritage object locations, grouped per country through nested data. It uses d3.json to fetch SPARQL query results and TopoJSON world atlas data, then transforms raw bindings via d3.nest. Circles are rendered as SVG with d3.geoPath projections and animated using transition.attrTween-like easing, while color scales from d3.scaleOrdinal.

Nov 25, 2019
Loading thumbnail…

An interactive D3 map

An interactive orthographic world map visualizes geographic data from a SPARQL endpoint, plotting museum object locations as bouncing circles. The map rotates perspective using an orthographic projection, with countries rendered as goldenrod paths via `d3.geoPath` and TopoJSON data. Circle markers animate in sequentially with `transition.delay` and `d3.easeBounce`, while a black sphere backdrop highlights the globe's curvature. The visualization combines `d3.json` for map loading, `fetch` for querying the endpoint, and D3 v5's selection and transition APIs to create an engaging data-driven globe.

Nov 14, 2019
Loading thumbnail…

Transforming data using d3

This example demonstrates how to clean, group, and enrich SPARQL query results about ethnographic artefacts. It loads data from a Dutch heritage endpoint using `d3.json`, maps each row to extract plain values with `cleanData`, then applies `d3.nest()` to group artefacts by their parent country. For each country group, it calculates the total count of artefacts as a new `amount` property. The code uses d3 v5 APIs such as `d3.nest()` and `d3.json`, and logs the raw, cleaned, and transformed data to the console for inspection.

Nov 13, 2019
Loading thumbnail…

Make a scatterplot with d3

This scatterplot visualizes the relationship between the red and green color components of eye colors from a JSON dataset, with each circle's size representing the blue component. Initially, circles are positioned at raw values before animating to their scaled positions on a linear 0–255 axis. The example uses D3 v5 to fetch data via `d3.json`, mutates it with custom parsing functions, then renders SVG circles with `d3.select`, `scaleLinear`, and a `transition` with easing to animate the points.

Nov 13, 2019
Loading thumbnail…

Dashboard for ethnographic data

This dashboard demonstrates how a Vue instance and its components dynamically generate a theme list and detail pages from ethnographic data stored in a SPARQL endpoint. It uses the Nationaal Museum van Wereldculturen (NMVW) dataset, fetched via `fetch` with encoded queries, and renders clickable themes and linked resources. Vue’s conditional rendering switches between overview and detail views without routing, while d3.js is not directly employed in the visible code; instead, Vue binds data to HTML elements through templates like `v-for`.

Nov 12, 2019
Loading thumbnail…

Convert csv to json using d3

This example demonstrates converting a CSV file into JSON using the D3.js library. It loads survey data from a GitHub gist, transforms each row into an object containing the properties "broers" and "zussen", and logs the resulting JSON array to the browser console. The code uses d3.csv with a row-accessor function to parse and reshape the data. The page displays the title "Convert csv to json using d3" with no visual chart, focusing solely on the data conversion process.

Nov 7, 2019
Loading thumbnail…

Loading data through SPARQL

This example demonstrates how to query a live SPARQL endpoint using d3.json, fetching up to 1000 records created in 1893 from the Dutch Network of Digital Heritage. The results are displayed as raw JSON text in a paragraph element. The code encodes a SPARQL query with encodeURIComponent and appends it to the endpoint URL, then parses the response with d3’s JSON loader. It relies on d3.v5 and the public API endpoint, which must remain active for the example to function.

Oct 16, 2019
Loading thumbnail…

Customizing Axes

This bar chart ranks fifteen European countries by speed camera density, showing cameras per 1,000 square kilometers, with Belgium leading and Spain trailing. The visualization customizes its axes by removing domain lines and tick marks on the y-axis, adding a formatted x-axis with abbreviations (e.g., "67" becomes "67.0"), and including a title and axis label. Built with D3 v5 using `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`, the SVG renders steel-blue rectangles from CSV data sourced from a tweet.

Oct 4, 2019
Loading thumbnail…

Scatterplot - Events in Amsterdam

This scatterplot visualizes event locations across Amsterdam on latitude and longitude axes, with circles colored by category such as museums, parks, and beaches. Hovering over a circle reveals the event name in a tooltip and updates a preview image from the data. A legend allows filtering by category, while zooming adjusts the dot size. The visualization uses D3 v5 with SVG rendering, an ordinal color scale from `d3.schemePaired`, and d3.zoom for interaction, loading data from a JSON file containing multilingual event descriptions.

Sep 17, 2019