Tobi Olabode

@tobiolabode·14 public vizzes

D3 Selection Exploration V2

This example demonstrates D3’s data-join and selection methods by animating a set of circles that change position and radius over time. The visualization uses `d3.select` to target a container, `selection.data` with a `.join('circle')` pattern to bind and update SVG elements, and a `setInterval` loop to continuously feed new data generated by `scaleLinear` and trigonometric functions. The code relies on D3 v6.6.2’s `selectAll`, `attr`, and `range` APIs, rendering smooth motion without explicit transitions.

Nov 9, 2023

Loading thumbnail…

Fork of D3 Selection Exploration

A set of animated circles moves across the screen, their sizes and vertical positions oscillating as they continuously change color between magenta and cyan. The visualization uses D3 selections and data joins to bind generated data to SVG circle elements, updating their positions and radii every frame. Color changes are driven by chained D3 transitions with easing functions, where each circle alternates between the two colors through nested transition callbacks, creating a continuous feedback loop of color swaps.

Nov 9, 2023

Loading thumbnail…

Rainbow Circles

This example demonstrates how a VizHub project can integrate D3.js with local ES6 modules. It uses D3’s `select` function to display a text message in a `div` element, while importing a string constant from a separate `myMessage.js` module. The code includes a simple regex pattern and numeric variable, though these do not affect the visible output. The page renders a single large greeting, showcasing basic DOM manipulation and module importation within the D3 v5 framework.

Nov 8, 2023

Loading thumbnail…

Data Update Section

A grid of blue circles continuously updates in real time as their vertical positions and radii oscillate based on a sine wave function. The animation runs at 60 frames per second via a JavaScript `setInterval`, with each frame regenerating the dataset using `makeData` and passing it to `vizData`. D3 v5 handles the data join and SVG rendering, while the circles cycle through magenta and cyan color transitions using chained D3 transitions with ease functions. The example demonstrates dynamic data binding and stateful animations with ES6 module imports.

Nov 8, 2023

Loading thumbnail…

Full Sol LeWitt in d3 v3

This example renders a generative geometric composition using D3 v5, creating a grid of horizontal and vertical rectangles that are masked to reveal two contrasting overlays. The code builds an SVG canvas sized to the browser window, uses `d3.range` to generate 100 rectangles in each direction, and applies `d3.symbol` paths (including a triangle) as masks to selectively show or hide the grid lines. It demonstrates the use of `d3.select` for DOM manipulation and local module imports to organize code.

Nov 7, 2023

Loading thumbnail…

Full Sol LeWitt in d3 v2

This example recreates a Sol LeWitt drawing as a grid of thin horizontal and vertical lines, with two circular masks revealing different layered compositions. The code builds an SVG scene using D3 v5’s `select`, `range`, and `join` to generate the lines, and `symbol` with `symbols[5]` to create the triangle-shaped masks. It demonstrates importing from D3 via UNPKG and local ES6 modules, rendering entirely through SVG attributes and mask definitions.

Nov 7, 2023

Loading thumbnail…

Sol LeWitt in d3 v2

This example recreates Sol LeWitt's geometric wall drawings using D3 v5. It creates a grid of intersecting horizontal and vertical rectangles on an SVG canvas. Two SVG masks define a circular window, with one mask inverting the other, revealing the line intersections within the circle. The code uses D3's `select`, `range`, and data join operations to generate the 100 rect elements per axis, with dimensions tied to the browser window.

Nov 6, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, layering horizontal and vertical striped rectangles on an SVG canvas. The composition uses two masks with inverted circle shapes to create a central circular cutout, revealing the grid-like pattern of 100-pixel stripes. The code employs D3’s `select`, `range`, `append`, and `join` APIs to generate the SVG elements dynamically, with masks defined via `mask` and `circle` elements. The artwork spans the full browser viewport, adapting its size to the window dimensions.

Nov 6, 2023

Loading thumbnail…

Sol LeWitt in d3

This example recreates Sol LeWitt’s geometric wall drawings using D3 v5, rendering a grid of horizontal and vertical black rectangles on an SVG canvas. The code employs the `select` and `range` functions from D3 to generate 100 line segments in each direction, while two SVG masks—each containing a white circle—reveal only the portions of the rectangles that fall within the circular boundaries. The visualization uses `join` to efficiently build the rectangles and applies the masks via the `mask` attribute, producing intersecting line patterns that interact with the circular cutouts.

Nov 6, 2023

Loading thumbnail…

Sol LeWitt in Vanilla V2

This example creates a dynamic SVG composition inspired by Sol LeWitt, using D3.js to render a grid of black vertical stripes that are masked by a circular aperture. The visualization imports only the `selection` API from D3, while manually constructing SVG elements—such as the mask, circle, and rectangles—via the native DOM interface. It draws 100 vertical bars across the canvas, each masked to a centered circle, and overlays horizontal lines computed from the same loop. The piece explores generative patterns through algorithmic geometry, with the mask controlling the visible form.

Nov 6, 2023

Loading thumbnail…

Sol LeWitt in Vanilla JS

This example recreates Sol LeWitt’s geometric wall drawings using only vanilla JavaScript and SVG, with no external libraries. It generates a series of lines and shapes directly in the DOM via `document.createElementNS` to build an SVG canvas. The code demonstrates manual SVG construction by creating a root `svg` element, appending a background `rect`, and drawing minimal geometric forms. It highlights fundamental browser APIs for creating and manipulating SVG elements without D3’s helper functions.

Oct 28, 2023

Loading thumbnail…

Pseudo Visualizations Tutorial

This example demonstrates a minimal static SVG composition featuring black geometric shapes and a thick polyline over a white background, serving as a tutorial for basic D3.js and ES6 module usage. The visualization is built with an SVG viewBox of 1512×982, rendering through D3 v5 loaded via UNPKG. The code imports the `select` function from `d3` and a local `message` string, but focuses on showcasing simple SVG elements like rectangles, circles, and paths with large stroke widths.

Oct 25, 2023

Loading thumbnail…

Fork of Fork of SVG Fundamentals Sunset/Sunrise

A looping SVG animation depicts a sunset and sunrise over a stylized landscape. The sun moves vertically against a sky that transitions from aliceblue to indigo, while layered green and orange landmasses shift in color. Built with raw SVG elements—including `<radialGradient>`, `<linearGradient>`, `<circle>`, and `<path>`—the scene uses `<animate>` tags to cycle attribute values over 15 seconds, creating a continuous day-night effect.

Oct 25, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, lines, and paths, rendered on a 1000x1000 canvas. The visualization uses static, hard-coded coordinates and attributes to show basic vector graphics primitives with varied fills, strokes, and sizes. The code relies on SVG markup within the HTML structure, while the accompanying JavaScript imports D3’s `select` function to update a message element. It also showcases local ES6 module imports, highlighting how VizHub integrates D3 via UNPKG with modular code.

Oct 25, 2023