Lyanne Chin

@lyannechin·3 public vizzes

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

This animated example demonstrates a smiling face drawn with D3.js that continuously raises and lowers its eyebrows. The visualization uses basic DOM manipulation via `d3.select` and `svg.append` to construct the face from circles, rectangles, and a path. The eyebrows' movement is achieved using D3's `transition` method with a two-second duration, toggling between two vertical positions. The face is rendered as SVG elements on a 960 by 500 canvas, with the mouth created using the `arc` method to generate a semicircular path.

Sep 13, 2022

Loading thumbnail…

Fork of Smiley Face Part I

A smiling face composed of SVG shapes is rendered centered in a 960×500 viewport. Yellow circles form the head and eyes, an ellipse serves as the nose, and a mouth is drawn using a D3 arc path generator. The visualization is built with React components, using JSX to declare SVG elements and the `d3.arc()` API to define the mouth’s curvature. All positions are calculated from center coordinates and fixed offset constants, with a black stroke outlining the face.

Sep 7, 2022

Loading thumbnail…

Smiley Face Part I

This example draws a classic smiley face in SVG using React and D3 version 7. The face comprises a yellow circle with a black stroke, two eyes, a nose, and a curved mouth created with D3’s `arc` function. The shape is centered and positioned using explicit coordinates for the eyes, nose, and mouth, demonstrating basic geometric composition with SVG primitives.

Sep 7, 2022