M

max-31

@max-31·23 public vizzes

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This example demonstrates a reusable D3 scatter plot that animates through different Iris dataset columns every 2.5 seconds, shifting the x-axis mapping between petal width, sepal width, petal length, and sepal length. It uses D3 version 7 with scaleLinear for axes, axisLeft and axisBottom for rendering ticks, and transition for smooth 1-second animations. Built as a React-compatible module with a configurable scatterPlot function, it loads CSV data via d3.csv, applies SVG rendering, and staggers circle updates with a per-point delay for a cascading effect.

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable D3.js scatter plot component built with React and D3 v7. It cycles through different Iris flower measurements (petal width, sepal width, petal length, sepal length) every two seconds, animating the x-axis while the y-axis remains fixed on sepal width. Using `d3.csv` to load the Iris dataset, it leverages `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render SVG circles and update axes dynamically. The scatter plot’s configuration is managed through getter/setter methods, allowing flexible parameter changes without redrawing the entire visualization.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset from a GitHub gist, mapping petal length against sepal width. Species determine the symbol shape via `d3.scaleOrdinal` and `d3.symbols`. The React-based example uses a reusable `scatterPlot` function with configurable dimensions, margins, and value accessors, rendering axes through `d3.axisLeft` and `d3.axisBottom` into an SVG. Data loads asynchronously with `d3.csv` from a remote URL, with axes and points fully responsive to the window size.

Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris dataset, mapping petal length and sepal width for 150 flowers to SVG circles. It demonstrates the modern d3.select API and the new d3.scaleLinear with extent helper, using d3.csv for data loading, d3.axisLeft and d3.axisBottom for axes, and a direct selectAll and join pattern to bind data to circles. The chart fills the browser viewport and employs consistent 20px tick labels for readability.

Loading thumbnail…

D3 Selection Exercise

This animated visualization demonstrates D3’s data-join and selection pattern by continuously updating a set of circles and connecting lines in an SVG scene. The code uses `selectAll` and `.join()` within `drawCircles` and `drawLines` to bind and update elements based on procedurally generated data from `makeCircleData` and `makeLineData`. Circle positions, radii, and colors oscillate with a time counter `t`, while lines link adjacent circles and inherit their stroke colors. Running at 60fps via `setInterval`, the example highlights how D3 v7’s `range`, `select`, and join methods handle dynamic, frame-by-frame updates in a React context.

Loading thumbnail…

JS in HTML

A minimal HTML page demonstrates dynamic text styling with CSS and JavaScript, rendering a large centered message. The page loads D3 v7 from a CDN and imports modular JavaScript files, including `something.js` and `thing.js`, which export string values logged to the console. D3's `select` function is imported but not used in the visible code, while the CSS `.message` class controls font size and alignment. The example highlights basic integration of HTML, CSS, and ES modules in a bare-bones setup.

Loading thumbnail…

Fork of Fork of D3 Selection

This example displays a set of animated circles moving vertically and changing radius over time, driven by sine functions. The visualization uses D3.js v7 within a React-style structure, with the `vizData` function applying a data-join to update SVG `circle` elements. The animation loops at 60 frames per second via `setInterval`, recalculating positions and sizes based on a time variable. This demonstrates imperative selection and joining techniques on SVG elements, rendering dynamic shapes without external datasets.

Loading thumbnail…

Fork of D3 Selection

This example demonstrates a real-time animated data join using D3’s `select`, `range`, and `selectAll` APIs within a React project. It generates a dynamic set of circles whose positions and radii oscillate based on a time variable, updating at 60 frames per second via `setInterval`. The code explicitly shows both the modern `.join()` method and its equivalent enter/merge/exit pattern, rendering SVG circles with live attributes. The visualization runs in a browser, auto-sizing to the window dimensions, and uses D3 v7.6.1 as its sole external dependency.

Loading thumbnail…

D3 Selection

This example demonstrates a D3 data join, where a set of 15 circles moves vertically in a sine wave pattern across the screen. The animation updates at 60 frames per second, recomputing each circle’s y-coordinate based on time and index. It uses the `select` and `range` functions from D3, along with the `.data()` and `.join()` methods to merge new data into the existing SVG circle elements.

Loading thumbnail…

Fork of 5:08 Exercise So LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt-style geometric drawing by layering horizontal and vertical striped rectangles, masked by three large symbols arranged diagonally. The masks reveal or hide portions of the line grids, creating interlocking shapes against a black-and-white canvas. Built with D3 v7, it uses `select`, `range`, and `symbol` to generate SVG marks, while custom mask elements with inverted fill colors alternate visibility. The code renders directly to the full window size, with no external data source, relying purely on procedural generation and SVG masking techniques.

Loading thumbnail…

JS Array

This example demonstrates a minimal JavaScript array containing a number, a string, and a text value, which is logged to the browser console. It shows how to declare and initialize an array literal and output its contents using the built-in `console.log` method. The implementation uses plain JavaScript within a basic HTML page, with no external libraries or frameworks. The page relies on the browser's developer tools to inspect the array output, as no visual rendering is performed.

Loading thumbnail…

5:08 Exercise So LeWitt Reproduction with D3

A generative art piece reproduces a Sol LeWitt-inspired composition using D3 v7. The visualization renders a grid of overlapping thin rectangles on an SVG canvas, masked by patterns of colored shapes and symbols. It uses `d3.range`, `d3.symbols`, and `d3.symbol` to create the mask elements, with rectangle positions calculated from the window dimensions. The two masks invert their fill colors to produce contrasting effects across the horizontal and vertical stripe layers.

Loading thumbnail…

4:50 So LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s wall drawing “4:50” using D3 with SVG rendering. Two sets of 48 alternating thin horizontal and vertical rectangles intersect, each masked by a distinct pattern of D3’s built-in symbol shapes (such as circles and crosses). Masks are generated with the `symbol` API and applied via the `mask` attribute, using inverted fill colors to create contrasting cutout effects across the grid. The scene fills the entire viewport, with rectangles positioned using D3’s `range` and `join`.

Loading thumbnail…

Fork of Full So LeWitt Reproduction with D3

This visualization generates a grid of thin, evenly spaced horizontal and vertical lines across the entire viewport. Using D3’s `select`, `append`, and `join` APIs, it draws 48 rectangles in each direction, with each set masked by a large circular path created via `d3.symbol`. The mask inverts the line pattern within the circle, producing a striking contrast between the masked and unmasked regions. The rendering is done as SVG within a React starter template.

Loading thumbnail…

Full So LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using D3.js. It renders a full-screen SVG with two sets of evenly spaced horizontal and vertical lines, creating a grid. Two masks are applied to the line groups, each utilizing a circle symbol generated by D3’s `symbol` API with a large radius, effectively cutting circular holes in the grid pattern. The code uses D3’s `select`, `range`, and `symbol` functions, with the second mask inverting the circle’s fill to create a complementary visual effect.

Loading thumbnail…

Fork of Fork of Sol LeWitt with d3

This example generates a grid of thin horizontal and vertical lines using D3’s `select`, `range`, and `join` methods, rendered as SVG rectangles across the full browser viewport. Two circular masks invert the visibility of each set of lines: the first hides everything outside a 200-pixel circle centered on the screen, while the second hides everything inside its circle. The result juxtaposes a solid disk of vertical strips against an outer field of horizontal strips, creating a Sol LeWitt-inspired geometric pattern. The code runs in React and relies on D3 v7 for data binding and SVG manipulation.

Loading thumbnail…

Fork of Sol LeWitt with d3

This example reinterprets Sol LeWitt’s geometric wall drawings as a generative SVG composition. The view shows a grid of horizontal and vertical stripes, each rendered as a series of `rect` elements, clipped by two circular masks that create a central lens effect. Using d3’s `select`, `range`, and `.join()`, the code creates 48 stripes in each direction across the full window width and height. One mask reveals the horizontal pattern within the circle, while an inverted mask shows the vertical pattern outside it, blending the two orientations.

Loading thumbnail…

Sol LeWitt with d3

This example uses React and d3 to render a grid of horizontal and vertical rectangles, creating a pattern inspired by Sol LeWitt. The code uses `d3.select` and `d3.range` to generate 48 rectangles per axis, each masked by a circular shape. Two SVG masks—one with a white circle on black, the other with a black circle on white—are applied to the respective sets, producing a cross-hatching effect inside the circle and a contrasting negative space outside. The rendering targets a full-window SVG.

Loading thumbnail…

Fork of SVG Sol LeWitt

This example reimagines Sol LeWitt’s geometric wall drawings as an interactive web visualization, generating layered horizontal and vertical stripes that intersect within two circular masks. The code builds SVG elements entirely via the DOM API (`document.createElementNS`), setting attributes directly on each rectangle without a data-binding library. A white-filled mask reveals alternating 10-pixel-wide horizontal bars, while a second inverted mask displays vertical bars of the same thickness, creating a crosshatch pattern framed by the centered circle. The sketch responds to the browser window size by setting the SVG width and height from `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

