yesheysamdrup

@yesheysamdrup·2 public vizzes

Smiley Face Part 1

A yellow smiley face is drawn as a single SVG graphic, centered on a 960×500 canvas. The face consists of concentric circles for the head and eyes, a black stroke outline, and a circular mouth rendered as a filled arc path. The code uses React 17 and D3 v7, specifically the `arc` generator from the `d3` module to create the mouth geometry. All shapes are positioned using fixed pixel coordinates and rendered as SVG elements within a React component.

Aug 26, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

A D3.js animation demonstrates fundamental DOM manipulation by drawing a smiling face whose eyebrows move. The code uses D3 selections to append SVG shapes—a yellow circle, two eye circles, and rectangular eyebrows—onto a 960×500 viewport. Eyebrows animate by chaining `transition().duration(2000)` calls that translate their group element upward and back. A mouth is rendered as an arc path using the `arc()` generator. The example is a fork of a tutorial, built with D3 v5 and SVG rendering.

Aug 23, 2021