daukamic

@daukamic·3 public vizzes

Fork of Mouse Follower

This example shows a simple interactive circle that tracks the mouse cursor as it moves across an SVG canvas. Built with React 16.9 and rendered through ReactDOM, it uses the `useState` and `useCallback` hooks to manage and update the circle’s coordinates in response to the SVG’s `onMouseMove` event. The circle’s position is derived directly from the browser’s `clientX` and `clientY` event properties, with no external data source—the visualization is purely a demonstration of state-driven, event-based rendering in a React component.

Jan 14, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of eighteen randomly configured smiling faces demonstrates the separation of visual components in React with D3.js. Each face combines a yellow background circle, two eyes, and an arc-shaped mouth, with randomized parameters controlling stroke width, eye offset, eye radius, and mouth dimensions. The implementation leverages React’s component model through separate files for each facial feature, while D3’s `arc` generator creates the mouth paths. SVG output is produced via React’s rendering, with all faces sharing identical dimensions and center points. The result shows how compositional design and procedural randomness can create visual variety within a fixed template.

Jan 13, 2022

Loading thumbnail…

Fork of Smiley Face Part III

A stylized smiley face is drawn using SVG shapes, with a large indigo circle for the head, green and red eyes, and a curved mouth path. The code combines React with D3, using React to render the SVG elements and the `arc` function from D3 to compute the mouth’s path. The layout is centered via a translation transform, and all dimensions are defined as constants at the top of the file. The example demonstrates a declarative hybrid approach where D3 handles geometric calculations while React manages the component structure.

Jan 13, 2022