slicingelbow

@slicingelbow·2 public vizzes

Smiley Face Part III

A smiley face is rendered as an SVG graphic using React components and D3’s arc generator. The face consists of a yellow circle for the head, two black circles for eyes, and a mouth drawn with a `d3.arc()` path anchored at the center. The React app maps the static dimensions and coordinates into SVG elements, while D3’s `arc` function computes the mouth’s curved path. The example demonstrates combining React’s declarative UI with D3’s shape utilities for a simple, fixed visualization without data input.

Dec 31, 2021

Loading thumbnail…

Smiley Face Part II

A yellow smiley face fills the browser window, rendered as a head-and-shoulders portrait constructed from basic SVG shapes. The face uses a large yellow circle for the head, two black dot eyes, and a red mouth, all drawn relative to the screen center with explicit radius and offset values. Built with React and ReactDOM, the visualization generates an SVG element whose dimensions adapt to the viewport, positioning the face symmetrically and scaling its head radius to fit the available height.

Dec 31, 2021