chacon1@uic.edu

@stevejchacon·8 public vizzes

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders 100 horizontal SVG rectangles at staggered y-positions, each masked by a circular cutout centered on the viewport. The code uses d3.select to append an SVG element sized to the window, binds data via .data() and .join(), and applies a reusable mask defined with SVG’s mask and circle elements. The resulting composition layers thin striped bands inside a circular aperture, evoking LeWitt’s geometric wall drawings. Rendering is done entirely with declarative SVG attributes, with no external data source.

Feb 18, 2024

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style geometric composition using two overlapping grid systems: one of horizontal strips and another of vertical strips. Circular SVG masks control visibility, revealing each set of lines only within or outside a central circle. The code builds the entire scene with raw JavaScript and the SVG DOM API, using `createElementNS` and `setAttribute` to generate rectangles and masks dynamically. The artwork responds to the browser window size, adapting its dimensions to the full viewport.

Feb 18, 2024

Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt drawing using a generative approach, rendering a series of vertical bars. The bars are evenly spaced across the full width and height of the browser window, creating a rhythmic, minimalist composition. The code uses raw JavaScript with the Document Object Model (DOM) API to create SVG elements, specifically `document.createElementNS`. It dynamically sets the canvas size based on `window.innerWidth` and `window.innerHeight`, then iterates to append one hundred `rect` elements, each with a fixed width and spacing, to the SVG container.

Feb 17, 2024

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example approximates a horizontal bar chart, using four labeled bars (A through D) with varying widths to represent categorical values. It shows categorical comparison via bar length, with labels positioned to the left of each bar. The visualization is built with plain SVG, directly creating rectangles and text elements inside a static `<svg>` container. Rectangles use explicit `x`, `y`, `width`, and `height` attributes, while the first bar is styled with a green fill and black stroke via a CSS class.

Feb 16, 2024

Loading thumbnail…

Pseudo Bar Chart

This example shows six vertical bars of varying heights arranged from left to right, approximating a simple bar chart without any axes, labels, or gridlines. The chart is drawn directly using Scalable Vector Graphics (SVG) primitive shapes—specifically, a series of `<rect>` elements—rendered on a white canvas within a 960-by-500-pixel viewport. Each rectangle is filled solid black, with its `x`, `y`, `width`, and `height` attributes hard-coded in the HTML markup. The visualization relies entirely on raw SVG code, with no JavaScript libraries or data transformation, and includes a full-size background rectangle to set the chart area.

Feb 16, 2024

Loading thumbnail…

Pseudo Scatterplot

An SVG pseudo scatterplot displays seven black circles arranged diagonally across a white canvas, suggesting a rough downward trend from upper left to lower right. Each circle has a uniform radius of 18 pixels, with coordinates explicitly set in the markup. The visualization uses raw SVG elements—`rect` for the background and `circle` for data points—defined directly in an HTML file with inline styles. No JavaScript libraries or data processing are involved; the chart is purely static and hand-coded.

Feb 16, 2024

Loading thumbnail…

Pseudo Scatterplot

This example demonstrates a basic SVG scatterplot using three circles positioned at different coordinates with distinct fill colors. The visualization shows how SVG elements are structured and styled directly within an HTML document, with each circle representing a data point on a 960x500 canvas. The code uses raw SVG elements—`<svg>`, `<circle>`, and attributes like `cx`, `cy`, `r`, and `fill`—without any JavaScript libraries or data binding. It serves as a minimal introduction to SVG fundamentals, illustrating how to create and align basic shapes in a rendering context.

Feb 16, 2024

Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG shapes by rendering three circles on a 960-by-500 canvas. The circles demonstrate basic styling with color fills, using red and green for the second and third circles. The code directly writes SVG elements in HTML, leveraging the browser’s native SVG support without any JavaScript libraries or frameworks. The rendering approach relies entirely on static markup, making it a minimal primer for SVG syntax and attributes.

Dec 25, 2023