Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ssandeepss2020
Last edited Mar 17, 2023
Created on Mar 17, 2023

This example builds a smiling face from basic SVG shapes using D3.js v5, with a yellow circle for the head, black circles for eyes, a curved path for the mouth, and rectangular eyebrows. The eyebrows animate by transitioning the eyebrow group’s translate attribute in two successive two-second intervals, moving them upward and then back down. The code uses D3’s `select`, `arc`, and `transition` APIs, and renders everything to SVG within a fixed 960×500 viewport. No external data is loaded; all geometry is defined directly in the script.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example builds a smiling face from basic SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and chained transitions: the eyebrows animate upward and back down over four seconds via `transition.attr` calls on a `g` element. Rendered in a 960×500 SVG, the face is centered using a translated group, with dimensions for features like eye spacing and eyebrow width defined as variables. No external data is used; the visualization relies solely on hardcoded geometry and D3’s selection and arc APIs.

Ccraig harbottle
96% match
Loading thumbnail…

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

This example builds a smiling face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, and an arc-based mouth. The code demonstrates fundamental DOM manipulation through selections and chained `transition` calls that animate the eyebrows upward and back down over two two-second intervals. Rendering is done entirely with SVG elements appended to a 960×500 canvas, using D3’s `select`, `append`, attribute setters, and the `arc` generator for the mouth path.

AAvi171725888
96% match
Loading thumbnail…

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

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa
95% match
Loading thumbnail…

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

A smiling face made of SVG shapes uses D3.js selections and transitions to animate its eyebrows. The code builds a yellow circle for the head, two eyes, and an arc-based mouth. D3's `transition()` and `attr()` methods move the eyebrow group up and down. The example demonstrates fundamental DOM manipulation with D3 v5, drawing shapes directly in an SVG element.

Ccaptind
95% match
Loading thumbnail…

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

This example uses D3.js v5 to build a yellow smiley face with animated eyebrows. It starts by appending SVG elements—circles for the face and eyes, rectangles for eyebrows, and a path for the mouth—transformed to center the drawing. The eyebrows repeat a two-second transition sequence that moves them upward and back down via `transition.attr()`. The code imports `select` and `arc` from D3 to construct the mouth shape, relying on static coordinates and no external data.

Jjit-bose-10
95% match
Loading thumbnail…

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

This example shows a yellow smiley face built from basic D3.js shapes, with animated eyebrows that move upward and then return to their original position. The face is constructed using SVG circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The code uses D3 v5 selections, attribute manipulation, and chained `transition` calls with explicit durations to drive the eyebrow animation on a fixed 960×500 canvas.

Nnamesh singh
95% match
Loading thumbnail…

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

A smiling face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The code selects an SVG element, appends a yellow circle for the face, and adds eyes, eyebrows, and a mouth using D3’s `arc()` generator. Two transitions animate the eyebrow group’s vertical position over two seconds each, moving them up and down. The example relies on D3’s `select` and `transition` methods to build and animate the static SVG structure.

PPiotr Paszek
95% match
Loading thumbnail…

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

A smiling face built entirely with D3.js v5 uses SVG shapes and transitions to animate its eyebrows. The code draws a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, all positioned within a centered group. D3’s `transition()` method moves the eyebrow group upward and back over two 2-second intervals, creating a repeated eyebrow-raising effect. The example demonstrates fundamental DOM manipulation and SVG rendering through D3’s `select`, `append`, and `arc` APIs.

BBeihaiTianming
95% match