Skip to main content
Log in
K

kwambokar

@kwambokar·22 public vizzes

Loading thumbnail…

Ep 6: JS in HTML

This example displays the static text “Hello HTML!” centered on a blank page. The code demonstrates the fundamental structure of a web page, using a `<style>` block to set the text’s font size and alignment, and relies entirely on the browser’s built-in parsing of HTML and CSS. It does not include JavaScript logic; the page is rendered purely through standard HTML elements and CSS rules defined within the document.

Aug 15, 2022
Loading thumbnail…

Fork of D3 Selection Exploration - Assignmnet with line

A D3.js animation displays a dynamic line chart with yellow circles tracking a sine wave. The visualization updates at 60 frames per second, recalculating both the line path and circle positions based on a continuously incrementing time variable. Each frame, the `vizData` function uses D3's `line` generator to draw the path, while the `.join('circle')` pattern updates circle radii, coordinates, and stroke widths. Animated via JavaScript's `setInterval`, the scene renders in SVG, with data generated by the `makeData` function calculating positions using trigonometric functions.

Aug 15, 2022
Loading thumbnail…

D3 Selection Exploration - Assignmnet with line

The visualization animates a line connecting a set of circles that move and pulse in a sinusoidal pattern. Each circle’s position and radius oscillate over time, and a black polyline path links them in sequence. Built with D3.js v6, the code uses the `select` API to append an SVG canvas and the `line` and `range` generators to compute the path and data. The `setInterval` loop updates the `t` time variable, invoking `vizData` to redraw the circles and path at 60 frames per second with declarative join operations.

Aug 15, 2022
Loading thumbnail…

Fork of D3 Selection Exploration

A fork of D3 Selection Exploration demonstrates how data joins drive animated SVG circle positions. Fifteen circles continuously update every 100 milliseconds, moving vertically along sine-wave paths across the full browser window. The code compares commented-out manual enter/update/exit patterns with the modern `selection.join()` API, which concisely handles circle creation, updating, and removal. Using d3's `select` and `range` functions, it renders circles with animated `cx` and `cy` attributes, showing the differences between explicit and implicit join methods in D3 v7.

Aug 15, 2022
Loading thumbnail…

D3 Selection Exploration

This example demonstrates the D3.js selection API for dynamically adding circles to an SVG canvas. Fifteen circles with varying y-coordinates based on a sine wave are appended to the visualization, positioned along the x-axis at 60-pixel intervals. The code uses `d3.select` to target the body element and append an SVG, then leverages the selection chaining methods `.selectAll`, `.data`, and `.enter()` to create the circles with specified radii and coordinates. The circles are rendered as SVG elements with the `cx` and `cy` attributes set from the generated data array.

Aug 15, 2022
Loading thumbnail…

JavaScript Arrays

This example demonstrates how JavaScript’s built-in array methods can transform and organize data, specifically by sorting an array of objects by their `key` property. It shows the result of calling `entries.sort((a,b) => a.key < b.key ? -1:1)`, which arranges the entries alphabetically by key. The code also includes commented-out examples of `filter`, `map`, `reduce`, and numeric sorting with comparator functions, illustrating pitfalls like lexicographic sorting of numbers. The implementation relies solely on native JavaScript array APIs, with no external libraries or rendering, outputting results to the console.

Aug 12, 2022
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction Final with D3

This example draws a generative grid inspired by Sol LeWitt using SVG and D3. It fills the viewport with 100 horizontal and 100 vertical stripes, each masked so that only parts of the grid remain visible. Two separate masks, created with d3.mask, contain large D3 symbols (from d3.symbol) that act as cutouts or reveals, inverting their effect between the axes. The code uses d3.select, d3.range, and d3.symbol to build the composition programmatically, producing a layered geometric pattern that plays with visibility and form.

Aug 9, 2022
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction Final with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering a grid of thin horizontal and vertical rectangles on an SVG canvas. Two masks—one with a white background and black diamond shape, the other inverted—overlay the grid, so the lines are partially visible through the cutout areas. The code uses d3.select, d3.range, and d3.symbol to generate the shapes and apply the mask effects. The final artwork is static, with masks and grid lines defined programmatically at full window dimensions.

