Francisco Nicolas Berthet Cosentino

@frann11·2 public vizzes

Fork of Smiley Face.2

This example renders a yellow smiley face as an SVG graphic using React for component structure and D3’s `arc` generator to create the mouth. The face consists of a large circle for the head, two smaller circles for eyes, and a curved path for the mouth, all positioned relative to a central transform. The code relies on D3 v7 and React 16.9, drawing shapes directly with SVG elements rather than data-driven bindings. The mouth arc uses inner and outer radii with start and end angles to form a semicircular smile.

Jan 22, 2022

Loading thumbnail…

Smiley Face.1

This example renders a stylized smiley face as a static SVG graphic within a React component. The face is composed of a yellow circle with a black stroke, two small circles for eyes, and an arc-shaped mouth created using the `d3.arc` API. The coordinates for the face elements are computed relative to the center of the 960×500 canvas, and the mouth path is generated with start and end angles. The code imports React, ReactDOM, and the `arc` function from d3.v7, and renders the final SVG into the page’s root element.

Jan 22, 2022