Janet Wesner

@jilmun·5 public vizzes

SVG Fundamentals

This example shows the foundational building blocks of SVG graphics, including a single circle element rendered directly on an HTML page. The code combines inline CSS for styling and JavaScript in a minimal setup, with the SVG circle defined by its center coordinates (cx, cy) and radius (r). It demonstrates how SVG shapes can be embedded in the DOM without any external libraries, serving as a basic primer for creating scalable vector graphics in the browser. The approach uses plain HTML elements as specified in the Scalable Vector Graphics specification.

Jun 29, 2022

Loading thumbnail…

SVG Fundamentals

This example presents a minimal HTML page that introduces SVG fundamentals by combining styled text with JavaScript. It renders a large “Hello HTML!” message using CSS font sizing and text alignment, demonstrating the basic structure of an HTML document with embedded styles. The code does not include SVG elements or data visualization, instead focusing on the simplest possible setup for web rendering. It references a React starter for comparison but relies solely on native HTML and CSS in the provided files.

May 24, 2022

Loading thumbnail…

Mouse Follower

A smiling face is rendered as an SVG that fills the browser window. The yellow face, with its two eyes, is positioned at the screen’s center and adapts to the viewport’s dimensions. Built with React and ReactDOM, the application calculates its geometry from `window.innerWidth` and `window.innerHeight`. It draws the face using SVG circles and a group transform, while body margin and overflow styles remove scrollbars for a full-screen effect.

Nov 20, 2021

Loading thumbnail…

Smiley Face

A grid of 18 smiley faces renders as SVG elements using React components. Each face is composed of a yellow circle, two eyes, and a mouth arc drawn with the d3 `arc` generator. The eyes vary randomly in radius, while the mouth and stroke width remain constant. React manages the component hierarchy, and d3 provides the `range` function to generate the repeated face instances.

Nov 20, 2021

Loading thumbnail…

Loading and Parsing CSV Data: MDN Colors

This example demonstrates how to fetch and display raw CSV data in the browser console. It shows the contents of a named CSS colors dataset loaded from a remote URL, with each line printed as plain text. The program uses the JavaScript `fetch` API to asynchronously request the file from GitHub, then calls `response.text()` to parse the response body. The implementation uses `async`/`await` syntax within a `fetchText` function, and logs the resulting string via `console.log`, making the data inspection straightforward.

Nov 20, 2021