Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
HHarshavardhan
Last edited Feb 25, 2023
Created on Feb 24, 2023

This example creates a smiling face from SVG primitives, with animated eyebrows and fixed features like eyes, ears, a nose, teeth, glasses, and a beard. It demonstrates DOM manipulation and transitions using D3.js v5, specifically `select`, `append`, and `transition().duration()`. The face is built on a single SVG canvas, using paths from `d3.arc()` for the mouth and nose, and basic shapes for the remaining elements. An embedded YouTube video shows the resulting animation.

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 Fork of Let's make a face with D3.js!

A smiling face assembled from SVG primitives demonstrates fundamental D3.js DOM manipulation. The code uses D3 v5 selections, `append`, and `attr` to build the face features in a central `<g>` element, including ears, eyes, eyebrows, nose, mouth, teeth, tongue, hair, hat, and collar. A chained `transition` with `duration` animates the eyebrows moving up and down over four-second intervals. The example emphasizes basic shape construction with `d3.arc` and direct attribute setting, rendering entirely as animated SVG.

Nnehabaddam
94% match
Loading thumbnail…

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

This example shows a simple animated smiley face with eyebrows that move up and down. Built with D3.js v5, it renders an SVG face using basic shapes like circles, rectangles, and an arc for the mouth. The eyebrows animate through chained `transition()` calls that repeatedly adjust their vertical position. All elements are positioned relative to the SVG center using a group transform, and the code imports specific utilities such as `select` and `arc` from the D3 library.

HHarshinireddyy19
94% match
Loading thumbnail…

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

This example shows a simple animated smiley face with eyebrows that move up and down. Built with D3.js v5, it renders an SVG face using basic shapes like circles, rectangles, and an arc for the mouth. The eyebrows animate through chained `transition()` calls that repeatedly adjust their vertical position. All elements are positioned relative to the SVG center using a group transform, and the code imports specific utilities such as `select` and `arc` from the D3 library.

HHarshinireddyy19
94% match
Loading thumbnail…

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

This example displays a cartoon smiley face built with SVG shapes using D3.js v5. The face includes animated eyebrows that move up and down via chained `transition.duration` calls, along with static features such as eyes, a nose, mouth, teeth, hair, beard, and sunglasses. The code uses D3 selections and the `arc` generator to create the mouth path, and demonstrates fundamental DOM manipulation by appending circles, rectangles, and paths to an SVG canvas. A video tutorial is embedded in the README.

Ssreesushmavad
94% match
Loading thumbnail…

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

This example demonstrates a smiley face drawn with D3.js, featuring animated eyebrows that move up and down in a looping transition. The face is constructed using SVG primitives, with a yellow circle for the head, two eye circles, and a mouth path generated with the `arc` function. The code imports `select` and `arc` from D3 v5, explicitly setting dimensions from the SVG attributes and centering a group element. The eyebrows are rectangular shapes within a nested group, animated via chained `transition` calls that adjust their vertical position over two-second intervals.

HHarshavardhan
94% match
Loading thumbnail…

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

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping motion. The example demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` to append SVG circle, rectangle, and path elements for the face, eyes, eyebrows, and mouth. Animated eyebrows are implemented with chained `transition.attr` calls that alternate the vertical position of a group containing two rectangles. The mouth is generated using the `d3.arc` helper with specified inner and outer radii and angle ranges.

MMadan05101998
94% match
Loading thumbnail…

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

A D3.js animation builds a smiling face from SVG primitives, with eyebrows that repeatedly shift up and down over two-second intervals. The code uses `d3.select` and `d3.append` to construct the face, and the `d3.arc()` API generates the mouth as an annular sector. The eyebrows animate via chained `transition().duration(2000)` calls on an SVG group, demonstrating fundamental DOM manipulation and animated attribute updates within an SVG canvas.

HHarishma Nallala
93% match
Loading thumbnail…

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

This visualization presents a smiling face constructed from SVG shapes: a circular head, two eyes, animated eyebrows, and a curved mouth. The eyebrows move up and down repeatedly in a continuous cycle, demonstrating basic DOM manipulation through D3.js’s selection and transition APIs. The code relies on D3 v5, using `select`, `append`, and `transition` to animate rectangle eyebrow elements, while a static path built with `arc()` forms the smile. The example runs as a self-contained HTML page with an embedded SVG canvas.

AAISWARYAMARAPATLA1999
93% match