Liam Connors

@LiamConnors·4 public vizzes

Fork of Circles with D3

A simple D3 visualization displays six static circles of varying sizes and colors on a yellow background. Each circle is positioned by explicit x and y coordinates and assigned a fixed radius and fill color from a hardcoded data array. The code uses D3’s `select`, `selectAll`, `data`, and `join` methods to bind the array to SVG `<circle>` elements, setting attributes like `cx`, `cy`, `r`, and `fill`. The visualization is rendered inside a Svelte component via an exported `main` function that receives a container element.

Jan 28, 2024

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing by generating a grid-like pattern of horizontal and vertical bars on an HTML5 SVG canvas. It uses SVG masks to create a central circular window: one mask hides everything except a 200-pixel-radius circle, while a second mask inverts that region. The code dynamically creates 100 horizontal and 100 vertical rectangles, each layered with alternating masks to produce the distinctive visual effect. The piece adapts to the browser’s full window dimensions, demonstrating algorithmic art generation through direct DOM manipulation and SVG APIs without external libraries.

Mar 6, 2023

Loading thumbnail…

Dataviz course 1

This example displays a blank HTML page with the title “Dataviz course 1.” It contains no visible content or interactive elements, serving only as a minimal template. The code defines a basic document structure with an empty body, relying on HTML and CSS standards. It does not load any JavaScript libraries, data sources, or rendering frameworks.

Dec 30, 2022

Loading thumbnail…

Fork of HTML Starter

This example reimagines the HTML Starter as a minimalist static composition: a single yellow circle with a black outline, centered on a blank SVG canvas. The page uses plain HTML, CSS, and JavaScript, with the SVG circle positioned via hardcoded `cx` and `cy` attributes within a 960×500 viewport. A `console.log` statement demonstrates basic script execution in the browser’s developer tools. The code relies solely on native web APIs—no external libraries—and serves as a bare-bones template for experimenting with SVG rendering in a React-free environment.

Jul 4, 2021