Skip to main content
Log in
M

manideep905

@manideep905·4 public vizzes

Loading thumbnail…

Mouse Follower

This example displays a static SVG circle at the center of the viewport, with mouse movement tracked and logged to the console. Built with React and D3, the circle is rendered via JSX inside an SVG element whose onMouseMove handler captures the cursor position. The React event handler logs clientX and clientY coordinates, demonstrating basic event binding and state management without animating the circle itself.

Oct 9, 2022
Loading thumbnail…

Fork of Fork of 2st try

A grid of small, round faces generated with React and SVG components. Each face has a yellow background circle, two eyes, and an arc-shaped mouth, with randomized eye, mouth, and accessory sizes for slight variation. The code uses the D3 `arc` API to construct the mouth path and `range` to generate 18 faces. All elements are rendered inside an SVG group translated to the center of each face, and the React components `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` compose the visual hierarchy.

Oct 9, 2022
Loading thumbnail…

Fork of 2st try

This example renders a grid of 18 cartoon faces, each generated with randomized eye size, mouth width, and mouth radius. The visualization is built with React components and D3.js, using SVG for rendering. The face geometry is composed from reusable React components—BackgroundCircle, Eyes, and Mouth—where the Mouth uses D3’s `arc` generator to create a curved path. Each face is centered in a 150x150 viewport, with the yellow background circle stroked in black and positioned via SVG transforms.

Oct 9, 2022
Loading thumbnail…

1st try

A grid of randomly generated cartoon faces demonstrates the reusable component pattern in React. Each face is drawn with SVG circles for the background and eyes, and a D3 arc path for the mouth, with randomized eye radius and mouth dimensions. The `d3.range` function creates 18 face instances, while `ReactDOM.render` mounts the app. D3’s `arc` generator computes the mouth shape, and all elements are positioned via SVG transforms.

Oct 8, 2022