sheldonv2.0@gmail.com

@shivamsharma72·7 public vizzes

Fork of Full Fork of Fork of Sol lewitt reproduction in d3 after consolidation

This example reproduces a Sol LeWitt-style drawing using D3 v7 and SVG. It creates a grid of alternating horizontal and vertical black bars, each layer masked by geometric symbols (circles, squares, and other shapes) generated with the d3.symbol API. Two separate masks with inverted fill logic reveal different bar orientations. The code uses d3.select, d3.range, and mask elements to compose the final visual pattern.

Feb 1, 2025

Loading thumbnail…

Full Fork of Fork of Sol lewitt reproduction in D3

This example reproduces Sol LeWitt’s geometric wall drawings using D3 v7. It displays a grid of black horizontal and vertical bars, both rendered as SVG rectangles. Two SVG masks, each containing a large star-shaped symbol from `d3.symbol`, selectively reveal or hide the bars in opposite patterns. The masks are created with `svg.call(renderMask, ...)`, using inverted fill colors to alternate which parts of the grid appear.

Feb 1, 2025

Loading thumbnail…

Fork of Sol lewitt reproduction in D3 till class

This fork of a Sol LeWitt reproduction generates an abstract geometric artwork using D3 v7 in an SVG. It alternates black horizontal and vertical stripes across the full screen, with each set displayed through a circular mask. Two masks created with `svg.append('mask')` and filled using `rect` and `circle` elements control visibility, producing intersecting bands of lines within a central circle. The code employs `d3.range`, `selectAll().data().join()`, and attribute setters like `.attr('mask', 'url(#circle-mask)')` to render the pattern algorithmically.

Jan 29, 2025

Loading thumbnail…

Sol lewitt reproduction in D3

A D3.js reproduction of a Sol LeWitt drawing renders alternating horizontal and vertical black stripes on a light gray canvas. The piece uses generated SVG rectangles, created with `range` and `.join('rect')`, and defines two SVG masks—`circle-mask` and `circle-mask2`—to clip the stripes into two circular forms. The first mask reveals horizontal stripes inside a white circle, while the second reveals vertical stripes in the inverse pattern, creating an intersecting optical composition across the full browser window.

Jan 29, 2025

Loading thumbnail…

Sol lewitt reproduction

This example reproduces a Sol LeWitt wall drawing using layered SVG masks and repeated geometric stripes. The viewport is split into quadrants where horizontal black bars fill a large circular mask, vertical bars occupy two white quadrants around a smaller inner circle, and diagonal lines (incomplete in the code) would structure the remaining spaces. Rendered entirely with vanilla JavaScript and the SVG DOM API, it creates the illusion of intersecting line patterns within nested circular and rectangular boundaries. The approach relies on programmatic construction of SVG elements, with masks defining visible regions for each stripe direction, mimicking LeWitt’s algorithmic instructions.

Jan 26, 2025

Loading thumbnail…

JS basics

This example presents a web page titled "Sol Lewitt Reproduction," which begins with a large heading and a JavaScript console demonstration. The code shows the basics of JavaScript syntax through commented-out examples covering variable declaration, object creation, loops, and arrow functions. It then executes two functional arrow functions, `person` and `person1`, that return objects with `first` and `last` properties, logging their results to the console. The page uses standard JavaScript within an HTML file, with no external libraries or data sources, and the visual output is limited to the static heading and the console messages.

Jan 24, 2025

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal "Hello World" for the VizHub V3 runtime, showcasing the environment's interactive capabilities. It consists of several animated SVG circles that pulse and change size, with CSS hover effects that alter their fill and stroke. The code uses inline SVG animation elements and CSS transitions to create the motion and interactivity, rendered directly within an HTML file. The example serves as a blank slate for developers to build upon.

Jan 24, 2025