andu006@gmail.com

@ShadowSummon·12 public vizzes

Sol LeWitt Reproduction 2

This reproduction of a Sol LeWitt artwork uses an SVG generated entirely through the Document Object Model (DOM) API. It shows a grid of horizontal and vertical stripes that are selectively revealed through two circular masks centered on the canvas. The first mask applies a black circle to create a cutout in the horizontal stripes, while the second uses a white circle to overlay vertical stripes in the same region. The code builds elements dynamically, setting width and height to the full viewport, and employs the `createElementNS` method to construct SVG nodes for masks, rectangles, and circles.

Mar 22, 2024

Loading thumbnail…

Sol LeWitt Reproduction Inverse

This interactive SVG reproduction of a Sol LeWitt wall drawing layers horizontal and vertical striped rectangles, creating a grid-like pattern that is revealed through two circular masks. The first mask uses a black background with a white circle to show only the horizontal bands inside the circle, while the second inverts this with a white background and black circle to display the vertical bands outside it. The code builds the entire composition dynamically via the DOM API, creating 100 striped rectangles per direction and applying the masks with `url(#circle-mask)` and `url(#circle-mask-2)`. The piece renders full-window, adapting to the viewport dimensions.

Mar 21, 2024

Loading thumbnail…

Sol LeWitt Reproduction Vert

A grid of thin horizontal and vertical rectangles creates a classic Sol LeWitt-style geometric composition. The piece shows a bold black-and-white striped field, but a circular mask in the center reveals the underlying pattern by clipping the horizontal lines. Using the SVG DOM API, the code creates 100 horizontal and vertical bars, with a masked circle defining the visible area. The rendering relies on native SVG elements and mask functionality, producing a crisp, minimalist study of repetition and negative space.

Mar 21, 2024

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric composition using a grid of vertical SVG rectangles. The code generates 100 thin, evenly spaced bars that span the full height of the browser window, creating a rhythmic, minimal pattern. It builds the SVG dynamically with the Document Object Model (DOM) API, using methods like `createElementNS` and `setAttribute` to construct and style each rectangle. The visualization responds to the current viewport dimensions, filling the entire screen with its structured, monochrome array.

Mar 17, 2024

Loading thumbnail…

JavaScript Basics

This example demonstrates the foundational syntax and core concepts of JavaScript through a series of commented-out code snippets. It shows variable declarations, arithmetic operations, control flow with loops, and function definitions, including ES6 arrow functions. The visualization uses a simple SVG canvas with a script tag, and the code is written directly within an HTML file. It covers object literals and constructor functions, illustrating how to create and manipulate objects. The rendering is achieved through the SVG API, and the file includes no external libraries, relying solely on native JavaScript.

Mar 15, 2024

Loading thumbnail…

Exercise 1: Pseudo Hanging Bar Chart

A pseudo hanging bar chart presents categorical values as gray bars suspended from a curved baseline, with a red-outlined purple first bar for emphasis. The SVG rendering uses raw HTML elements—`<rect>`, `<line>`, `<path>`, and `<circle>`—without JavaScript libraries. Axis ticks and labels are manually positioned, while a black polyline connects circle markers over each bar to suggest a trend line. The chart approximates a hanging bar layout by anchoring bars at varying heights along the curve, with the y-axis inverted so lower values appear higher.

Mar 9, 2024

Loading thumbnail…

Pseudo Visualization Exercise 1: Pseudo Hanging Bar Chart

This pseudo hanging bar chart uses D3.js to arrange a series of vertical bars in an inverted, asymmetric composition, with each bar’s length and position driven by a force simulation (`d3.forceSimulation`) rather than a conventional scale. The bars dangle from a top axis, their heights derived from an implicit dataset encoded in the layout, while a subtle collision force spaces them apart. Rendered on an SVG canvas via `d3.select` and `d3.forceCollide`, the visualization emphasizes organic, physics-based placement over precise quantitative reading. The code defines a custom simulation with forces for x-positioning and collision, updating the bars’ transform attributes on each tick.

Mar 8, 2024

Loading thumbnail…

Fork of Fork of Pseudo Bar Chart

A single SVG with four horizontal bars uses value encoding to compare categorical items A through D, with the first bar given extra visual weight through conflicting CSS, inline styles, and a purple outline. The chart renders entirely through static SVG `rect` and `text` elements, with bar lengths increasing from 384 to 725 pixels. The first bar’s fill is overridden three times—by class, presentation attribute, and inline style—while all bars share the same height and vertical spacing, producing a pseudo bar chart where only the first category is highlighted.

Mar 7, 2024

Loading thumbnail…

Fork of Pseudo Bar Chart

A simple SVG bar chart displays four dark gray rectangles of varying heights on a blank canvas, approximating categorical data without axes or labels. The bars, sized via explicit pixel values, are positioned horizontally across a 900x500 viewBox. The code uses raw SVG `<rect>` elements with hardcoded coordinates and dimensions, styled with a uniform `#1E1E1E` fill. No JavaScript libraries or data-binding frameworks are involved; the rendering relies solely on static markup and inline attributes, with a minimal CSS reset to remove page margins.

Mar 5, 2024

Loading thumbnail…

Pseudo Scatter plot

This visualization uses static SVG circles to create a pseudo scatter plot, with each dark gray dot placed at fixed coordinates on a white background. The code directly embeds circle elements in the HTML, specifying cx, cy, and r attributes without any data binding or dynamic computation. While CSS transitions on hover change the ellipse’s fill color, the circles themselves remain static, and no interaction updates their positions. The example demonstrates basic SVG shape rendering and styling through pure HTML and CSS, with no JavaScript libraries involved.

Mar 5, 2024

Loading thumbnail…

SVG Fundamentals Create + Share Exercise

This example demonstrates basic SVG shape rendering within an HTML page, featuring circles, rectangles, lines, paths, and an ellipse with CSS styling and hover transitions. The code uses raw SVG elements with inline attributes for positioning, sizing, and colors, plus a CSS ruleset that applies a lavender background and a 3-second transition effect on the ellipse. JavaScript is not present; the visualization relies purely on static SVG markup and CSS interactivity, including a hover state that changes the ellipse’s fill from yellow to orange.

Feb 21, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling within a minimal HTML page. It shows circles, rectangles, lines, and paths, each with distinct fill, stroke, and coordinate attributes to illustrate basic vector graphics composition. The code uses raw SVG elements embedded directly in the DOM, with a lavender background color specified via an attribute. JavaScript and CSS are not actively employed; rendering relies solely on the browser’s native SVG support, with shapes arranged across a 999 by 839 canvas.

Dec 1, 2023