Magomed Shamaev

@ms77grz·4 public vizzes

Smiley Face Part III

This example uses React and D3 v7 to render a single SVG circle that follows the mouse cursor. The circle’s center coordinates are updated via React state on every mouse move event, using the `onMouseMove` handler. The code leverages D3’s `arc` module and React’s `useState` hook, with a fixed canvas size of 960 by 500 pixels. The result is an interactive smiley face that tracks pointer movement in real time.

Jul 29, 2021

Loading thumbnail…

Smiley Face Part III

A yellow circle with a black outline forms the face, and two solid black circles serve as eyes. A thick black arc, drawn from the top to the bottom of the face, creates a smile. The example uses React to render SVG elements, and the D3.js `arc` API to generate the mouth path with specified inner and outer radii and start/end angles. The face is centered within a 960 by 500 pixel viewport.

Jul 28, 2021

Loading thumbnail…

Smiley Face Part I

This example shows the first stage of building a smiley face: a large yellow circle with a black outline and two smaller black circles positioned as eyes on a white background. It uses static SVG markup within an HTML file, with hard-coded coordinates and dimensions for each circle element. The rendering relies on basic SVG circle geometry, with the face centered at (480, 250) and a radius of 245, while the eyes are placed symmetrically at x-offsets of 130 from the center. No external libraries or dynamic data are involved.

Jul 28, 2021

Loading thumbnail…

Smiley Face Part II

A yellow circle with a black outline and two black eyes forms a partial smiley face on an SVG canvas. The example demonstrates declarative component structure in React, using JSX to render three circle elements with computed positions. ReactDOM renders the component to the DOM, while the SVG attributes control dimensions, colors, and stroke widths. The face lacks a mouth, leaving the expression incomplete. Static values for eye positions and radii define the layout without interaction or animation.

Jul 28, 2021