Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Smiley Face Part-3 (React and d3)

Public visualization

Fork of Smiley Face Part-3 (React and d3)

0 stars1🌍 Public
Hhung2606
Last edited Oct 9, 2021
Created on Oct 9, 2021

This example shows a smiling face built with React and D3, rendered as an SVG. The face consists of a yellow circle with a black stroke, two black eyes, and a mouth drawn using the `arc` helper from the `d3-shape` package. The mouth’s path is generated by configuring the arc’s inner and outer radii and start and end angles, then passing the result to an SVG path element. Grouping and positioning rely on SVG group elements with a transform attribute using ES6 template literals.

AI-generated description

Part-3) D3 intro

  • Getting started with the D3 library

  • Using arc from the d3-shape package arc is a helper function used for drawing an arc shape for the mouth.

  • SVG path elements

  • SVG group elements and the transform attribute

  • Using ES6 Template Literals

  • Adding the mouth to our face

Assignment: Tweak the Face!!

Comments

Sign in to join the discussion.

MIT Licensed