B

Bart van Pelt

@bvpelt·34 public vizzes

Loading thumbnail…

Test

This example demonstrates a hierarchical breakdown of content from level 1 down to level 5, using nested HTML divs and heading tags to visually represent document structure. The page renders static, vertically stacked sections, each labeled with its corresponding level number and text. The implementation relies on plain HTML markup within the body, while the `index.html` file includes a reference to the D3.js library (version 7) via a CDN link, although no D3 functions or data manipulation are actually invoked in the visible code. The styling is minimal, with no margins or scrolling enabled on the body.

Loading thumbnail…

Simple rect

Animated SVG rectangles appear in horizontal rows and grow to random heights and colors at regular intervals, then shrink and disappear. The visualization uses the d3 library’s `select`, `transition`, and `range` APIs to manage the lifecycle of each rectangle. Data is generated procedurally with JavaScript’s `setInterval` and `Math.random`, creating a constantly updating bar-like chart. The code defines a reusable `timePlot` function that handles enter, update, and exit states for smooth transitions.

Loading thumbnail…

SVG Fundamental - Sol Lewitt

This example generates an abstract, animated composition inspired by Sol LeWitt, built entirely with raw SVG and JavaScript. It creates two circular masks, each containing a circle whose radius animates over 15 seconds, and applies them to groups of rectangles that rotate continuously. The code uses the SVG `circle`, `rect`, `mask`, `animate`, and `animateTransform` elements to cycle colors between black and white and rotate the shapes 360 degrees. No external libraries are used; the visualization directly manipulates the DOM via `document.createElementNS` to construct the scene dynamically.

Loading thumbnail…

Scatter Plot episode 12

This interactive scatter plot visualizes the Iris dataset, letting users switch the x and y axes via dropdown menus. D3 v6 selection joins animate circles with staggered delays as axes and point positions update. The chart uses d3.scaleLinear for quantitative columns, d3.scalePoint for categorical species, and transitions to smoothly grow and reposition SVG circles.

Loading thumbnail…

Quantatieve vs Categorical

An interactive scatter plot compares food products by quantitative attributes like carbohydrates, fat, and calories, sourced from koolhydraten.nl. Dropdown menus let users switch the x- and y-axis variables or filter by product, and the plot animates transitions between selections using D3 v7 transitions. The visualization uses `scaleLinear` and `scalePoint` to handle quantitative and categorical dimensions, rendered as SVG circles with tooltips showing product details.

Loading thumbnail…

ChatGPT

This bar chart displays COVID-19 death counts by country, using rectangular bars sized proportionally to each nation’s reported deaths. The code loads data from `deaths.csv` via `d3.csv`, then uses D3’s selection methods (`selectAll`, `data`, `enter`) to append SVG `rect` elements and `text` labels. Bar heights are scaled against the maximum death value, with labels positioned at each bar’s base. The visualization reads a local CSV file and renders entirely as SVG, with styling defined in an inline HTML stylesheet.

Loading thumbnail…

Start WorldMap

A world map rendered with `d3.geoMercator` displays country boundaries from a TopoJSON file. Red circular markers and city name labels are projected onto the map from a `cities.csv` dataset, with each marker linking to a Google search for its city. The map supports interactive pan and zoom through `d3.zoom`, applying the zoom transform to all paths, circles, and text elements. The SVG visualization uses `d3.json`, `d3.csv`, `d3.geoPath`, and the TopoJSON `feature` method to convert the topology into geographic features.

Loading thumbnail…

Added timescales Quantatieve vs Categorical

This interactive scatter plot visualizes Dutch housing market data from CBS Statline, comparing price indices, sales volumes, and average prices for new and existing homes from 2015 to 2022. Users can select any quantitative or categorical variable for the x- and y-axes via D3 menus. The visualization handles mixed data types using `d3.scalePoint` for categorical variables and `d3.scaleLinear` for quantitative ones, with smooth transitions via `selection.join` and `transition.attrTween`. Circles are drawn as SVG elements with animated radius growth on entry and exit.

Loading thumbnail…

Fork of Scatter Plot World Heritage List

This interactive visualization explores the UNESCO World Heritage list, displaying each heritage site as a colored dot representing its continent. Users can switch the x- and y-axes between longitude, latitude, continent, and inscription date using custom dropdown menus. The scatter plot uses D3 scales, transitions, and SVG circles to animate position and radius changes when axes are updated, revealing geographic clustering and regional distributions across continents.

