Akbarjon

@akbarjon2000·6 public vizzes

Sin circles

Fifteen black circles and their connecting lines animate in a synchronized wave pattern across a white background. Each circle’s vertical position and radius oscillate using sine functions, while lines radiate from the circles to the top-left corner. The animation updates every 130 milliseconds using a `setInterval` loop, with D3’s `select`, `range`, and `rgb` APIs managing SVG elements and data binding.

May 26, 2022

Loading thumbnail…

LeWitt art with lines in d3

This example reproduces a Sol LeWitt-inspired art piece by generating a randomized grid of connecting lines across the full browser window. The visualization uses D3 v7 with SVG rendering, where the code creates an array of 36 random coordinates and iterates through nested loops to draw white lines between each pair of points. The `select`, `range`, and `join` methods from D3’s selection module manage the SVG elements, while the black background and random point placement create a dense, abstract geometric pattern.

May 19, 2022

Loading thumbnail…

LeWitt Art With Multiple Shapes in function in D3

This example reproduces a Sol LeWitt–style generative artwork by layering two sets of thin rectangular strips—vertical and horizontal—across the full viewport. Each set is masked using an SVG `<mask>` element, with the masks populated by D3 symbols (from `d3.symbol` and `symbols`) positioned in a row, alternating fill colors to create intersecting geometric patterns. The code uses `select`, `range`, and `join` from D3 v7 to bind data and render both the rectangles and the mask shapes dynamically.

May 19, 2022

Loading thumbnail…

LeWitt Art With Triangle in D3

This example reproduces a Sol LeWitt-inspired piece using D3 v7, rendering an SVG that fills the browser window with a grid of vertical and horizontal black stripes. The stripes are generated from two sets of 100 rectangles, and a large triangle symbol is used as a mask to create the artwork's central geometric cutout. The code uses `d3.select` to append the SVG, `d3.range` to generate the stripe data, and `d3.symbol` with `d3.symbolTriangle` to create the triangle path applied through SVG masks, producing the layered visual effect.

May 17, 2022

Loading thumbnail…

recreate LeWitt art

This visualization recreates a Sol LeWitt-style geometric drawing using nested SVG masks to create an intersecting grid of vertical and horizontal bars. The code generates 100 thin vertical rectangles and 100 horizontal rectangles, each offset by 20 pixels, with two circular masks applied to reveal a central circular window where the bars remain visible. Built with D3.js (using `select`, `range`, and `join`), the SVG masks use white and black fills to selectively show or hide the rectilinear pattern. The final piece presents a clean, minimalist composition of repeating lines interrupted by a smooth circular void.

May 17, 2022

Loading thumbnail…

SVG Fundamentals

A minimal SVG visualization of a single polyline drawn across an 865×672 canvas. The path connects six coordinate pairs with a thick black stroke, demonstrating basic SVG fundamentals in a React-based HTML page. The example uses no external JavaScript libraries, relying solely on the native SVG `<path>` element to render the data points. The chart serves as a bare-bones template for understanding how raw SVG markup can be embedded directly within an HTML document.

May 15, 2022