deebanks77

@deebanks77·15 public vizzes

Fork of Sin graph

A fork of the Sin graph animates a changing sequence of circles along a sine wave, with each circle’s vertical position and radius shifting over time. The visualization uses D3.js v7 to bind an array of data points generated from a sine function, updating the SVG circles every second via a setInterval callback. React 18 handles the page structure, while the actual rendering relies on D3 selections with the `join()` method to create and update circle elements dynamically. The animation demonstrates smooth transitions in both position and size as the wave pattern evolves.

Nov 30, 2022

Loading thumbnail…

Sin graph

An animated sine wave is rendered as a series of circles that grow and shrink in radius as they move along the curve. The visualization updates every second, adding or removing circles based on the current sine value, creating a dynamic, pulsing pattern across the full browser viewport. The code uses React 18.2.0 and D3 v7.6.1, with D3’s `select`, `range`, and the `.join()` API to handle the SVG circle elements and their animated attributes. The graph is drawn in SVG, and the animation is driven by a `setInterval` loop that recalculates circle positions and radii.

Nov 30, 2022

Loading thumbnail…

Fork of Tweak the Face: Clown Pumpkin

A stylized jack-o'-lantern face rendered as an SVG graphic in React, using D3's `arc()` generator to create the jagged mouth and radial gradients (`<radialGradient>`) for the pumpkin body and nose. The code draws a large circle with a black stroke, two triangular eyes, and a red nose, all centered within an 960x500 viewport. It uses React 18 and D3 v7 to compute the mouth path dynamically, with the final SVG output embedded directly in the page.

Nov 30, 2022

Loading thumbnail…

Tweak the Face: Clown Pumpkin

A smiling clown pumpkin sits at the center of the canvas, rendered with two radial gradients that give its orange face and red nose a dimensional, shaded appearance. The pumpkin’s mouth is a thick arc, drawn using the D3.js `arc()` constructor and path element, while its eyes are simple polygons. The SVG is built declaratively with React elements and styling, leveraging D3’s geometry utilities for the curved mouth.

Nov 28, 2022

Loading thumbnail…

Smiley Face Part 1

This example shows a simple smiley face rendered as an SVG using React components, with each facial feature defined in its own ES6 module. The code uses D3’s `arc()` generator to create the mouth path and React Fragments (`<>`) to group the eyes without extra DOM elements. Static props for positioning and radii are passed from the main `App` component, which centers all elements at (480, 250) with a 960×500 viewport. The visualization demonstrates component separation and declarative SVG construction in a React environment.

Nov 28, 2022

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape 4

A generative composition reproduces a Sol LeWitt-inspired grid of horizontal and vertical lines, rendered as SVG. The image uses rectangular elements and masks, built with D3.js range, select, and join APIs, along with the symbol and symbols functions. Two masks, rendered with alternating fill values, control the visible line patterns, creating intersecting shapes. The output is data-less, generated purely through algorithmic placement.

Nov 28, 2022

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape

This example creates an abstract geometric composition by layering two sets of 100 thin horizontal and vertical rectangles across the canvas. Two SVG masks, each containing a row of distinct D3 symbols (circle, cross, and other shapes), selectively reveal or hide the intersecting grid lines. The piece uses D3.js v7’s `select`, `range`, and `symbol` APIs to generate the shapes and masks, with the horizontal and vertical bars alternately shown or concealed depending on the mask’s fill logic.

Nov 23, 2022

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape 2

This example reproduces a Sol LeWitt-inspired drawing using D3.js v7, rendered as SVG. It displays two perpendicular sets of thin horizontal and vertical rectangles that form a dense grid over the full viewport. Two circular masks—created with `svg.append("mask")`, `symbol(symbolCircle)`, and inverted black-and-white fills—cut overlapping circular holes in the grid, revealing the background. The code uses `select`, `range`, `join`, and `attr` to generate 100 rectangles per axis, with the `symbolCircle` path defining the mask shapes.

Nov 23, 2022

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape 3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js v7. It layers two sets of thin rectangles—one horizontal, one vertical—across the full viewport, creating a grid-like pattern. Two SVG masks, each containing a D3 symbol (a cross), selectively reveal or hide portions of the rects by applying alternating black and white fills. The code uses `d3.range` to generate data, `d3.symbol` with `symbolCross`, and `d3.select` to append elements and masks.

Nov 23, 2022

Loading thumbnail…

so lewit reproduction D3.js fundamental

This example reproduces a Sol LeWitt–style drawing using D3.js. It generates a grid of horizontal and vertical rectangles, each masked to reveal a circular cutout at the center of the screen. The visualization uses D3’s `select`, `range`, and data joins to create 100 rects in each direction, with SVG masks (`url(#circle-mask)`) alternating black and white fills to control visibility. The code relies on D3 v7 and renders entirely as SVG, filling the full browser viewport with no external data.

Nov 23, 2022

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape

This visualization reproduces a Sol LeWitt-style drawing using D3.js v7. It renders horizontal and vertical striped rectangles that are masked to reveal a circle in the center, creating a clean geometric interplay between lines and a circular void. The SVG output uses two separate masked groups: the first applies a white mask with a black circle to horizontal bars, while the second uses an inverted mask for vertical bars. The code leverages D3’s `range`, `symbol`, and `symbolCircle` APIs to generate the shapes and masks programmatically.

Nov 23, 2022

Loading thumbnail…

D3.js fundamental

This example demonstrates how SVG masks can be used to create geometric cutouts in layered grid patterns. It renders 100 horizontal and vertical rectangles across the full viewport, each masked by a circle that reveals or hides portions of the grid. The code uses D3.js v7 with the `select`, `selectAll`, and `range` APIs to generate the shapes, while two separate `<mask>` elements with contrasting fill colors control visibility. A white-filled mask with a black circle creates the first cutout, and an inverted mask creates the second, producing two distinct circular viewing windows.

Nov 23, 2022

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals banky

The visualization is a fork of the original SVG Fundamentals exercise, depicting a stylized sunset landscape with two overlapping mountainous layers and a large sun. All elements are rendered as raw SVG primitives: a rect for the sky backdrop, a circle for the sun, and two paths for the terrain. Animated gradients and the sun’s vertical position loop over 15 seconds using SMIL `<animate>` tags, shifting colors from aliceblue to indigo and steelblue to simulate a day-night cycle. No external JavaScript libraries are used; the code relies solely on inline SVG and CSS for styling.

Nov 21, 2022

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS2

This example demonstrates basic SVG shapes and styling using inline attributes and CSS classes. It renders circles, rectangles, lines, and a path within a `<svg>` element, applying properties like fill color, stroke width, and stroke-linejoin. The code uses raw SVG markup, CSS2 selectors (`.lines`), and the `transform` attribute to scale and translate groups of shapes. A video link in the README references a tutorial segment at the 765-second mark, though the visible page shows only the static SVG scene.

Nov 21, 2022

Loading thumbnail…

Circle

This example displays a static SVG scene containing four filled circles arranged in a grid, alongside two hand-drawn paths with black strokes and no fill. The circles are positioned using explicit `cx` and `cy` attributes, while the paths are defined with `M` and `L` commands. Rendered inline in the HTML, the visualization relies solely on native SVG elements—such as `circle` and `path`—without any JavaScript libraries or animation logic, serving as a minimal sandbox for exploring basic shape placement and coordinate systems.

Nov 20, 2022