Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Kkatebacon32
Last edited May 13, 2021
Created on May 13, 2021

This example displays a yellow smiley face with eyes, eyebrows, and a mouth drawn as SVG shapes. The code uses D3.js to select the SVG element, append groups for facial features, and apply geometric attributes like radius and positioning. An animated sequence moves the eyebrows up and down by chaining two d3 `transition` calls, each with a 2000-millisecond duration. The mouth is created with D3's `arc` function, defining inner and outer radii and angle parameters.

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 demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with an animated expression. It shows a static face whose eyebrows smoothly move up and down over two-second intervals, using SVG shapes composed of circles, rectangles, and a path-based mouth. The code leverages D3 v5’s `select` and `append` methods for element creation, `arc()` for the mouth’s geometry, and chained `transition().duration()` calls to animate the eyebrow group’s transform attribute. The animation runs automatically, cycling the eyebrows between raised and neutral positions.

Kkatebacon32
96% match
Loading thumbnail…

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

This example uses D3.js to draw a simple, animated smiley face in an SVG canvas. The code constructs the face from basic shapes—a yellow circle for the head, two circles for the eyes, rectangles for the eyebrows, and a path for the mouth—using `select` and `append` for DOM manipulation. The animation runs continuously, moving the eyebrows up and down via chained `transition().duration()` calls that alter the group’s `transform` attribute over two-second intervals. The data is entirely hardcoded, with no external dataset.

Kkatebacon32
96% match
Loading thumbnail…

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

This example renders a yellow smiley face with animated eyebrows using D3.js. It builds the face with SVG primitives—circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth—centered via a translated group. The code applies chained `transition().duration(2000)` calls to move the eyebrows up and down repeatedly. It uses `select` to access the SVG element and `arc` from the `d3` module to generate the mouth’s path, with dimensions and positions hardcoded. The animation runs on a 960×500 canvas.

Ppaul4952233@gmail.com
96% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in an SVG. The face is composed of D3.js shapes: a circle for the head, two circles for the eyes, and an arc for the mouth. The eyes' rect eyebrows repeatedly move up and down using chained D3 `transition` calls with a 2-second duration each. The code uses D3 v5's `select`, `append`, and `attr` functions to build the SVG DOM directly.

CCorey-PT
96% match
Loading thumbnail…

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

This example creates a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth centered within an SVG canvas. D3.js selections append SVG shapes and apply a two-second `transition` that moves the eyebrow group upward by 50 pixels and then back down, producing a repetitive animation. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition.attr` calls to alter the `transform` attribute, demonstrating fundamental DOM manipulation with version 5 of the library.

Ccharliemok
96% match
Loading thumbnail…

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

This example shows a yellow smiley face with eyes, eyebrows, and a mouth, built using D3.js v5. The face elements are drawn as SVG shapes, with the mouth created using the `arc` function. The eyebrows, rendered as rectangles, animate vertically through chained `transition` calls, moving up and then returning to their original position over two seconds. The code uses D3 selections and attribute manipulation to construct and transform the visual components.

Ssabaliaqat786
95% match
Loading thumbnail…

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

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa
95% match
Loading thumbnail…

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

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

Ssd2beatles
95% match