Aug 9, 2022
Loading thumbnail…

Full Sol LeWitt Reproduction Final with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js to render a grid of thin horizontal and vertical lines across the full browser window. The piece uses SVG masks to create two contrasting geometric cutouts: a large white diamond-shaped symbol in the center and a black circular hole, revealing the line patterns beneath. The code employs d3.select, d3.range, and d3.symbol to generate the composition, with the mask elements dynamically positioned based on the viewport dimensions. The artwork is drawn entirely with SVG rectangles arranged by D3’s data join.

Aug 9, 2022
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction Final with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical black lines layered over the full viewport. The lines are clipped by two circular masks centered on the screen, creating a crosshatched pattern that fades into blank space beyond the circle boundaries. The code uses D3 selections and the `join` pattern to append SVG `rect` elements, with `mask` elements defining the visible regions via white and black circles. The artwork is rendered entirely in SVG using D3 v7.

Aug 9, 2022
Loading thumbnail…

Fork of Sol LeWitt Reproduction Final with D3

This example reproduces a Sol LeWitt-inspired geometric artwork using D3.js and SVG rendering. It displays a grid of horizontal and vertical black bars that are partially revealed through two circular mask effects, creating intersecting line patterns across the full viewport. The visualization uses d3.select and data joins to generate 100 rectangle elements for each orientation, while SVG mask elements with circle shapes control which portions of the lines remain visible. The bars are positioned mathematically based on array indices, with the masks centered in the window to produce the layered optical effect.

Aug 9, 2022
Loading thumbnail…

Sol Lewitt Reproduction_What went wrong

This reproduction of a Sol Lewitt art piece renders 100 thin vertical black rectangles, evenly spaced across the full width and height of the browser window. The visualization is built using dynamic creation of SVG elements via the `createElementNS` API, with each rectangle’s position and dimensions calculated procedurally from the window’s inner dimensions. The code sets the `height` to match the viewport, while the `width` is fixed at 10 pixels and the horizontal gap is 20 pixels, producing a uniform grid-like pattern. The piece stems from the author’s experimentation with algorithmic art reproduction, demonstrating how simple loops and vector graphics can emulate geometric abstract art.

Aug 8, 2022
Loading thumbnail…

Sol LeWitt Reproduction Final

This interactive HTML page reproduces Sol LeWitt's geometric art using dynamically generated SVG elements. It displays a grid of horizontal and vertical black lines, which are masked to reveal a central circular area where the lines are visible. The piece uses two SVG masks, `circle-mask` and `circle-mask-2`, to create the contrast. The first mask shows only the horizontal lines inside a 200-pixel radius circle, while the second mask reveals vertical lines in the surrounding area. The code utilizes the Document API to create the SVG structure and elements programmatically in JavaScript.

Aug 8, 2022
Loading thumbnail…

Fork of Fork of Sol Lewitt Reproduction mask inverse

This visualization reproduces a Sol Lewitt art piece by layering black horizontal and vertical lines on a full-screen SVG. A circular mask, created with SVG `<mask>`, `rect`, and `circle` elements, reveals only the intersection area, inverting the mask to isolate the converging lines. The code uses plain JavaScript DOM manipulation to generate 100 horizontal and 100 vertical bars, with the mask inverted to show the pattern only inside the circle. No external libraries are used; rendering relies on native SVG attributes and inline styling.

Aug 8, 2022
Loading thumbnail…

Fork of Sol Lewitt Reproduction mask

This example reproduces a Sol LeWitt-inspired geometric composition by drawing 100 horizontal stripes across the full browser window. A circular SVG mask, defined with a black circle over a white rectangle, reveals only the central region of the stripes, creating a circular vignette effect. The code constructs all elements dynamically using the raw Document Object Model (DOM) API, including `document.createElementNS` and `setAttribute`, without relying on external libraries. The mask and rectangles are appended directly to an SVG element sized to match the viewport dimensions.

