Akshay

@yahsashay·9 public vizzes

sol wit production with d3

This example renders a dynamic geometric pattern using raw SVG and JavaScript, without external libraries. It draws 100 horizontal and 100 vertical rectangles, each masked by concentric circular cutouts created with SVG mask elements. The first mask isolates a central circle, while the second inverts it, producing a crosshatched grid where the bars intersect. The full-viewport composition responds to the browser window size, updating its dimensions on load. The visual effect layers the masked rectangles to create a balanced, woven-like field of lines with a circular void at the center.

Nov 17, 2022

Loading thumbnail…

design done

A grid of alternating horizontal and vertical striped rectangles covers the full screen, with a circular mask revealing an intersection of both orientations. The visualization uses raw SVG elements created via the DOM API, applying `mask` and `circle` elements to clip each stripe. A white circle in the first mask hides the horizontal bands except within its bounds, while the second mask uses a black circle on a white background to invert the effect for the vertical strips, producing a crisp radial pattern at the center.

Nov 17, 2022

Loading thumbnail…

inverse masking done

This example demonstrates inverse masking with SVG, where intersecting horizontal and vertical striped rectangles reveal a circular cutout at the center. Two masks are defined: one with a white circle on a transparent background, and another with a black circle over a white rectangle. The code builds 100 horizontal and 100 vertical rectangle strips, applying each mask to create a cross-hatch effect where the circle appears transparent. It uses plain JavaScript to manipulate SVG elements directly, with the `<mask>` element and `url(#...)` references controlling visibility.

Nov 17, 2022

Loading thumbnail…

circle mask

A full-screen SVG displays 100 horizontal stripes alternating in height across the viewport, with a circular mask revealing only the central region. The mask is defined as an SVG `<mask>` containing a white rectangle and a black circle, applied to each stripe via the `mask` attribute. The visualization uses raw DOM manipulation with `document.createElementNS` and `setAttribute` to construct the SVG elements dynamically in JavaScript, without any external libraries.

Nov 17, 2022

Loading thumbnail…

create mask

This example uses an SVG mask to create a circular window over a series of alternating horizontal rectangles. The mask, defined with an SVG `<mask>` element containing a white circle, is applied to each of the 100 rectangles via the `mask` attribute. The visualization demonstrates how SVG masks work in a bare-bones HTML page using vanilla JavaScript, dynamically creating the SVG elements and filling the viewport.

Nov 17, 2022

Loading thumbnail…

horizontal lines

This example displays a full-screen SVG filled with 100 evenly spaced horizontal gray lines. Each line is a separate `<rect>` element, generated programmatically in a loop, with a width matching the viewport and a height of 10 pixels. The rectangles are spaced 20 pixels apart vertically, using a plain JavaScript approach with `document.createElementNS` and `setAttribute`. The visualization demonstrates a simple, static grid pattern that adapts to the browser window’s width and height. No external libraries or frameworks are used; it relies solely on native DOM and SVG APIs.

Nov 17, 2022

Loading thumbnail…

lines

This example fills the browser window with 100 horizontal lines, each a thin SVG rectangle stacked at 20-pixel intervals. It demonstrates minimal procedural rendering using the Document Object Model API to create SVG elements (`document.createElementNS`) and set attributes like `width`, `height`, and `y`. The lines span the full viewport width, derived from `window.innerWidth/Height`, with no interaction or animation, showing a static grid-like pattern.

Nov 17, 2022

Loading thumbnail…

SVG Fundamentals Akshay

This example presents a full-window visualization of vertical rectangular bars rendered as SVG elements. It generates 100 evenly spaced bars that span the entire height of the viewport. The code constructs an SVG canvas using the `createElementNS` API and dynamically appends each rectangle with a fixed width and incremental x-position. The rendering responds to the browser window size, as the dimensions are taken from `window.innerWidth` and `window.innerHeight`. The bars are drawn with no fill color, leaving only the default black strokes visible against a white background.

Nov 17, 2022

Loading thumbnail…

area fork

This area chart shows the sales of cars in India from 2009 to 2019, with a smooth line tracing yearly values and an orange filled region beneath it, using an SVG rendered with D3 v5. The visualization employs `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.line` and `d3.area` with `curveBasis` to create the smooth curve, and `d3.csv` to load the dataset, which is parsed with `d3.timeParse` for the year values. The chart includes labeled x and y axes with formatted tick marks.

Nov 16, 2022