Vishal Sriramoju

@LastFromtheTop·2 public vizzes

Fork of Fork of Let's make a face: part 3

This example shows a smiley face built with React and D3.js, rendered as SVG. The face consists of a gold circle with a black stroke, two eyes positioned symmetrically, and a mouth created using D3’s `arc` generator. React manages the component structure, while D3 provides the geometric calculations for the mouth’s path. The code uses fixed numeric constants for sizing and positioning, and renders the entire face within a single `<g>` transform to center it on the canvas.

Jan 12, 2022

Loading thumbnail…

Fork of Let's make a face: part 3

This example displays a smiley face built with React and D3, using SVG circles for the face and eyes and a D3 arc path for the mouth. The face is centered on a 960 by 500 canvas, with gold fill and black accents. React 17 manages the component structure, while d3.arc computes the mouth’s curved geometry from inner and outer radii plus start and end angles. The code explicitly sets dimensions, offsets, and radii as constants, rendering all elements within a single transformed group.

Jan 12, 2022