Ashwin

@ashwintr·2 public vizzes

Fun with smiley face

This example shows a simple smiley face built from a yellow circle, two black eyes, and a curved mouth, rendered as vector graphics. The face is composed declaratively using React components, with layout controlled by SVG’s coordinate system. The mouth is drawn using the d3.arc API to generate a path between two angles, while the background circle and eyes are plain SVG circle elements. The entire face is translated to the center of a 960×500 SVG canvas via a group transform.

Jun 13, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built with React and D3, rendered as SVG with a yellow face, two eyes, and a curved mouth. The code uses D3's `arc()` generator to create the mouth shape, while React handles the component structure and JSX for the SVG elements. The face is centered with fixed dimensions, and positioning relies on calculated offsets for the eyes and mouth radius. D3 v7 facilitates the arc path generation, while React 16.9 manages the DOM rendering.

Jun 12, 2021