Joel Wilson

@Joel-P-Wilson·5 public vizzes

Javascript Arrays

A dynamic visualization of JavaScript arrays demonstrates how array length and data transformation drive animated SVG output. Using D3 v6, the code generates an array of numbers with `d3.range`, maps each to position and radius values, and binds the result to `circle` and `line` elements via data joins. A `setInterval` loop updates the scene at 60 frames per second, with sine functions modulating the array size, circle positions, and connecting line thickness to create a flowing, cyclical motion.

Nov 8, 2024

Loading thumbnail…

Sol Lewitt All Shapes

This example reproduces a Sol LeWitt-inspired drawing using overlapping geometric masks. The visualization displays a grid of black bars (vertical and horizontal) that intersect with two rows of outlined circles, created by applying two distinct SVG masks—one inverted and one not—to the bar patterns. The code uses D3.js (v6) to dynamically generate the scene, calculating bar placement based on the browser window’s dimensions. It leverages D3’s `selectAll`, `range`, and `join` methods to efficiently append and configure SVG elements, while `d3.symbol` generates the circle paths. The rendering is fully SVG-based within a React-free environment.

Nov 7, 2024

Loading thumbnail…

Fork of Sol Lewitt, Now d3

This example reproduces Sol Lewitt’s geometric wall drawing using D3.js, creating a grid of vertical and horizontal bars on an SVG canvas. It visualizes the interaction of two perpendicular bar sets, where a circular mask reveals or hides portions of each set to produce overlapping patterns. The code employs D3’s selection and range functions to generate bars, and SVG mask elements to apply contrasting circular cutouts. The composition shifts between shown and hidden bar segments, echoing Lewitt’s algorithmic art. The rendering fills the browser window, with bar placement calculated from screen dimensions.

Nov 7, 2024

Loading thumbnail…

Fork of Starter

This example reproduces a Sol LeWitt drawing as an interactive full-window SVG. It shows a grid of vertical and horizontal black bars with a central circular region where the bars are masked away, creating a white circle against a striped background. The code uses raw DOM APIs like `document.createElementNS` and `setAttribute` to construct SVG elements dynamically, and SVG `<mask>` elements to selectively hide bars within the circle. The dimensions of the composition are computed from `window.innerHeight` and `window.innerWidth`, adapting the artwork to any viewport size.

Nov 7, 2024

Loading thumbnail…

Fork of HTML Starter

This example shows basic shapes—a circle, rectangle, line, and path—rendered in SVG inside an HTML page. CSS styles the circle with a blue fill and black stroke, and a hover state transitions the fill to purple while thickening the stroke over 2000 milliseconds. The page uses plain SVG elements with inline attributes for stroke, fill, and coordinates, demonstrating fundamental vector graphics without any JavaScript libraries. It serves as a minimal starter template for building interactive visualizations with HTML and CSS.

Nov 6, 2024