Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSANEEM MOHAMMAD
Last edited Feb 25, 2023
Created on Feb 25, 2023

A D3.js smiley face renders as SVG circles, arcs, and rectangles on a green background. The face’s eyebrows translate vertically in a looping transition, moving up then back down over four seconds. The code builds the face using `d3.select`, `d3.arc` for path shapes, and `selection.transition().duration()` for the animation. All elements are positioned manually with fixed pixel offsets relative to the SVG center, with no external data source.

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 D3.js smiley face animates by moving its eyebrows up and down in a looping transition. The face is built entirely with SVG primitives—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—positioned within a centered group. Using `d3.select`, `d3.arc`, and chained `transition().duration()` calls, the code shifts the eyebrow group’s vertical translation between two offsets. A black background and yellow face with black strokes create clear visual contrast. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

SSANEEM MOHAMMAD
96% match
Loading thumbnail…

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

A smiling face is drawn on an SVG canvas using D3.js v5, with a fixed orange head and two circular eyes. The left eyebrow is notably absent, while the right eyebrow animates vertically through a chained `transition().duration(2000)` sequence, moving up and then back down. A mouth is rendered using the `d3.arc()` shape generator to create two curved paths. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending groups, circles, rectangles, and paths with absolute positioning.

SSANEEM MOHAMMAD
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
95% match
Loading thumbnail…

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

A green smiley face with animated eyebrows is rendered in an SVG using D3.js v5. The face includes circles for eyes and a mouth drawn with the `d3.arc` function, while its eyebrows are rectangles that move up and down via chained `transition` calls. Additional static elements—two white eye circles, a red dot, and a blue star path—are appended to the same SVG, demonstrating basic DOM manipulation and shape creation with D3 selections and attributes.

SSaiipriiya
95% match
Loading thumbnail…

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

A D3.js smiley face, built from SVG primitives, demonstrates fundamental DOM manipulation and transitions. A green circle forms the head, with two dark circles for eyes and an orange arc for the mouth, all positioned using geometric constants. The animation shows both rectangular eyebrows moving up and down together via chained `transition().duration()` calls that modify their container's `transform` attribute. The code uses D3 v5 selections and the `arc` generator to construct the mouth path, with all elements grouped and translated to the SVG center for easy positioning.

NNavaneeth-Ragi
95% 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
95% match
Loading thumbnail…

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

A smiley face with light green circular head, black-outlined eyes, and a double-arc mouth animates its rectangular eyebrows upward and downward in a looping transition. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and `transition` to move SVG elements. Eye and eyebrow spacing are controlled via offset constants, while the mouth is drawn with the `d3.arc` path generator. The animation runs continuously, with each eyebrow movement taking two seconds in each direction.

SSANEEM MOHAMMAD
95% match
Loading thumbnail…

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

A D3.js smiley face demonstrates animated SVG construction, with eyebrows that repeatedly translate upward and back over two-second transitions. The example builds the face from geometric primitives—circles, rectangles, and an arc path for the mouth—using d3.select to target the SVG element and d3.arc to define the mouth’s curved shape. The code explicitly manages a group hierarchy, translating components like eyes and eyebrows relative to the face’s center. This serves as a foundational exercise in DOM manipulation and chained transition methods within the D3 v5 API.

TTejaswicmandava
95% match