JMeltzer92

@JMeltzer92·10 public vizzes

JS in HTML

This example demonstrates how D3.js can be used inside an HTML page, displaying a large "Hello HTML!" message that fills the screen. The page loads D3 version 7.8.0 from a CDN and runs a script that logs a string from an imported module (something.js) to the console. It also outputs the d3.scaleLinear function to verify D3’s availability. The rendering relies solely on standard HTML and CSS, with no visual data mapping or interactive elements shown.

Dec 24, 2022

Loading thumbnail…

D3 Selection Exploration

This example demonstrates the update and join pattern of D3 selections, animating a set of 15 circles and a connecting line path over time. The circles and path are re-rendered every frame using a `setInterval` loop, with their vertical positions and radii driven by a sine function of an incrementing time variable. The code uses `d3.select`, `selection.selectAll`, `selection.join`, and `d3.line` to bind new data arrays generated by `makeData` to SVG elements, showing how D3’s data-join syntax handles dynamic updates efficiently. The visualization runs in a full-window SVG canvas.

Dec 21, 2022

Loading thumbnail…

Fork of Bouncy Wave

This example visualizes a bouncing wave of circles in an SVG animation. It uses React and D3.js to generate and update the data with the `makeData` function, which computes circle positions, radii, and a connecting line based on a sine wave. The rendering is handled via D3's `select`, `line`, and `join` APIs to draw the animated path and circles, with the animation loop driven by `setInterval` at 60 frames per second.

Dec 21, 2022

Loading thumbnail…

Javascript Arrays

This example demonstrates JavaScript array sorting using D3's `descending` comparator on an array of key-value objects. The code defines three entries with keys A, B, and C, then sorts them in descending order by key using the `sort` method with a comparator imported from D3. The result is logged to the console, showing the reordered array. A commented-out section hints at an alternative `reduce` operation that would convert the array into an object mapping keys to values. The example uses D3 version 7.7.0 for its comparator utilities.

Dec 20, 2022

Loading thumbnail…

D3 Sol LeWitt box matching

This visualization generates a grid of overlapping horizontal and vertical stripes, each masked by a row of D3 symbol shapes. Using D3 v7 APIs including `select`, `range`, and `symbol`, it renders SVG rectangles and paths. Two masks—one normal and one inverted—control which stripe segments remain visible, creating a checkerboard-like interplay of geometric forms inspired by Sol LeWitt’s wall drawings. The code uses `join` for enter selection and derives symbol paths from D3’s built-in symbol types.

Dec 20, 2022

Loading thumbnail…

D3 Sol LeWitt 2

This visualization generates an abstract grid of horizontal and vertical stripes across the full browser window, inspired by Sol LeWitt’s geometric wall drawings. Two sets of one hundred rectangles each create the striped pattern, with each set filtered through a separate SVG mask. The masks incorporate D3’s `symbol` shapes—including circles, diamonds, and squares—positioned via `d3.range` and `selectAll().join()`. Using D3 v7 with a React setup, the code renders entirely as SVG, with masking inverted between the two layers to produce intersecting geometric cutouts.

Dec 20, 2022

Loading thumbnail…

D3 Sol LeWitt

This example generates a geometric abstraction inspired by Sol LeWitt using D3.js and SVG rendering. It draws 100 horizontal and vertical lines across the full canvas, with each line masked to create circular forms. The horizontal lines use a mask that reveals a white circle, while the vertical lines use an inverted mask that hides the same circle, resulting in a composition of overlapping striped bands and a central circular void. The code uses D3's `select`, `append`, and `range` functions to construct the SVG elements.

Dec 20, 2022

Loading thumbnail…

Sol LeWitt

This example recreates an abstract Sol LeWitt-inspired drawing using only DOM APIs. It shows a grid of thin horizontal and vertical bars overlaid with a circular mask, so the bars are visible only inside the circle. The code builds SVG elements dynamically with `document.createElementNS` and uses two SVG `<mask>` elements to define the visible region. Each bar is a `<rect>`; the horizontal set uses a mask that hides the center, while the vertical set uses an inverted mask, creating a subtle layered composition.

Dec 19, 2022

Loading thumbnail…

Sol LeWitt Vertical

This visualization recreates Sol LeWitt's geometric aesthetic using a vertical stack of 100 thin, full-width rectangles. Each rectangle is spaced 20 pixels apart, creating a rhythmic, repetitive pattern that fills the entire browser viewport. The code builds SVG elements dynamically via the Document Object Model API, using `createElementNS` to generate the `<rect>` elements and appending them to an `<svg>` container whose dimensions are set to match the window’s `innerWidth` and `innerHeight`. No external libraries are used, relying purely on vanilla JavaScript and SVG.

Dec 19, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates a static SVG composition that illustrates fundamental vector graphics primitives. Using React, the page renders a series of black lines fanning out from two origin points, five colored circles, and a single blue rectangle outline, all within a 960 by 500 coordinate space. A separate path element draws a black triangular stroke. The code directly uses SVG elements like `line`, `circle`, `rect`, and `path`, with styling controlled via attributes such as `fill` and `stroke`, showcasing basic SVG rendering without any additional data or JavaScript libraries.

Dec 15, 2022