Loading thumbnail…

Quantatieve vs Categorical

This interactive scatter plot explores the relationship between quantitative and categorical variables from Dutch housing market data, showing how visual encoding changes based on data type. Users select columns for the x- and y-axes via dropdown menus, with categorical values positioned using `d3.scalePoint` and quantitative values using `d3.scaleLinear`. Points animate smoothly between configurations using `selection.join` with `transition`. The plot renders as SVG using D3 v7, drawing from CBS Statline data on house prices and sales volumes across new and existing properties.

Loading thumbnail…

Menus for Animated Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically change which attributes are mapped to the X and Y axes via HTML dropdown menus. The plot animates transitions between states, smoothly moving circles and updating axis labels when the selected variables change. Built with D3 v6, the example demonstrates a reusable chart architecture using custom components like `scatterPlot` and `menu`, leveraging D3's `dispatch` for event handling and `transition` for smooth animations.

Loading thumbnail…

Exercise 9 Animate Dynamic D3 scatterplot

This example shows an animated scatterplot of the Iris dataset, cycling through different numeric columns on the x-axis every three seconds. The code uses D3 v7 with SVG rendering and the `selection.join` pattern to handle enter, update, and exit transitions. Circles enter by growing from radius zero, update their positions via synchronized `transition` objects, and exit by removal. The x-axis and label also animate through D3 transitions, while scales use `d3.scaleLinear` and axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Exercise Animate Dynamic D3 scatterplot

This interactive scatterplot animates through different iris flower measurements every three seconds, cycling between petal width, sepal width, petal length, and sepal length on the x-axis. Using d3.v7 with SVG rendering, circles smoothly transition positions via `selection.join`, which handles entering circles that grow from radius zero, updating circles with delayed staggered transitions, and removing exiting circles. The x-axis and its label also animate simultaneously using `transition().duration(3000)`. The iris dataset is loaded as CSV and parsed into numeric values for visualization.

Loading thumbnail…

Fork of Fork of Fork of Time series - labels - change x,y experiment ticks

This visualization displays temporal database relationships from Snodgrass’s SQL model, using rectangles to map validity and registration intervals on dual time axes. D3 v7’s `scaleTime`, `axisLeft`, and `axisBottom` render the SVG graph, while custom tooltip handlers on mouse events reveal date details. The code derives adjusted end dates for open intervals and computes rectangle widths and heights from the scale domains. Data originates from static JavaScript arrays with ISO date strings, parsed into `Date` objects for plotting.

Loading thumbnail…

Animate Dynamic D3 scatterplot

This example animates a dynamic scatterplot of the classic Iris flower dataset, cycling through different x-axis attributes every three seconds. The visualization uses D3 v7 with an SVG rendering approach, where circles represent data points and smoothly transition their positions and opacity using the `selection.join()` pattern for enter, update, and exit states. Axes update in sync using `axisBottom` and `axisLeft`, while all animations are coordinated through D3's `transition()` with a three-second duration. The code relies on `scaleLinear` and `extent` to map data values to pixel coordinates within the specified margins.

Loading thumbnail…

Dynamic D3 scatterplot

This dynamic scatterplot animates through different variable combinations from the Iris dataset, cycling every two seconds between four attribute pairings. Each transition re-maps the x-axis to a new column while keeping sepal length on the y-axis, with the circles smoothly repositioning to reflect the changing correlations. Built with D3 v7, the visualization uses the `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` functions from the `d3` import, along with a custom scatterPlot module that handles the SVG rendering via the `.join()` pattern for efficient updates. The animation is driven by `setInterval` in the main script, which alternates the x value function and re-invokes the plot.

Loading thumbnail…

Fork of Fork of Time series - labels - change x,y

This visualization plots time-series data as rectangles on a two-dimensional time grid, where the x-axis represents registration times and the y-axis represents validity periods. Each rectangle encodes a versioned data entry with its start and end dates, and hovering reveals a tooltip with detailed timestamp information. The implementation uses D3 v7 with SVG rendering, including scaleTime, axisLeft, axisBottom, and mouse event handlers. The data comes from a hardcoded JavaScript array with formatted date strings.

Loading thumbnail…

Fork of Time series - labels

