dsims2157

@dsims2157·15 public vizzes

Sol LeWitt repro with D3

This example reproduces a Sol LeWitt art piece using D3 v3 and SVG. It displays a grid of horizontal and vertical lines that are selectively masked by two overlapping circular regions, creating a geometric pattern of intersecting lines with circular cutouts. The code uses raw DOM manipulation with `document.createElementNS` to construct SVG elements, defining two `mask` elements with `rect` and `circle` shapes to control which parts of the line grid are visible. The rendering is resolution-independent, adapting to the full browser window dimensions.

Feb 18, 2023

Loading thumbnail…

Fork of Sol LeWitt art reproduction - vertical variant - attempt 3

A vertical grid of thin horizontal and vertical lines appears only within a central circular area, with the lines outside the circle hidden by an inverted mask effect. The piece generates 100 horizontal SVG rectangles and 100 vertical SVG rectangles, using two complementary SVG masks to reveal the horizontal set inside the circle and the vertical set outside it. The viewport dimensions drive the layout, making the artwork respond to the browser window size. This reproduction uses the native SVG DOM API via `createElementNS` and `setAttribute`.

Feb 18, 2023

Loading thumbnail…

Sol LeWitt art reproduction - vertical variant

This example reproduces a Sol LeWitt art piece in a vertical variant, displaying a grid of thin vertical rectangles overlaid on a full-screen SVG. The code creates a single visual pattern using two circular masks centered on the viewport, each defined with a white rectangle and black circle via the SVG `mask` element. One hundred narrow rectangles are then rendered across the screen using `document.createElementNS`, with the masks selectively revealing portions of the grid. The artwork uses no external libraries, relying solely on native SVG DOM manipulation within a script.

Feb 18, 2023

Loading thumbnail…

SVG fundamentals, baby

This example demonstrates the foundational steps of creating and styling SVG elements using plain JavaScript. It creates an SVG container that fills the entire browser window using the `document.createElementNS` API with the SVG namespace. The code then appends a rectangle with a fixed width of 100 pixels and height of 50 pixels, filling it with black via the `setAttribute` method. The example relies entirely on native browser APIs—no external libraries such as D3 or React—though the metadata notes the framework as React, which is not used in the visible code.

Feb 16, 2023

Loading thumbnail…

Fork of Sol LeWitt art reproduction - attempt 3

This page displays a full-height, vertical black stripe repeated across the screen to recreate a Sol LeWitt-style geometric drawing. It uses raw SVG via `document.createElementNS` and `svg.appendChild` to generate a hundred rectangular bars, each ten pixels wide and spaced twenty pixels apart. The page dimensions span the entire viewport and update the entire artwork based on the browser window size, while the README notes this is a reproduction of a Sol LeWitt art piece.

Feb 14, 2023

Loading thumbnail…

Sol LeWitt art reproduction - attempt 2

This visualization reproduces a Sol LeWitt art piece using a series of vertical SVG rectangles that span the full height of the viewport. The code creates 100 rectangles, each 10 pixels wide, positioned at intervals of 20 pixels along the x-axis. It uses the Document Object Model (DOM) methods `createElementNS` and `appendChild` to construct the SVG elements programmatically. The rectangles are drawn directly in the browser window, with no external data source, relying entirely on JavaScript and the SVG API to generate the minimalist geometric composition.

Jan 31, 2023

Loading thumbnail…

Fork of Sol LeWitt art reproduction - attempt 2 (JavaScript basics)

This example reproduces a Sol LeWitt art piece using an SVG canvas with a 960x500 viewBox. The code contains commented-out JavaScript tutorials covering basic programming concepts like variables, loops, functions, and object literals. The active script is nearly empty, leaving only the empty SVG element visible on screen, with no additional data or rendering logic implemented yet. The piece relies on the standard SVG API for structure, while the JavaScript groundwork anticipates future geometric drawing commands for the conceptual art reproduction.