Aug 8, 2022
Loading thumbnail…

Sol Lewitt Reproduction Vertical

This visualization reproduces a Sol Lewitt art piece using only SVG elements. It draws 100 horizontal black rectangles, each 10 pixels tall and spaced 20 pixels apart, across the full width of the viewport. A circular mask (created with SVG `mask` and `circle` elements) is centered on the screen, clipping the rectangles so they are only visible within a round opening. The rendering is driven entirely by the Document Object Model (DOM) API, using `document.createElementNS` to generate raw SVG without any external libraries.

Aug 8, 2022
Loading thumbnail…

JavaScrpt basics

This example demonstrates basic JavaScript syntax and programming concepts, such as variable declaration, arithmetic operations, object mutation, loops, and function definitions, through a series of commented-out code snippets. The code uses standard JavaScript constructs like `const`, `let`, `var`, and arrow functions, and it is embedded directly within an SVG element in an HTML document. Although the code is entirely commented out, the rendering, handled by the SVG and styled by `styles.css`, produces a blank black-bordered canvas, with the example serving as an educational reference rather than a visual data display.

Aug 8, 2022
Loading thumbnail…

Ep 2: Pseudo line chart

This example displays a single bold red line chart with a dramatic zigzag-like path across a blank white SVG canvas. The line’s segments slope sharply downward and upward, creating a pseudo-chart without axes, labels, or data points. The code uses raw SVG elements—a `<path>` with a thick `stroke-width`, stroke-linejoin for beveled corners, and an embedded `<filter>` that applies a drop shadow via `feOffset`, `feGaussianBlur`, and `feColorMatrix`. The chart is rendered entirely with static SVG markup, with no JavaScript libraries or data binding involved.

Aug 6, 2022
Loading thumbnail…

Ep 2: Pseudo horizontal barchart

This example presents a pseudo horizontal bar chart using static SVG rectangles within a React-based visualization. It uses the `Share Tech` font for bar labels A–D, with black bars of varying widths and one styled red bar featuring a thick black stroke via the `first-bar` class. The chart encodes values through bar length, with categorical labels placed on the left. The code directly embeds SVG `<rect>` and `<text>` elements in the HTML, demonstrating a simple, non-data-driven approach to bar chart rendering without JavaScript interactions or external data sources.

Aug 6, 2022
Loading thumbnail…

Ep 2: Pseudo barchart

This example displays a minimal bar chart built with raw SVG elements, rendered directly in a static HTML page. The chart uses four black rectangles of varying heights and widths, arranged horizontally, with a white background drawn as a path. The bars are positioned via explicit `x` and `y` coordinates, with dimensions set through `width` and `height` attributes. The code relies solely on inline SVG markup without external libraries, using `rect` elements and a `clipPath` definition, all styled through CSS reset in the `body` tag.

Aug 6, 2022
Loading thumbnail…

Ep 2: Pseudo visualisation

This example shows a sparse scatterplot of six dark circular marks scattered across a white 960-by-500 SVG canvas, with no axes, labels, or underlying data. The rendering is hand-coded in SVG, using static `<path>` elements with explicit coordinate arcs for each circle, wrapped in a `<g>` with a `clip-path` to constrain drawing to the canvas bounds. The code also includes a minimal HTML page with CSS resetting body margins, but no JavaScript libraries or data-processing logic are present, making it a purely visual placeholder.

Aug 6, 2022
Loading thumbnail…

SVG Introduction

An SVG introduction demonstrates basic shape drawing within an HTML page, featuring rectangles, circles, a polygon, and a line rendered directly via SVG markup. The example uses raw SVG elements like `<rect>`, `<circle>`, `<polygon>`, and `<line>` with CSS styling properties for fill, stroke, opacity, and rounded corners. No external libraries are used; the visualization relies solely on static SVG attributes and inline styles, showcasing fundamental vector graphics capabilities in a React-agnostic HTML context.

Aug 5, 2022