SVG Sol LeWitt vertical

This example generates an SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It shows a grid of alternating horizontal and vertical black stripes that are visible only within a circular mask centered on the screen. The code uses the Document Object Model’s `createElementNS` method to construct SVG elements, including a mask containing a circle, and appends 48 horizontal and 48 vertical rectangles. The rectangles are clipped by the mask via the `url(#circle-mask)` reference, producing a circular cutout effect against a full-window backdrop.

Loading thumbnail…

SVG Sol LeWitt

This example renders a grid of thin vertical rectangles across the full viewport using raw SVG elements. It creates 48 rectangles via `document.createElementNS` for the SVG namespace, positioning each at 20-pixel intervals with a fixed width of 10. The rectangles span the entire window height, producing a minimalist, repetitive pattern reminiscent of Sol LeWitt’s wall drawings. The code sets the SVG’s dimensions to `window.innerWidth` and `window.innerHeight`, and dynamically appends the SVG to the document body. No external libraries are used; only native JavaScript and SVG APIs.

Loading thumbnail…

JS basics

This example demonstrates JavaScript programming fundamentals in a bare-bones HTML page. It showcases variable mutation with `const` objects, arrow functions with implicit and explicit returns, and a `for` loop. The code defines a `person` function using ES6 shorthand and logs results to the console. The visualization itself is static, containing only an empty SVG element, while all activity happens in the browser’s developer console. The page uses plain CSS and JavaScript, with no external libraries.

Loading thumbnail…

SVG Fundamentals M

This example demonstrates a minimal SVG rendering setup within an HTML page. The visualization shows a single circle positioned at coordinates (50, 50) with a radius of 50, drawn using the SVG `<circle>` element. The code defines the circle directly inside an `<svg>` tag without any JavaScript or styling. It relies on inline SVG markup for rendering, which is part of the HTML5 specification. The page uses no external libraries or frameworks, serving as a bare-bones demonstration of SVG fundamentals.