jv

@jv88899·6 public vizzes

Fork of Sol LeWitt Reproduction

This generative artwork presents a minimalist geometric pattern of horizontal and vertical bands. The composition shows a dense grid of thin, parallel lines in both orientations, with a circular region in the center creating a distinct visual contrast. The piece uses D3.js version 6.6.1, specifically the `select`, `range`, and `append` APIs, to generate and render the SVG elements. The rendering applies two SVG masks with `circle` elements to invert the visibility of the lines within the central circular area, creating an overlapping effect.

May 9, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by generating a grid of horizontal and vertical stripes that are partially revealed through two circular masks. The horizontal stripes are masked by a circle with a white fill on a black background, while the vertical stripes use the inverse mask, creating a cross-like interplay of lines within the circular region. Built with D3 v6, the code uses `selectAll` and `join` to create 100 rectangles in each direction, with `range(n)` providing the data. The SVG masks, defined via `mask` and `circle` elements, control which parts of the stripes are visible.

May 9, 2023

Loading thumbnail…

Organization Network Graph

This visualization uses a force-directed graph to show relationships between organizations, with four main nodes at the center connected to smaller child nodes and numerous leaf nodes. The code employs `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute positions, rendering circles, text labels, and connecting lines as SVG elements within a React framework. Node sizes and distances vary to distinguish hierarchy levels, while a custom color palette from `colors.js` assigns distinct shades to each main cluster.

May 3, 2023

Loading thumbnail…

Sol LeWitt in Vanilla JS

This example renders a generative art piece inspired by Sol LeWitt using vanilla JavaScript and SVG. It creates a full-screen SVG canvas and populates it with a series of vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the entire window width. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements dynamically, looping to cover the viewport’s width. The result is a minimal, grid-based composition that directly translates the artist’s geometric aesthetic into a browser-based visualization.

May 2, 2023

Loading thumbnail…

Pseudo Visualizations

This example presents a minimal generated page titled “Pseudo Visualizations.” The HTML defines a single centered message styled entirely through inline CSS. No JavaScript libraries or external frameworks appear; the rendering relies solely on the browser’s native HTML and CSS capabilities. The page’s visual output is a static text draw, demonstrating fundamental markup and styling without any data-driven or interactive visualization logic.

May 2, 2023

Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG shapes composing a static vector graphic. It depicts a layered bullseye target using circles, a large rectangle with a colored border, and a diagonal line, all positioned within a fixed 960 by 500 coordinate space. The code in `index.html` directly constructs these shapes using raw SVG elements like `circle`, `rect`, and `line`, with styling applied through SVG attributes such as `fill`, `stroke`, and `stroke-width`. No JavaScript or external libraries are used; the rendering is purely declarative SVG markup.

May 2, 2023