Zoe

@wangzoe2021·3 public vizzes

Smiley Face Part I

A yellow smiley face rendered with React and D3 v7 draws a circle for the head, two smaller circles for eyes, and a mouth built using the `arc` generator. The SVG uses fixed pixel dimensions, with positions derived from `width`, `height`, and offsets like `eyeOffsetX` and `eyeOffsetY`, plus a stroke width for the face outline. The mouth arc spans from PI/2 to 3PI/2, creating a crescent shape, while the head’s radius is calculated from the SVG height minus half the stroke width. All shapes are drawn declaratively via React’s JSX, with D3 only supplying the arc path.

Aug 19, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiling face rendered as a yellow circle with two black eyes, centered on a responsive SVG canvas that fills the browser window. The face is built using React components, with the SVG circle elements positioned relative to the screen’s center coordinates. The code uses React 16.9 and ReactDOM to render the scalable vector graphics, calculating the head radius and eye offsets from the window dimensions. The mouth is not implemented, leaving only the head and eyes visible in the final output.

Aug 19, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization displays a simple smiley face constructed from basic SVG shapes: a yellow circle for the head and two smaller black circles for eyes, centered on a 960-by-500 canvas. The code uses raw SVG elements (`<circle>`, `<svg>`) with inline attributes for positioning and styling, including a thick black stroke for the face outline. No JavaScript libraries are involved; the rendering is purely static SVG markup. The example serves as a starting point for building more complex facial features, as indicated by the title and accompanying video tutorial.

Aug 19, 2021