Prince Kumar

@7princekumar·12 public vizzes

Sol LeWitt Reproduction With D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, displaying a grid of horizontal bars that form a circular cutout in the center. The visualization shows 100 thin, full-width rectangles stacked vertically across the screen, with a circular mask applied to create a negative-space circle in the middle of the canvas. The code leverages D3’s `select`, `range`, and data-join methods to generate the SVG rectangles, while an SVG `<mask>` element containing a black rectangle and white circle defines the visible region. The rendering uses the D3 v7 library and outputs vector-based SVG graphics that fill the entire browser viewport.

Mar 17, 2024

Loading thumbnail…

Js Basics

This example demonstrates basic JavaScript syntax and concepts through a series of commented-out code snippets, culminating in an active arrow function that creates a person object and logs it to the console. The page contains an empty SVG element with a 960 by 500 pixel canvas, though no visual output is rendered. The code explores variable declaration, arithmetic operations, object creation, and function definitions, contrasting traditional function expressions with ES6 arrow functions and shorthand property syntax. The active example defines a `person` function that returns an object with `first` and `last` properties, then invokes it with the arguments 'Jane' and 'Doe' to log `{first: "Jane", last: "Doe"}` to the browser console. The rendering approach is purely HTML with inline SVG and JavaScript, requiring no external libraries.

Mar 17, 2024

Loading thumbnail…

Fork of Sol LeWitt Reproduction Verticle

This example reproduces a Sol LeWitt-inspired drawing using only SVG shapes. It shows a grid of thin horizontal and vertical rectangles overlaid on the full viewport, with a circular mask creating a central aperture. The code uses the raw DOM API via `document.createElementNS` to build the SVG, `mask` elements to define clipping regions, and `rect` elements for the grid lines. Two complementary masks isolate the horizontal and vertical strokes, producing a clean intersection effect. No external libraries are used; the rendering relies entirely on native SVG attributes and JavaScript.

Mar 17, 2024

Loading thumbnail…

Sol LeWitt Reproduction Verticle

This example reproduces a Sol LeWitt-inspired drawing using only SVG elements. It shows a grid of horizontal and vertical lines confined to a circular mask, creating a clean, geometric composition. The visualization is generated procedurally with JavaScript, using the Document Object Model (DOM) APIs to create SVG nodes. A white circle on a black mask defines the visible area, while 100 horizontal rectangles and 100 vertical rectangles are drawn across the full canvas, with the horizontal set clipped by the mask. The code relies on native browser APIs such as `document.createElementNS` and `setAttribute`, with no external libraries.

Mar 17, 2024

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a minimalist Sol LeWitt-style drawing using only vertical bars. It shows a grid of thin, evenly spaced rectangles that fill the entire viewport, creating a rhythmic, pattern-based composition. The visualization is generated entirely with the browser’s native SVG interface, using `document.createElementNS` to construct each rectangle element. The script sets the total number of bars to 100, positioning them at fixed intervals of 20 pixels along the x-axis while each bar spans the full height of the window. No external libraries are used, relying solely on standard JavaScript and the SVG namespace.

Mar 17, 2024

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style wall drawing using a single HTML element with dynamic font sizing. The code sets a large `font-size` value of 222 pixels inside a centered container, rendering the text "Hello World!" as a bold, graphic composition. The primary API used is the native DOM `innerHTML` property, with no external libraries or data sources. The rendering approach is purely CSS-based, relying on inline styles for typography and alignment, mimicking LeWitt’s geometric and text-based aesthetic through minimalist, code-driven design. The example highlights how simple web technologies can emulate conceptual art.

Mar 17, 2024

Loading thumbnail…

Pseudo Line Chart

This example shows a pseudo line chart, approximating a scatter plot with a single thick, rounded black stroke that connects six discrete points across a 782-by-355 SVG canvas. It renders directly in the browser using an inline `<svg>` element, relying on the SVG `path` element and its `d` attribute to define the line, with `stroke-linecap` and `stroke-linejoin` set to `round` for a smooth, bulbous appearance. The visualization deliberately avoids using a dedicated charting library, instead demonstrating raw SVG fundamentals for drawing a simplified data representation.

Mar 13, 2024

Loading thumbnail…

Pseudo Horizontal Bar Chart

A pseudo horizontal bar chart uses black rectangles to represent four labeled categories, A through D, on a white SVG canvas. The first bar is styled green with a black stroke via a CSS class, overriding its inline red fill to demonstrate CSS precedence. The visualization is built with static SVG elements, including `<rect>` and `<text>`, and uses the Share Tech font.

Mar 13, 2024

Loading thumbnail…

Pseudo Horizontal Bar Chart

This pseudo horizontal bar chart displays four vertical rectangles of varying heights. It approximates a scatter plot’s visual distribution using fixed SVG `<rect>` elements rather than data-driven bars. The code uses raw SVG markup within an `index.html` file, setting each rectangle’s position and dimensions via `x`, `y`, `width`, and `height` attributes. The visualization relies solely on static SVG rendering, with no JavaScript libraries or external data sources, to create a simple, hard-coded chart.

Mar 13, 2024

Loading thumbnail…

Pseudo Bar Chart

The pseudo bar chart displays four vertical rectangles of varying heights and positions, approximating a scatter plot through bar-like shapes. Each rectangle is drawn as a raw SVG `<rect>` element with fixed x, y, width, and height attributes, directly embedded in the HTML without any scripting or data-binding logic. The rendering relies on static SVG coordinates, and the chart is presented on a blank canvas with no axes, labels, or interaction. The file uses inline SVG within an HTML document, and the visualization is purely declarative, showing only the styled rectangles without any additional charting library or computed data source.

Mar 13, 2024

Loading thumbnail…

Pseudo Scatter Plot

A pseudo scatter plot displays seven solid black circles at varied positions on a white canvas, approximating a scatter plot without any underlying data. The circles are rendered directly as SVG `<circle>` elements with a fixed radius of 50, rather than through a data-driven framework. The visualization uses plain SVG markup in an HTML document, with a single drop shadow filter applied to the background rectangle to create a subtle elevation effect. No axis, labels, or interaction are present, making it a purely visual approximation.

Mar 13, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles with explicit fills, a stroked line, a multi-segment path, a rectangle outline, and a commented-out curved path. It shows how SVG elements are declared directly in HTML markup using inline attributes for positioning, size, color, and stroke properties. The example uses native SVG APIs—`<circle>`, `<line>`, `<path>`, and `<rect>`—without any JavaScript or external libraries, serving as a static reference for basic vector graphics rendering in the browser.

Mar 13, 2024