ionut-g

@ionut-g·4 public vizzes

Mouse Follower

A smiley face rendered in SVG follows the mouse as it moves across the screen. The visualization uses React to manage the component state and D3’s `csv` loader to fetch color data from a remote GitHub gist, displaying each color as a div. The underlying SVG elements are positioned based on the cursor coordinates, with the face drawn using simple circles for the head, eyes, and mouth. The example demonstrates combining React’s declarative UI with D3 for asynchronous data loading and SVG rendering.

Dec 20, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A grid of randomly generated smiley faces, each rendered as an SVG circle with a yellow fill and black stroke, demonstrates component reuse and procedural variation. The React components compose a background circle, eyes, and a mouth built with D3's `arc` generator. Using `range(6*3)` from D3, the app maps 18 array elements to `Face` components, each with randomized properties like `eyeOffsetX`, `eyeRadius`, and `mouthWidth`. The visualization relies on React 16.9 for DOM management, D3 v5 for shape generation, and SVG rendering within a fixed 160×160 viewport.

Dec 16, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a yellow smiley face in an SVG using React components and D3’s `arc` generator to draw the mouth. The face’s background circle and eyes are plain SVG circles, with the mouth created as a path from a D3 arc spanning a half-circle. React manages the component structure, while D3 and SVG handle the geometric layout. The illustration demonstrates a simple declarative approach to combining React’s component model with D3’s shape utilities.

Dec 16, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example displays a yellow smiley face with black-outlined eyes and a curved mouth, rendered as SVG within a React component. The face is built from arcs and circles, positioned relative to a central coordinate system. The code combines React 16.9 with D3 v5, using the d3.arc API to generate the mouth path and a reusable BackgroundCircle component for the face’s outer shape. Dimensions and offsets are static constants, and the SVG is rendered directly into the DOM via ReactDOM.

Dec 16, 2021