Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ppranatiyv
Last edited Feb 21, 2022
Created on Feb 21, 2022

This example builds a silver smiley face in SVG using D3.js v5, with a yellow stroke and animated eyebrows that move up and down over two-second transitions. The code selects the SVG element, appends a group centered on the canvas, and constructs facial features including circles for eyes, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. The eyebrows transition their vertical position using chained `transition.attr` calls, demonstrating fundamental DOM manipulation and animation with D3’s selection and transition APIs.

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 smiley face out of SVG shapes—a yellow circle, two eyes, and a mouth drawn with `d3.arc()`—and animates its rectangular eyebrows by chaining two `transition().duration()` calls. The code selects the SVG element with `d3.select`, appends a group for centering, and transitions the eyebrow container between two vertical offsets, creating a bobbing motion. It demonstrates fundamental DOM manipulation and chained transitions using D3 v5 without external data.

Ddhanushkar006
95% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including circles for eyes, rectangular eyebrows, and an arc-based mouth and nose. The eyebrows animate upward and downward using chained `transition()` and `.attr()` calls, creating a subtle moving expression. The code uses D3 v5’s `select` and `arc` utilities, with the entire face centered on an SVG canvas and rendered in pink and yellow. The animation runs once on page load, with no data source or user interaction.

PPrathyusha Jampala
95% match
Loading thumbnail…

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

This example uses D3.js to build a smiley face from basic SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The animation shows the eyebrows moving down and back up through chained `transition` calls, each lasting two seconds. The code imports `select` and `arc` from D3, sets up the SVG canvas, and uses `attr('transform')` to position elements relative to the center. It demonstrates fundamental DOM manipulation and animation with D3 v5.

AAvinarasi
95% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with animated eyebrows. The face is constructed using SVG elements, including a yellow circle for the head, two circles for eyes, and an arc-generated mouth. The eyebrows, rendered as rectangles, move up and down using chained `transition().duration()` calls to create a looping animation. The code uses D3 v5’s `select`, `arc`, and transition APIs to handle element creation and animation.

DDanyalMazhar
95% match
Loading thumbnail…

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

This example builds a cheerful, animated smiley face using D3.js (v5) and SVG. It demonstrates core DOM manipulation and transitions by drawing a yellow head, eyes, eyebrows, and a mouth with the `d3.arc` path generator. The code sequentially applies a 2-second `transition` to shift the eyebrow group vertically, creating a bobbing motion. The face is centered and scaled relative to the SVG’s dimensions, with all shapes positioned using calculated offsets for eyes and brows.

RRadha246
95% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives—a yellow circle, two eyes, eyebrows, and a mouth—and animating the eyebrows through a two-stage transition. The code uses D3 v5’s `select`, `append`, and `attr` methods to build the SVG structure, while the `transition().duration(2000)` API moves the eyebrow group vertically in a looping sequence. The mouth is drawn with the `arc` shape generator, and static layout parameters such as `eyeSpacing` and `eyebrowYOffset` control facial proportions.

Rrohitchavan007
95% match
Loading thumbnail…

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

This example demonstrates a yellow smiley face drawn from basic SVG shapes, with animated eyebrows that move up and down. The face is constructed using D3.js v5 primitives including `circle`, `rect`, and `path` elements, positioned through SVG `transform` attributes. The eyebrows animate via chained `transition().duration()` calls, which shift the group's vertical translation. The mouth is created using the `d3.arc` generator to produce an arc path. All elements are centered within an SVG canvas using a single `g` group and coordinate offsets.

DDharanitharan-J
95% match
Loading thumbnail…

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

This example shows a stylized smiley face built with D3.js v5, rendered as SVG with animated eyebrows that move up and down repeatedly. It demonstrates fundamental DOM manipulation by selecting an SVG element and appending groups, circles, rectangles, and a path for the mouth. The code uses D3’s `select` and `arc` APIs, along with chained `transition().duration()` calls to animate the eyebrow positions. The face is centered with a magenta circle background, and the animation loops via transition chaining without external data, relying purely on hardcoded geometric constants.

TTarun Kumar Bosupally
95% match