Sidney Oluoch

@xidstar·14 public vizzes

Fork of D3 selection exploration - Wavy Animation

A continuous sine wave of circles animates across the screen, with vertical positions oscillating and the number of circles subtly fluctuating between around 95 and 105 in a smooth, looping motion. The visualization uses D3.js’s `select`, `range`, and `selectAll().join()` APIs to bind simulated data to SVG circles, updating positions every frame via a `setInterval` callback. Each frame regenerates an array of x/y coordinates using trigonometric functions, directly manipulating the `cx` and `cy` attributes of the rendered SVG elements at 60 frames per second, creating a fluid, wavy effect.

Sep 15, 2022

Loading thumbnail…

Fork of D3 selection exploration - Wavy Animation

Ten points move in a wavy sinusoidal pattern across an SVG canvas, their vertical positions oscillating over time to create a smooth, continuous animation. The visualization demonstrates D3's `selectAll` and `join` API for updating existing SVG circle elements with new data on each frame. The code uses `d3.select`, `d3.range`, and a `setInterval` callback running at 60 frames per second, incrementing a time variable to drive the sine wave. The rendering relies on SVG circles with attributes for position and radius, producing a minimal, abstract motion study.

Sep 2, 2022

Loading thumbnail…

D3 selection exploration

Ten animated circles form a sine wave pattern across the screen, with their vertical positions shifting continuously to create a smooth undulating motion. Using D3 v7's `select` and `range` functions, the code binds an array of ten data points to SVG circle elements via the `join` method, updating each circle's `cx` and `cy` attributes every frame at 60 frames per second. The example demonstrates both the data-join pattern and the newer `join` syntax as an alternative to the older `enter`/`merge` approach, with the animation driven by a `setInterval` timer that increments a time variable.

Aug 30, 2022

Loading thumbnail…

D3 Selections

This example demonstrates how to use D3.js and JavaScript to render a simple HTML page with console output. The page contains minimal HTML structure with a script that logs "hello javascript" to the browser console, showcasing basic integration of D3.js within a web environment. The code uses the D3 library version 7.6.1, imported via package.json as a dependency, and is designed as a starter template for React-based visualization projects.

Aug 25, 2022

Loading thumbnail…

Javascript Arrays

A bare-bones HTML page titled "Javascript Arrays" renders an empty document with a single console log statement. The page includes no visible visualization, chart, or data display; instead, its entire behavior is a script that outputs "hello javascript" to the browser console. Built with a minimal index.html and a package.json declaring the d3 dependency (version 7.6.1), this example serves as a starting point for exploring array manipulations in JavaScript, though no actual array operations or D3 API calls are executed in the provided files.

Aug 25, 2022

Loading thumbnail…

Complete Sol LeWit Fork of SVG Fundamentals - D3 (group)

This example generates a grid of thin horizontal and vertical rectangles across the full screen, with each rectangle masked by one of two overlapping masks. The first mask uses white space around a black D3 symbol, while the second inverts that relationship, creating a woven intersection of shapes across the canvas. The code constructs the SVG using D3 selections, `range`, `join`, and the `symbol` API, with each mask defined by an SVG `mask` element. A React wrapper manages the page, and the visualization draws directly into the window-sized viewport.

Aug 24, 2022

Loading thumbnail…

Function Fork of SVG Fundamentals - D3 (group)

This example demonstrates how SVG masks can create intricate grid patterns from overlapping horizontal and vertical rectangles. Using D3.js version 7, the code generates 100 rect elements in each direction, applying two distinct masks that feature D3's built-in symbol shapes. The `renderMask` function constructs each mask with a path for every symbol from the `d3.symbols` array, positioned horizontally across the canvas. A boolean parameter controls whether the mask is inverted, switching between black and white fills to produce contrasting effects on the final visualization.

Aug 24, 2022

Loading thumbnail…

Symbol Fork of SVG Fundamentals - D3 (group)

This example shows a grid of horizontal and vertical bars overlaid on an SVG canvas, with a circular symbol-shaped mask revealing a cross-hatched pattern at the center. The visualization uses D3 v7 to generate 100 rectangles in each direction, positioning them by index and sizing them to cover the full viewport width and height. Two masks, created with `d3.symbol` and a star symbol type, are applied to the rectangles to alternate black and white fills, producing the contrasting central motif.

Aug 24, 2022

Loading thumbnail…

Full Fork of SVG Fundamentals - D3 (group)

This example demonstrates a full-screen, web-based visualization that combines two sets of parallel stripes—one horizontal and one vertical—overlaid on a blank canvas. The stripes are constructed using D3’s `select`, `range`, and `join` methods to generate SVG rectangles. Two SVG masks (`circle-mask` and `circle-mask-2`) shape the stripes: the horizontal set becomes visible through a diamond symbol (`d3.symbol`), while the vertical set is masked by a circle, with the mask colors inverted to create a contrasting cutout effect.

Aug 24, 2022

Loading thumbnail…

Fork of Fork of Fork of Fork of SVG Fundamentals - D3 (group)

This example demonstrates a grid-based pattern created by overlaying horizontal and vertical rectangles, each clipped by a circular mask to reveal a central window. The visualization uses D3’s `select`, `range`, `append`, and `join` APIs to generate 100 vertical and 100 horizontal bars, which are grouped in separate `<g>` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) apply inverse coloring to the bars, producing a crosshatched effect that is visible only within the circular region. The code runs in React and renders fully with SVG, drawing on D3 version 7.6.1.

Aug 18, 2022

Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals - D3

This example demonstrates a full-screen grid of horizontal and vertical bars revealed through two circular masks. The visualization uses D3’s `select`, `range`, and data joins to generate 100 rectangles in each orientation, with CSS masks defining a central circular viewport. Two SVG masks—one with a black background and white circle, another inverted—control which bar segments remain visible, creating a crosshatch pattern that fades at the edges. The rendering relies on the SVG `<mask>` element and D3’s `join` API.

Aug 18, 2022

Loading thumbnail…

Fork of Fork of SVG Fundamentals Horizontal Vertical

This example demonstrates how SVG mask elements create intersecting visual patterns from horizontal and vertical stripes. The code uses raw SVG APIs—`document.createElementNS`—to build a full-window canvas with 100 horizontal rectangles masked by a white circle and 100 vertical rectangles masked by a complementary mask. Each mask combines a solid fill with a central circle, revealing or hiding stripes to form a cross-shaped overlap at the center. The result layers two sets of lines that visually blend through the transparent mask regions.

Aug 17, 2022

Loading thumbnail…

Fork of SVG Fundamentals Horizontal

This example demonstrates SVG masking by confining a pattern of horizontal and vertical lines to a circular region at the center of the screen. The code generates 100 horizontal strips and 100 vertical strips using the `document.createElementNS` API, while a mask containing a white circle over a black rectangle restricts visibility of the horizontal lines. The result is a grid where only the intersection inside the circle remains visible, created entirely with vanilla JavaScript and no external libraries.

Aug 17, 2022

Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG rendering by generating a grid of vertical rectangles that stretch across the full height of the browser window. The code creates 100 rectangle elements using the Document Object Model’s `createElementNS` method with the SVG namespace, setting each rectangle’s x-coordinate and width via attributes. It leverages vanilla JavaScript to dynamically append these shapes to an SVG container that is sized to match the viewport using `window.innerWidth` and `window.innerHeight`. The result is a simple, repeating pattern that demonstrates basic SVG shape creation without external libraries.

Aug 17, 2022