ppfaender

@ppfaender·3 public vizzes

MoveTheDot

A single circle follows the mouse cursor across a full-screen SVG canvas, updating its position in real time through React state. The app uses React and ReactDOM, with `useState` and `useCallback` handling the mouse event and re-rendering. The circle’s coordinates are set from `clientX` and `clientY` on every `onMouseMove`, rendered via SVG elements. The visualization demonstrates a minimal interactive data-free example of state-driven rendering.

Jun 26, 2023

Loading thumbnail…

MoveTheDot

A large yellow smiley face, rendered with SVG, fills the browser window and centers itself dynamically. The face is composed of a yellow circle with a black outline, two black eye circles, and a simple curved mouth implied by the background. Built with React, the code uses ReactDOM to render the SVG elements directly, calculating the face's dimensions from `window.innerWidth` and `window.innerHeight` to ensure it scales with the viewport. The rendering approach is declarative, with all shapes defined as SVG primitives within a React component.

Jun 26, 2023

Loading thumbnail…

Smiley

This example displays a grid of eighteen randomly generated smiley faces. Each face is composed of a yellow background circle, two black eyes, and a mouth arc, all rendered as SVG elements using React. The `d3.arc` function generates the mouth path, while the `d3.range` method creates the array for the grid. Parameters like eye position, size, and mouth radius are randomized for each face.

Jun 26, 2023