Kathleen Johnston

@KathleenSJ·10 public vizzes

Sol Lewitt Reproduction Vertical

A vertical grid of black rectangular bars covers the full viewport, while a circular mask reveals only the horizontal lines crossing it, recreating a Sol Lewitt wall drawing. The piece uses plain SVG elements, with a white circle on a black rect defining the mask and two loops of one hundred `<rect>` elements generating the stripes. The artwork dynamically fills the browser window, with vertical bars spanning full height and horizontal bars clipped by the circle mask to create the layered optical effect.

Nov 7, 2021

Loading thumbnail…

Sol Lewitt Reproduction

This example reproduces a Sol LeWitt wall drawing as an interactive SVG visualization. It renders 100 vertical rectangles, each 10 pixels wide, evenly spaced across the full viewport height. The code uses the SVG API to create and append each rectangle dynamically via `document.createElementNS`. All shapes are generated procedurally without an external dataset, directly mimicking LeWitt’s geometric style. The result is a minimalist, full-screen composition that fills the browser window.

Nov 5, 2021

Loading thumbnail…

Heyo SVG

This example demonstrates basic SVG shapes—circles, rectangles, lines—positioned directly within an HTML page. The graphic shows a simple composition of colored circles, a bordered rectangle, and a diagonal line against a blank canvas. The code uses raw SVG markup embedded in `index.html`, with inline presentation attributes like `fill`, `stroke`, and `stroke-width` controlling style. It serves as a minimal starter for rendering vector graphics in a browser, without additional JavaScript libraries or data sources. The page relies solely on the browser’s SVG renderer.

Oct 3, 2021

Loading thumbnail…

SVG Fundamentals

This example demonstrates the minimal structure of an SVG-enabled web page, showing how HTML, CSS, and JavaScript can be combined to render scalable vector graphics. The code relies on plain HTML elements and the browser’s built-in SVG support, without any additional libraries. It presents a static, unstyled document with the title “SVG Fundamentals” and the text “Hello HTML,” serving as a foundation for understanding how to integrate SVG into web projects for later visualization work. The example uses no external data sources or frameworks beyond basic DOM rendering.

Oct 2, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face drawn as an SVG, composed of a circular background, two eyes, and a smiling mouth. The face is built using React components, with each part defined in separate files and positioned using a central translation transform. D3’s `arc` generator creates the mouth path, while the background circle and eyes use plain SVG circle elements. The rendering uses ReactDOM to mount the SVG into the DOM, with D3 v5 loaded for the arc function.

Feb 28, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiling face constructed with SVG circles and an arc-shaped mouth, rendered at the center of a 960×500 canvas. The face includes a yellow head with a black stroke, two eyes, and a mouth drawn using a D3 arc path. The code combines React for component structure with D3’s `arc` API to generate the mouth’s path, while setting coordinates and dimensions through inline variables. SVG elements are positioned within a translated group, and styling is applied via attributes like `stroke-width` and `fill`.

Feb 28, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-window smiley face using React and D3.js, scaling the face to fit the browser viewport. The yellow circular head, black-outlined with a fixed stroke width, is centered, with two dark eyes positioned symmetrically and a curved mouth created via a D3 arc path generator. The code calculates radii and offsets dynamically from window dimensions, and uses React’s `ReactDOM.render` to inject the SVG into the page, with layout handled by SVG groups and transforms.

Feb 28, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face rendered as a responsive full-screen SVG fills the browser window, with its size and position calculated from `window.innerWidth` and `window.innerHeight`. React 16.9 creates the SVG elements, including two black eye circles and a yellow head with a black stroke, while the commented-out code shows a simpler static 960×500 version. The mouth is not drawn in the active code despite the title, leaving only the head and eyes visible.

Feb 28, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A basic smiley face is rendered as a yellow circle with two black eyes, drawn using React and SVG. The example demonstrates positioning SVG elements within a React component, computing coordinates from a central point. It uses React 17 and ReactDOM, with hardcoded dimensions for width, height, and eye offsets rather than external data. The face is incomplete, showing only the head and eyes, as indicated in the README’s note about being halfway toward a smile.

Feb 28, 2021

Loading thumbnail…

Smiley Face Part I

A single large yellow circle with a black outline forms a smiley face, accompanied by two smaller black circles positioned as eyes. The visualization uses static Scalable Vector Graphics (SVG) shapes rendered directly in HTML, with no external data source or interaction. The face is centered on a 960-by-500 canvas, employing basic SVG circle elements with explicit coordinates and stroke styling to achieve the simple, iconic design. The example demonstrates minimal SVG markup for constructing a recognizable graphic without additional JavaScript libraries.

Feb 28, 2021