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

100%

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

✓ Published0🌍 Public

Last edited Feb 20, 2022

Created on Feb 20, 2022

Forked from Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face with green circular head, eyes, and an arc-based mouth. An animated sequence uses chained `transition()` calls to move the rectangular eyebrows upward and back over two-second intervals, creating a winking effect. Built with D3 v5, it uses `select`, `attr`, and the `arc` generator to construct SVG shapes, with all elements positioned mathematically based on the SVG dimensions and eye spacing constants.

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 uses D3.js to construct a simple, animated smiley face in an SVG canvas. It demonstrates fundamental DOM manipulation by appending and positioning geometric elements—a green circle for the head, two eye circles, rectangular eyebrows, and a mouth created with a path. The animation runs a continuous two-second cycle that moves the eyebrow group vertically, creating a subtle bobbing effect. The code relies on D3's `select`, `append`, and `transition` APIs to manage the structure and its temporal behavior.

Sskambhore04

96% match

Loading thumbnail…

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

A D3.js smiley face demonstrates fundamental DOM manipulation and animation. The face consists of a yellow circle, two eyes, and a mouth arc, with rectangular eyebrows that animate up and down over two-second transitions using chained `transition` calls. The SVG elements are positioned using translation transforms within a central group. The example uses D3 v5 with the `select`, `append`, `attr`, and `arc` APIs to build and animate the face, rendering via SVG in a browser.

Sserrulate@gmail.com

96% 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 basic SVG shapes. The face consists of a blue circle, two eyes, rectangular eyebrows, and a curved mouth created using the `d3.arc` function. Animated eyebrow movements are achieved through chained `transition().duration().attr()` calls on SVG groups, while the mouth rotates 180 degrees using a similar transition. The code uses the `d3.select` API to access the SVG canvas and relies on version 5.9.2 of the library.

Nneffer77

96% match

Loading thumbnail…

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

This example uses D3.js v5 to build a simple animated smiley face from basic SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and downward through chained `transition` calls, each lasting 2 seconds. It demonstrates fundamental DOM manipulation with `select` and `append`, and uses SVG attributes like `cx`, `r`, and `transform` to position elements relative to a centered group.

Rradhadevarapu

96% 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 shapes, including a yellow circle head, eyes, a line nose, and an arc mouth. The code animates the eyebrows using chained `transition().duration()` calls, moving them upward and back down over two seconds. It uses D3 v5’s `select` to target the SVG element and `arc` to generate the mouth path, with all elements appended to a centered group. The rendering relies entirely on SVG and animation, with no external data source.

Mmivan000

96% match

Loading thumbnail…

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

A smiley face, rendered as SVG elements, demonstrates fundamental DOM manipulation with D3.js. The face's eyebrows animate by repeatedly shifting their vertical position via chained `transition()` calls, each lasting two seconds. The code uses D3's `select`, `append`, and `attr` methods to build the circle, eyes, and rectangular eyebrows, while an `arc()` path creates the mouth. The animation loops the eyebrows up and down continuously.

MMaurice Huang

96% match

Loading thumbnail…

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

Built with D3 v5, this example demonstrates fundamental DOM manipulation and animation by constructing a smiley face from SVG shapes. The code uses `d3.select` to append a circle, eyes, rectangular eyebrows, and an arc-based mouth. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down in a looping motion. All elements are centered within an SVG using a translated group, with dimensions pulled from the SVG attributes. The example highlights basic selections, attribute setting, and transition tweening without external data.

VVenu

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 shapes. A yellow circle, two eyes, a mouth drawn using the `d3.arc` function, and rectangular eyebrows are all appended to an SVG container. The eyebrows animate by moving up and down through a chained `transition` with `attr` changes, using a two-second duration for each movement. The code uses D3 v5’s `select` and `arc` methods, with the animation running once on load.

Llerik03

95% match