Qingzhi Ma

@qingzma·4 public vizzes

Mouse Follower

A smiley face follows the mouse cursor across the full browser viewport, rendered as a yellow circle with black eyes and a stroke. Built with React and SVG, the component tracks pointer movement using React state and updates the circle’s position accordingly. The visualization uses React 16.9 and ReactDOM, with a hidden commented-out static SVG fallback showing the face’s initial geometry.

Nov 29, 2021

Loading thumbnail…

cars

Six rows of yellow faces with blue heads and red eyes are arranged on a dark background, each face varying randomly in eye radius, mouth width, and mouth radius. The example uses React components, including `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, to assemble the SVG faces. The `Mouth` component relies on `d3.arc` to generate the mouth path, while `d3.range` creates the 6×3 grid layout. The faces are rendered with random parameter values, producing a playful, varied composition.

Nov 28, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face rendered as static SVG shapes: a large circle for the head and two smaller circles for the eyes. The code uses React 17 via a UMD script, with all elements hardcoded in JSX inside an `<svg>` tag. It relies on basic SVG circle elements with fixed coordinates and stroke properties, and includes a placeholder `console.log` and `alert` call that execute on load. The face is incomplete, missing a mouth, as noted in the README.

Nov 15, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a simple smiley face built with SVG, whose eyebrows move up and down in a looping animation. The code uses D3 v5 selections to append and style the face’s circles, rectangles, and an arc-based mouth. A chained `transition().duration(2000)` on the eyebrow group animates its vertical position, shifting it up and then back. All elements are centered in a 900-by-400 SVG using a translated `<g>` container.

Nov 15, 2021