Jan 29, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece as an SVG visualization, displaying geometric lines and shapes in the artist’s signature minimal style. The rendering uses raw SVG creation via `document.createElementNS` and manual attribute setting, with a fixed 960×500 canvas. No data is loaded; instead, the code draws the composition directly on the page, mimicking LeWitt’s instructions-based art through procedural placement of strokes. The result is a static, browser-rendered homage that prioritizes visual form.

Jan 29, 2023

Loading thumbnail…

Fork of Fork of Fork of Digital mockup of a line chart

This pseudo-visualization presents a stylized mockup of age distribution across major political parties, using horizontal bars to compare two groups. The chart encodes party affiliation through color, with red and blue rectangles representing different segments. Built with React and rendered as SVG, the visualization uses static positioned `<rect>` elements sized to suggest proportional differences between categories. The design incorporates the Share Tech font family from Google Fonts, creating a digital aesthetic that mimics a line chart while maintaining a fixed, non-interactive layout.

Jan 27, 2023

Loading thumbnail…

Fork of Fork of Digital mockup of a line chart

This example presents a line chart pseudo-visualization, displaying a jagged data trend across seven quarterly points (Q1–Q7) with axis lines and tick marks. The code uses plain SVG elements—`line`, `rect`, and `text`—to construct the static chart manually. The page is a bare HTML document with inline CSS and JavaScript, loading the Share Tech font from Google Fonts. It does not leverage external charting libraries; instead, it defines each coordinate and stroke directly within the SVG markup, rendering a fixed, non-interactive visual.

Jan 27, 2023

Loading thumbnail…

Fork of Digital mockup of a horizontal bar chart

This horizontal bar chart mockup displays five black bars of varying heights on a white background, labeled A through E below the x-axis. Using embedded SVG within an HTML page, the visualization renders dark rectangles with hardcoded coordinates and dimensions. The chart applies the Share Tech font from Google Fonts to both the title text and axis labels. The code uses plain SVG elements like rect and text, styled through CSS, demonstrating a static pseudo-viz rather than an interactive data-driven chart.

Jan 27, 2023

Loading thumbnail…

Digital mockup of a barchart

This example displays a dark-themed digital mockup of a bar chart, using a series of black rectangles of varying heights and widths arranged horizontally on a white background to suggest categorical data. The visualization is rendered as static inline SVG within an HTML page, styled with basic CSS for the heading text. Built with React and rendered via SVG, the chart is purely illustrative, with no interactive behavior or data binding, serving as a visual placeholder for a future chart implementation.

Jan 26, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a static SVG scene composed of an orange rectangle with a thick red border and a green outlined triangle. The page uses plain HTML, CSS, and JavaScript, with the SVG elements drawn directly in the markup. CSS styles control the text size and alignment, while SVG attributes handle the shapes, strokes, and fills. No data or interactive behavior is present, serving as a minimal reference for embedding SVG visuals in a React project.

Jan 23, 2023

Loading thumbnail…

Attempt 2_learning paths

This example displays a minimal visualization of learning paths as a blank SVG canvas containing a single red path line with two red dots at its endpoints. The code uses plain SVG elements—a `<path>` and two `<circle>` elements—within an HTML page, rendered directly in the browser. It relies on React as the framework, although the current markup shows only a static, hand-coded SVG without any interactive or data-driven features. The visualization is framed by an 800-by-500 viewport, but no axes, labels, or data source are present, leaving the intended meaning of the path ambiguous.

Jan 22, 2023

Loading thumbnail…

Untitled

This example shows a static abstract composition of rounded rectangles and connecting lines, arranged like a minimal flow diagram or node-link structure. The layout contains three filled bars of varying widths (blue, skyblue, and cyan) positioned within a larger gray-bordered container, linked by six straight line segments that form a branching network. The visualization is built using raw SVG markup embedded directly in an HTML page, with shapes defined through `<rect>` and `<line>` elements. Styling is applied via SVG attributes such as `fill`, `stroke`, `stroke-width`, and `rx`/`ry` for corner rounding, with no JavaScript or external libraries involved.

Jan 22, 2023