Yasser Aziz

@yasserius·2 public vizzes

Fork of HTML Starter

This interactive visualization renders a single circle that follows the mouse cursor across a 500x500 SVG canvas. The circle's position updates in real time through React's `useState` hook, which tracks mouse coordinates via an `onMouseMove` event handler. The code imports the `arc` function from d3.v7, though it is not used in the current implementation, and renders the SVG using ReactDOM. The example demonstrates a minimal React and d3 integration, with the circle radius fixed at 10 pixels.

Sep 22, 2021

Loading thumbnail…

Fork of D3 Starter

This example shows a simple, smiling face constructed from SVG shapes, rendered inside a React component. The face consists of a blue circle for the head, two smaller circles for eyes, and a mouth drawn using an arc path generated by D3's `d3.arc()` helper. The code uses React for component composition and state management, while D3 v7 provides the arc geometry. All shapes are positioned within a single SVG element centered via a group transform, with D3 loaded from an external script tag.

Sep 22, 2021