This time-series plot displays the validity and registration periods of four data versions. It uses D3.js to map the temporal intervals to rectangular marks, where the x-axis represents registration time and the y-axis represents validity time. The plot includes date axes, rectangles with tooltips, and computes the maximum date ranges to accommodate open-ended intervals. The code uses D3's scaleTime, axisLeft, and axisBottom functions for layout and rendering.

Loading thumbnail…

Time series

This example visualizes time-series data as rectangles plotted on a time-based scatterplot, showing how tracked values change across registration and validity periods. The visualization maps the start and end of each validity period to the y-axis and the registration timestamps to the x-axis, with open-ended intervals extended by seven days for display. The code uses D3 v7 APIs including `scaleTime`, `axisLeft`, and `axisBottom` to construct the plot, and it processes data from a static JavaScript array, rendering output as SVG in a full-screen view.

Loading thumbnail…

Fork of Time series - labels

This example visualizes temporal data as rectangular marks on a time-based scatterplot, encoding registration and validity periods along the x- and y-axes. Hovering a rectangle displays a tooltip with its associated label value. Built with D3.js (version 7.8.1), the visualization uses `scaleTime`, `axisLeft`, `axisBottom`, and pointer events to map date ranges to screen coordinates. Input data is parsed from ISO date strings into JavaScript `Date` objects. The SVG rendering fills the browser viewport, with rectangles styled via CSS and a custom tooltip appended to the DOM.

Loading thumbnail…

Fork of Reusable D3 scatterplot with symbols

This example presents a reusable D3.js scatterplot that visualizes the classic Iris flower dataset, encoding species with distinct SVG symbols (circles, crosses, and diamonds) via a d3.scaleOrdinal mapping to d3.symbols. The chart maps petal width to the x-axis and sepal length to the y-axis using d3.scaleLinear, with axes generated by d3.axisBottom and d3.axisLeft. The code demonstrates a modular chart factory pattern, where configuration methods like .width(), .data(), and .symbolValue() are chained to customize the plot, following the margin convention and rendering data-loaded CSV values as SVG path elements.

Loading thumbnail…

Fork of Exersice Episode 8 - Scatter plot + tooltips

This scatter plot visualizes nutritional data from koolhydraten.nl, plotting kilocalories on the x-axis against fat content on the y-axis for a range of food products. Each circle represents a product, with native SVG tooltips displaying the product name, carbohydrate, fat, and kilocalorie values on hover. The visualization uses D3 v6 to load the CSV dataset with `d3.csv`, scales the data with `scaleLinear`, and renders the circles and axes via SVG elements. Interactive tooltips are added by appending `title` elements to each circle, providing detailed information without requiring additional DOM manipulation.

Loading thumbnail…

Reusable D3 scatterplot

This example demonstrates a reusable scatterplot component built with D3 v7, plotting Iris flower measurements with petal width on the x-axis and sepal length on the y-axis. The code implements the reusable chart pattern by exposing setter functions like `.width()`, `.data()`, and `.radius()` to configure the component before rendering. It uses `d3.scaleLinear` for axes, `d3.extent` for domains, and `d3.axisLeft` and `d3.axisBottom` for ticks. The data is loaded from a CSV via `d3.csv` and rendered as SVG circles.

Loading thumbnail…

Exersice Episode 8 - Scatter plot

This scatter plot visualizes the relationship between calories (kcal) and fat content (vet) for a dataset of Dutch food products, with each point representing a product from a CSV file. The plot uses D3 v6's `scaleLinear` for both axes and employs the `csv` function to parse data from the external file. Points are rendered as SVG circles, with axes generated using `axisLeft` and `axisBottom`. The code reads product data from 'koolhydrate.csv', which includes columns for carbohydrates, fat, calories, product name, and unit.

Loading thumbnail…

D3 scatterplot

This D3.js v7 scatterplot visualizes the relationship between sepal length and petal length in the classic Iris dataset. The SVG visualization renders circles for each data point, with pixel coordinates mapped from both axes using `scaleLinear` and `extent`. The code loads data from a CSV file via `d3.csv`, parses the numeric columns, and constructs the plot with `axisLeft` and `axisBottom` for the y and x axes respectively. The visualization fills the entire browser window and uses a 24px font size for axis tick labels.

Loading thumbnail…

Javascript build tools

This example illustrates the JavaScript build-tool ecosystem, mapping tools like npm, yarn, rollup, and webpack to their roles as package managers or module bundlers. It uses plain DOM elements and D3 v7’s `select` and `version` to display text, while the underlying code demonstrates module syntax with named and default exports. The visualization’s source files show how `index.js` imports from `something.js` and `thing.js`, and the HTML references a rollup-injected bundle, clarifying how bundlers assemble local packages into browser-ready scripts.

