carlospereiraf

@carlospereiraf·2 public vizzes

Mouse Interaction

This example shows a yellow circle that follows the mouse cursor across an SVG canvas. Built with React and rendered as SVG, the visualization tracks the cursor’s position using an `onMouseMove` event handler on the `<svg>` element, updating the circle’s center coordinates via React’s `useState` and `useCallback` hooks. The canvas is 960 by 500 pixels, and the circle starts at the center before responding to mouse movement.

Nov 28, 2021

Loading thumbnail…

Hello HTML

This example renders a smiley face using React components that generate SVG circles and a D3 arc path. The `BackgroundCircle`, `Eyes`, and `Mouth` components receive numeric parameters for radius, offsets, and stroke width, which are assembled within an SVG group translated to the canvas center. The mouth is created with the `d3.arc` API, producing a half-circle path. The final graphic demonstrates layered SVG primitives and D3 geometry within a React rendering pipeline.

Nov 27, 2021