darrenm95

@darrenm95·5 public vizzes

Fork of Smiley Face Part II

This example shows a yellow smiley face drawn with SVG circles in React, where one circle follows the user’s mouse movements across the screen. The face includes two static eyes and a large yellow head with a black outline, while the nose moves dynamically. It uses React’s `useState` and `useCallback` hooks to track mouse coordinates via an `onMouseMove` event handler, re-rendering the circle’s `cx` and `cy` attributes. The visualization is built with React 16.9 and rendered as SVG, with a fixed canvas size of 960 by 500 pixels.

Jun 18, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and SVG. The face is centered dynamically based on the window dimensions, with a yellow circular head, two black eyes, and a black outline. The code constructs the visualization with React elements for SVG circles, using `window.innerWidth` and `window.innerHeight` to set the canvas size. ReactDOM renders the component into the DOM, while the stroke and fill attributes define the face’s appearance. The implementation relies on React 16.9 and produces the graphic entirely through declarative SVG markup.

Jun 18, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face is rendered as an SVG graphic centered on the canvas. The face consists of a circular background with a black stroke, two filled eye circles, and a curved mouth generated using the D3 `arc` function. The React code assembles the face from componentized parts, including `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, which accept size and position parameters. The drawing is implemented with d3.v5 and React, producing the final SVG output.

Jun 18, 2021

Loading thumbnail…

Smiley Face Part I

This example shows a classic yellow smiley face built entirely with React and SVG. It uses a yellow circle for the head, two black circles for eyes, and a curved mouth generated with D3’s `arc` generator. All elements are positioned using calculated center coordinates and offsets, with a thick black stroke outlining the face. The code leverages React 17 and D3 v7, rendering the composition as SVG shapes within a React component.

Jun 17, 2021

Loading thumbnail…

Smiley Face Part I

A static SVG smiley face is drawn with three circles: a large yellow outline for the face and two smaller black filled circles for the eyes. The page renders at 960 by 500 using raw SVG elements inside an HTML document, with the face centered by explicit coordinates. The code uses no JavaScript libraries or data sources; it relies solely on inline SVG circle tags and CSS to hide page scrollbars. This is the first half of a two-part demonstration, as noted in the accompanying README, leaving the mouth unfinished.

Jun 17, 2021