Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
AAndreas Papastergiou
Last edited Aug 14, 2021
Created on Aug 14, 2021

This visualization demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face. A yellow circle with a black stroke forms the head, while two smaller circles serve as eyes, and a path drawn with `d3.arc()` creates the mouth. The eyebrows, rendered as rectangles, move up and down repeatedly using chained `transition().duration()` calls, animating their `transform` attributes over two-second intervals. The scene uses an SVG canvas and relies on D3 v5.9.2 for element selection, creation, and 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 Let's make a face with D3.js!

This visualization demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face from basic SVG shapes. A yellow circle forms the head, with black circles for eyes, rectangles for eyebrows, and an arc-generating path for the mouth. The eyebrows animate vertically using chained `transition()` calls over two-second intervals. The example uses D3 v5 selection methods like `select` and `append`, alongside the `arc` generator, all rendered within a plain SVG element.

Ttmorgante
96% match
Loading thumbnail…

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

This example creates an animated smiley face using D3.js v5. The visualization renders a yellow circle head with eyes, eyebrows, and a mouth as SVG elements. The eyebrows animate by moving up and down over two seconds using D3's transition system. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending shapes with attributes like position and fill color. It also uses D3's arc function to generate a path for the mouth.

JJyothicherukuri
96% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face with yellow circular head, black-outlined eyes, and an arc-based mouth. Animation brings the face to life as the eyebrows, drawn as rectangles, move upward and downward through chained `transition().duration(2000)` calls on the group element containing them. The visualization uses D3 v7 with SVG output, constructing the face within a centered `<g>` group and positioning features relative to the viewport dimensions. The code explicitly imports `select` and `arc` from the D3 library, with the mouth path generated using `d3.arc()` with specified inner and outer radii and angle bounds.

Ddok0086m
96% match
Loading thumbnail…

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

A smiley face rendered with SVG demonstrates fundamental DOM manipulation and animation in D3.js. The yellow circle, eyes, eyebrows, and arc-based mouth are constructed using selections and the `d3.arc` generator. The eyebrows move via chained `transition` calls over two-second durations, shifting their group's `transform` attribute up and down. The animation loops by alternating between two translate positions, while the static elements remain fixed. D3 v5 handles the SVG creation and all attribute updates.

NNic Dominguez
96% match
Loading thumbnail…

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

A smiley face built with SVG and animated with D3.js demonstrates fundamental DOM manipulation. Yellow circular head, two eyes, rectangular eyebrows, and a curved mouth are created using D3 selections and the `d3.arc` path generator. The eyebrows repeatedly move up and down via chained `transition` calls, each lasting two seconds. The code uses D3 v5, imports `select` and `arc` from the library, and renders entirely in SVG without external data.

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

This visualization demonstrates basic D3.js DOM manipulation by rendering an animated smiley face. The code builds a yellow circle for the head, adds two circular eyes, and animates rectangular eyebrows upward and downward using chained `transition()` calls. A mouth is drawn using an `arc()` path generator. The example uses D3 v5 to select SVG elements, set attributes like fill and stroke, and apply timed transforms, all rendered as an SVG animation.

Ssalwa191
96% 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. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows—rendered as rectangles—move up and down through a chained `transition().duration(2000)` sequence, shifting the transform attribute over time. The code uses D3 v5 selection methods like `append` and `attr`, plus the `arc` generator from the `d3` module, all rendered as SVG elements.

AAmandineM97
96% match