Andrea Gnecco

@andreagnecco·2 public vizzes

Fork of Smiley Face Part III

This example renders a classic smiley face as an SVG graphic using React and D3.js. The face is composed of a yellow circle with a black stroke, two eye circles, and a mouth drawn as an arc path generated by D3's `arc()` API. React constructs the SVG elements declaratively, while D3 computes the mouth’s curved path geometry. The positioning and dimensions are defined with JavaScript constants, and the output is a static, centered smiley in a 960-by-500 viewport.

Sep 5, 2022

Loading thumbnail…

Smiley Face Part 1

A yellow smiley face is drawn as a static SVG graphic centered on the page, with black-outlined circular eyes, a black arc for the mouth, and a smaller arc for the nose. Built with React and D3 v7, the code defines shapes using D3’s `arc` generator for the mouth and nose paths, while the face and eyes are plain SVG `<circle>` elements. The rendering leverages React’s declarative JSX to output the SVG structure, with coordinates and dimensions computed from fixed variables.

Sep 5, 2022