MarcoAR1

@MarcoAR1·3 public vizzes

Circle following Mouse

A circle follows the cursor’s position across a 960x500 SVG canvas. Built with React and D3 v7, the example uses an `onMouseMove` event handler on the `<svg>` element to capture mouse coordinates and update React state. The circle’s `cx` and `cy` attributes are bound to this state, causing the circle to continuously reposition as the mouse moves. The SVG is rendered via React’s `ReactDOM.render`, with the circle radius fixed at 30 pixels.

Jun 12, 2021

Loading thumbnail…

Smaile face

A grid of identical yellow smiley faces appears, each face composed of a yellow SVG circle with a black stroke, two dot eyes, and a semi-circular mouth. The visualization is built with React and D3, using SVG rendering. It creates multiple copies of a faceted `Face` component from `Face.js`, which combines `BackgroundCircle`, `Eyes`, and `Mouth`. The `Mouth` component generates its arc path using D3’s `arc` function, specifying inner and outer radii and angle ranges. Each face shares the same dimensions and styling, producing a uniform, repetitive pattern across the viewport.

Jun 12, 2021

Loading thumbnail…

Smaile face part 1

This example shows the first step toward building a smiley face, rendering a yellow circular background with two black eyes and an arc-shaped mouth on an SVG canvas. The React component structure uses a custom `BackgroundCircle` component for the face, while D3’s `arc` generator defines the mouth path with specified inner and outer radii and start/end angles. All shapes are positioned relative to a central transform group, with eye offsets and radii set as constants. The visualization uses React 16.7 and D3 v7, rendering static SVG elements without animation or interaction.

Jun 12, 2021