triciascully

@triciascully·12 public vizzes

Fork of Full Sol LeWitt Reproduction with D3

A tiled grid of horizontal and vertical bars forms a minimalist composition, overlaid with two masks that reveal and hide sections using d3 symbols as cutouts. The visualization uses D3 v6 with select, range, symbols, and symbol to generate SVG shapes, while mask elements with rect backgrounds and symbol paths create the interlocking positive and negative spaces. The code builds two masked layers to produce a Sol LeWitt-inspired geometric interplay, rendered at full screen with no interaction.

Mar 21, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 with SVG rendering. It shows a grid of horizontal and vertical rectangles overlaid with two circular masks, one inverted, creating a dynamic interplay of lines and negative space. The code uses `d3.range`, `d3.select`, and `d3.symbol` with `symbols[1]` to generate the mask paths. Horizontal and vertical bars are drawn at regular intervals, then clipped by the masks to produce the final pattern against a full-window canvas.

Mar 21, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3 using group elements

This example recreates a Sol LeWitt-inspired geometric composition using D3.js, displaying a grid of horizontal and vertical bars that intersect to form a pattern. The visualization uses two groups of rectangles, one arranged horizontally and one vertically, each masked to reveal a circular area in the center of the screen. SVG masks defined with `mask` and `circle` elements control the visibility, creating a layered effect where the bars appear only within the circular regions. The code leverages D3 selections and data joins with `select` and `range` to generate the rectangles dynamically.

Mar 21, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt piece, displaying a grid of horizontal and vertical lines masked to reveal a central circle. The artwork uses 100 horizontal and 100 vertical rectangles, each 10 pixels thick, with a circular mask applied to create the intersecting form. Built with D3.js (v6.6.1), the code uses `select`, `range`, and the `append` and `attr` methods to construct and style the SVG elements directly, dynamically sizing the piece to the browser window.

Mar 21, 2023

Loading thumbnail…

Fork of Sol LeWitt Vertical Variant

This visualization reproduces a Sol LeWitt-style geometric composition on a full-screen SVG canvas. It shows a grid of thin horizontal and vertical bars intersecting around a central circular void, creating a cross-shaped negative space. The piece uses two SVG masks to selectively reveal either the horizontal or vertical rectangles. One mask shows a white circle on a black background, while the other is inverted; JavaScript loops generate 100 rectangles in each orientation, each assigned one of the masks to achieve the layered effect.

Mar 21, 2023

Loading thumbnail…

Sol LeWitt Vertical Variant

A generative art reproduction of a Sol LeWitt piece creates a vertical grid of horizontal and vertical bars. A circular mask, defined using raw SVG elements, limits the visibility of the horizontal bars to a central disc. The code builds the SVG document and its elements directly via the DOM API in vanilla JavaScript, using `document.createElementNS` and `setAttribute`. The composition shows structured, rule-based line work that contrasts the masked circle with the surrounding rectangular bands.

Mar 21, 2023

Loading thumbnail…

Sol LeWitt Repro

This generative art reproduction of a Sol LeWitt piece creates a minimalist vertical line composition. The artwork displays a series of thin, black rectangular bars evenly spaced across the entire height of the browser window. The code uses raw SVG elements created via `document.createElementNS` with the SVG namespace, iterating one hundred times to place each rectangle at increasing x-coordinates. The rendering approach is purely algorithmic, using JavaScript to dynamically generate the graphics based on the viewer's window dimensions, with no external data source or visualization library involved.

Mar 21, 2023

Loading thumbnail…

Pseudo Line Chart

A pseudo line chart uses an SVG path with a single, thick black stroke to suggest a conventional line chart without plotting actual data points. The path curves through a stylized, hand-drawn-looking trajectory across a white background on a dark grey canvas. Rendered entirely with inline SVG elements, including a large Share Tech font for text labels, the visualization relies on path data and stroke properties rather than data-binding libraries to create its aesthetic.

Mar 21, 2023

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example approximates a horizontal bar chart using raw SVG rectangles and text elements, displaying categories A through D with varying bar widths. The chart uses a black-on-white design with large ‘Share Tech’ typography, emphasizing a minimalist aesthetic. Built with inline SVG markup and standard HTML/CSS, it relies on fixed pixel coordinates for bar placement and sizing rather than data-driven JavaScript or a charting library. The rendering is fully static, with no interactive or animated behaviors present in the code.

Mar 21, 2023

Loading thumbnail…

Pseudo Bar Chart

This example presents a simple bar chart constructed entirely with SVG `<rect>` elements rather than a charting library. Four black bars of varying heights sit on a white background, with the values encoded by each rectangle’s `y` and `height` attributes. The chart uses raw SVG markup inside an `index.html` file, with no JavaScript or data binding—the bars are hardcoded. The visualization demonstrates how basic geometric shapes can approximate a bar chart without relying on D3 or other plotting tools.

Mar 21, 2023

Loading thumbnail…

Pseudo Scatter Plot

A pseudo scatter plot approximates a traditional scatter plot using only six circles positioned on a dark gray SVG canvas. Each navy circle represents a data point, though no underlying dataset or axes are defined. The visualization is rendered directly with SVG elements, using a `<rect>` for the background and `<circle>` tags with explicit `cx`, `cy`, and `r` attributes to simulate the distribution. The code relies on plain SVG markup within an HTML file, without any JavaScript libraries such as D3.

Mar 21, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes by rendering three circles, two rectangles, and a line on a 960 by 500 canvas. The visual shows how fill colors, stroke colors, and stroke widths vary across these basic geometric elements, including a circle with a yellow fill and blue outline. Using raw SVG markup within an HTML document, the code specifies coordinates and styling attributes directly on each shape element, with the outermost rectangle acting as a blue frame around the composition.

Mar 20, 2023