Loading thumbnail…

Test shadow dom

This example demonstrates an attempt to embed a remote web viewer inside a custom HTML element using the Shadow DOM. The page defines a `dso-viewer` custom element that fetches HTML from `https://viewer.dso.kadaster.nl/viewer` and injects the response into its shadow root. The code uses the Fetch API with a `no-cors` mode, though the response is only logged to the console rather than rendered. A large styled message appears above the element, but no actual visualization or data is displayed.

Loading thumbnail…

Fork of D3 selection exploration - seperation of concerns

The visualization demonstrates a separation of concerns between data generation and visual rendering in D3.js. It animates a dynamic set of circles, connecting lines, and bar charts that change position, radius, and color over time. The code separates the `makeData` function, which generates the data, from the `vizData` module, which handles the SVG rendering using D3’s selection API and the newer `.join()` method. This example uses `d3.select`, `d3.range`, and `setInterval` to drive a 60 FPS animation, showcasing loose coupling between data and presentation logic.

Loading thumbnail…

D3 selection exploration

This example demonstrates how D3 selections manage dynamic data updates through animated circles. It uses `d3.select`, `d3.range`, and the selection’s `.data()`, `.join()`, and `.attr()` methods to bind changing arrays of position and radius values to SVG circle elements. A `setInterval` loop updates the data at 60fps, with positions and sizes driven by sine functions, causing circles to appear, disappear, and shift smoothly. The code highlights both loose coupling of data to visual attributes and the modern `.join()` API for enter/update/exit handling.

Loading thumbnail…

Javascript - Arrays

This example demonstrates JavaScript array manipulation techniques using D3 v7 and native console logging. It creates a range of numbers (0–9) through a custom `range` function, then exercises methods including `forEach`, `filter`, `map`, `reduce`, and `sort` with both default and comparator-based behavior. The code logs filtered even numbers, mapped objects, and accumulated sums, while also comparing native array sorting with D3’s `d3.ascending` comparator. The visualization is purely textual, outputting results to the browser console to illustrate array operations in a D3 context.

Loading thumbnail…

Sol LeWitt exercise

This example generates a generative art piece inspired by Sol LeWitt, dividing the viewport into vertical panels whose masks alternate between inverted states. Using D3.js, it creates horizontal and vertical striped rectangles within each panel, with the mask assignments flipping based on whether the panel index is even or odd. The code uses `d3.select`, `d3.range`, and `d3.symbols` to structure the SVG output, rendering lines with `rect` elements and applying SVG masks to vary the pattern visibility across each section.

Loading thumbnail…

Start d3

The visualization creates a full-screen SVG pattern of horizontal and vertical lines, masked by shapes derived from the `d3.symbols` set. Each line is a rectangle positioned by data generated with `d3.range`, and the masks use `d3.symbol` to render glyph-shaped cutouts. The visualization shows the interplay between the line grid and the symbolic mask shapes, which alternate between inverted and non-inverted states. The code uses the `d3` library's `select`, `range`, `symbol`, and `symbols` APIs, along with SVG masks and paths.

Loading thumbnail…

SVG Fundamental

This visualization shows the relationship between registration time and validity time for sequential data versions, displayed as stacked colored rectangles on an SVG canvas. Each version is represented by a distinct color (bisque, peach, coral, and orange), with rectangles positioned to indicate when each version was registered along the x-axis and its validity period along the y-axis. The chart includes labeled axes for both time dimensions, a legend explaining the color-to-version mapping, and axis markers indicating "now" on both timelines. The implementation uses raw SVG elements—including `rect`, `line`, and `text`—styled with inline CSS classes.

Loading thumbnail…

SVG Fundamental

This example demonstrates fundamental SVG drawing and animation techniques within an HTML page. It renders a landscape scene with a moving sun, animated gradient backgrounds, and layered curved landmasses defined by SVG path elements. The code uses native SVG features including `radialGradient` and `linearGradient` definitions, `<circle>`, `<rect>`, and `<path>` elements, and the `d` attribute with commands like `M`, `L`, `Q`, and `C`. Animations are implemented with the `<animate>` element, changing the sun’s `cy` position and color stops over fifteen-second cycles.