Kj

@kj-9·5 public vizzes

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js. It animates a grid of horizontal and vertical colored lines that transition from green to red over five seconds while shifting positions. The visualization uses SVG masks with alternating bands and symbols to create dynamic, overlapping visibility patterns. The React-based code leverages D3’s `range`, `scaleBand`, and `transition` APIs to drive the rendering and animation.

Feb 12, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces Sol LeWitt’s drawing as an animated grid of horizontal and vertical bars. The bars are revealed through masked symbol shapes, with alternating visibility that creates a dynamic interplay between line and form. Built with D3 v3 in React, it uses `select`, `range`, `symbol`, `symbols`, `scaleBand`, and `easeLinear` to generate SVG elements and animate transitions. A custom mask function applies white and black fills to alternate regions, while the underlying JavaScript drives the 50-second vertical bar animation.

Feb 12, 2023

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple SVG composition that combines a mask with a heart-shaped cutout to display a message. It uses D3.js v5's `select` to target a div and set its text content, while also importing a local ES6 module to supply the greeting. The page renders an orange polygon and a masked circle, with the mask defining a heart silhouette through SVG paths and rectangles. The visualization showcases fundamental D3 and SVG capabilities, including the use of conditional masking and modular JavaScript imports, all within a basic HTML structure loaded from a CDN.

Feb 11, 2023

Loading thumbnail…

SVG

This example demonstrates layering SVG elements—circles, rectangles, lines, and paths—on a 960x500 canvas, with a large background rect, a horizontal rule, and a complex text path rendered as a filled path. It shows how React integrates with SVG for declarative shape composition, using inline attributes for positioning and styling. The code includes path data for a stylized character and additional white rects, illustrating basic geometric placement without external libraries.

Feb 6, 2023

Loading thumbnail…

Fork of SVG shapes and animation sandbox

This example is an SVG animation sandbox featuring a stylized landscape with layered, colored rectangles for the sky and animated clouds. Three cloud groups move along curved paths using the SVG `<animateMotion>` element at different speeds and scales. A pink flower with multi-colored petals and a green stem is drawn on the right side. All elements are created directly in HTML with inline SVG, relying on native browser support for animation without any JavaScript libraries.

Feb 6, 2023