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

100%

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

✓ Published0🌍 Public

Last edited Aug 9, 2023

Created on Aug 9, 2023

This example draws a smiling face using SVG circles and an arc path. The face is composed of a yellow circle for the head, two smaller circles for the eyes, and a mouth created with D3’s `arc` generator. The code uses React to render the SVG elements and D3 v7 for the arc path calculation, applying a black stroke to the head and positioning all elements relative to the center of the viewport.

AI-generated description

Half way towards a smily face part 1

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example displays a smiling face constructed from SVG shapes, including a yellow circle, two eyes, and a mouth path with a curved arc. Built with React and D3.js v7, it uses the `arc()` function from d3-shape to generate the mouth with specified inner and outer radii and angles. Positioning is handled through SVG transforms, with the face centered on an 960×500 viewport. The code demonstrates proportional sizing by calculating radii relative to the center coordinates and stroke width.

UUzoemeka Okechukwu Innocent

96% match

Loading thumbnail…

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

This example builds a smiling face in SVG using D3.js v5 and React, with a yellow circle for the head, two eyes, and an arc-based mouth. The code uses `d3.arc` to generate the mouth path and `d3.select` to append and style elements. An animated eyebrow movement is achieved with chained `transition` calls that shift a group containing two rectangles up and down over two-second durations. The face is centered via SVG transforms, with positions calculated from the viewport dimensions.

HHarishma Nallala

94% match

Loading thumbnail…

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

A smiling face is drawn with D3.js v5, featuring a yellow circle, two eyes, animated eyebrows that repeatedly move up and down, and a mouth shaped using an arc path. The SVG is centered using a translation, and the eyebrows animate via chained `transition().duration` calls that toggle their vertical offset. The code imports `select` and `arc` from D3, reads the SVG dimensions from attributes, and builds the face from primitive shapes. The example is rendered as a static SVG with animation triggered on load, using a React-friendly structure.

SSatyaVineeth

94% match

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

Built with React and D3, this example renders a smiling face as an SVG composed of styled circles and an arc path. A yellow circle with a black stroke forms the head, while two smaller circles serve as eyes, positioned symmetrically from the center. The mouth is generated using the D3 `arc` generator with specified inner and outer radii and angular start and end points. All elements are grouped and translated to the center of the 960 by 500 viewport. The code defines dimensions and offsets as constants, demonstrating a clear separation of configuration and rendering logic.

WwesSE22020

93% match

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. It draws a yellow circle with a black stroke, two eyes, and a curved mouth using the `d3.arc()` generator. The face is centered via a `<g>` transform, with eye and mouth positions computed from offset constants. The code uses React 16.9 for DOM rendering and D3 v5 for the arc path calculation, with all shapes drawn declaratively as SVG elements.

Aatqlong

93% match

Loading thumbnail…

Fork of Fork of Fork of Let's Make a Face Part I

This example renders a smiley face using React and D3.js, drawing a yellow circle with black stroke as the head, two black eye circles, and a mouth arc. The code uses D3’s `arc` generator to create the mouth path with specified inner and outer radii and angular bounds. SVG elements are positioned via a centered `<g>` transform, with constants for eye offset, radius, and stroke width. The visualization shows a static, geometric facial composition without interactivity, built entirely through React components and D3 utilities.

Bbhavani44

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example uses React and D3 to draw a smiley face with SVG primitives. It shows a yellow circle head with two black eyes and a curved mouth rendered as an arc. The code constructs the mouth using the `d3.arc()` generator, setting inner and outer radii and start and end angles for a half-circle opening. The fixed dimensions are centered in a 960×500 viewport, with all facial features positioned relative to the center using SVG’s `transform` attribute and D3’s arc path output. The implementation uses React 16.9 and D3 v6.

Ddeep1358

93% match

Loading thumbnail…

Fork of Fork of Let's Make a Face Part III

This example draws a yellow smiley face centered in an SVG canvas using React and D3 v7. It shows a circle for the head, two smaller circles for eyes, and a curved mouth path generated with the `d3.arc()` API. The face is positioned via a translation transform, with eye offsets and radius defined as constants, while the mouth uses inner and outer radii with angled start and end points. All shapes are rendered declaratively as SVG elements within a React component.

PPakapone Supavarn

93% match