Steven McGrath

@mcgraths7·3 public vizzes

Viz 1 - Basic Face

This example is a minimal HTML page that renders a large, centered text message using CSS styling and JavaScript. The page displays the text “Hello HTML!” with a font size of 13em, demonstrating basic document structure and styling. The code uses plain HTML elements, a CSS class rule for layout, and relies on the browser’s default JavaScript parsing. It serves as a bare starter template for web development, with no external libraries or data sources. The rendering approach is entirely static, using standard DOM elements without any dynamic interaction or scripting beyond the initial page load.

Aug 9, 2024

Loading thumbnail…

Viz 1 - Basic Face

This example presents a minimal web page that displays the text "Hello World!" as a heading. It functions as a basic demonstration of HTML document structure, using the standard `h1` heading tag within the `index.html` file. The visualization is a trivial, static render of the source text, providing a starting point for a gallery of more complex data visualizations. The code relies solely on native HTML without any external libraries or data sources.

Aug 9, 2024

Loading thumbnail…

Lets make a face pt1

A grid of eighteen randomly generated smiley faces is rendered in SVG, each with unique colors, eye offsets, eye radii, mouth widths and radii, and stroke widths. Built with React and D3 v7, the app uses reusable components like `SmileFace`, `Eye`, `Mouth`, and `BackgroundCircle`, with D3’s `arc` generating the mouth path. A custom `getRandomColor` function creates random hex background colors, while D3’s `range` drives the grid layout. Each face is centered in its own SVG container, with random properties passed as props to create visual variety.

Oct 6, 2021