Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
OOrangTang
Last edited Nov 8, 2020
Created on Nov 8, 2020

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face. The visualization shows a yellow circle with eyes, eyebrows, and a mouth, where the eyebrows perform a continuous up-and-down movement. The code uses D3’s `select` and `append` to construct SVG elements, and `transition().duration()` to animate the eyebrow group’s `transform` attribute over 2000-millisecond intervals. The mouth is drawn with a `d3.arc` path generator, while hardcoded constants control facial feature positioning and spacing. The rendering is entirely SVG-based, with static input values defining the geometry.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face from SVG shapes. A yellow circle forms the head, with eyes, eyebrows, and a mouth added as separate elements. The code uses d3.select and append to construct the face, then applies chained transitions to move the eyebrows up and down repeatedly. The mouth is drawn using d3.arc with specified inner and outer radii and angles. All shapes are positioned relative to a centered group, with animation running for two seconds per eyebrow movement cycle.

Wwhyamn
97% match
Loading thumbnail…

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, including a yellow circle head, eyes, eyebrows, and an arc-based mouth. The code explicitly appends each shape using `d3.select` and `.append`, positioning them with translation attributes. The prominent behavior is an animated eyebrow movement, achieved through a chained `transition().duration(2000)` on the eyebrow group, which moves the brows down and back up. The rendering is SVG, and the animation is visible in a video embed, with the entire face recreated using only D3’s core selection and attribute methods.

Hhuankoh
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can build an animated smiley face using fundamental DOM manipulation. The face includes a yellow circle, eyes, eyebrows, and a mouth. Using `d3.select` and chained methods like `.append` and `.attr`, the code constructs SVG elements and groups them with translations. The eyebrows animate via `transition()` with a 2000-millisecond duration, moving up and down repeatedly. The mouth is drawn using the `d3.arc()` helper to generate a path. The visualization relies entirely on SVG rendering and D3 v5.

EElora-dev
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple animated smiley face using D3.js. It shows a yellow circle with eyes, eyebrows, and a mouth, all constructed through fundamental DOM manipulation. The code uses `d3.select` to target the SVG element, `d3.append` to create shapes, and a chained `d3.transition` sequence to animate the eyebrows moving up and down over two-second intervals. The mouth is drawn as an arc using `d3.arc` with specified inner and outer radii. The rendering is SVG-based, with all elements positioned relative to the center of the canvas.

KKarkG
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing an animated smiley face from SVG shapes. The face consists of a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based mouth, all positioned relative to an SVG group centered on the canvas. Using d3 selection and transition methods, the eyebrows perform a repeated up-and-down motion over two-second intervals. The code relies on d3.select, d3.arc for the mouth path, and chained transition.attrTween (via transition.attr) to animate the eyebrow group’s vertical offset, showcasing basic data-driven document updates without any external dataset.

Ttonestar
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiley face from SVG elements, with animated eyebrows that move up and down. The code uses D3 selections to append a yellow circle for the head, circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. It applies `transition` with a two-second duration to animate the eyebrow group’s vertical position, showcasing data-driven document updates. The rendering uses SVG within a 960x500 viewport, driven entirely by D3’s `select` and `arc` APIs.

MMrG113
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation and animation with D3.js by constructing a smiley face from SVG shapes and animating its eyebrows. A yellow circle forms the head, with eyes, rectangular eyebrows, and an arc-based mouth positioned using D3 selections and attribute setters. The code uses d3.select, d3.arc, and chained transitions with .transition().duration() to move the eyebrow group up and down over two 2-second cycles. All elements are appended to an SVG container, with positioning handled via transform attributes.

Ssslee8778960
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example illustrates fundamental DOM manipulation with D3.js by building a smiley face from SVG primitives. A yellow circle forms the head, with two eye circles, a mouth path created using the `arc` generator, and rectangular eyebrows. The animation uses chained `transition()` calls to animate the eyebrow group's `transform` attribute upward and then back down over two seconds each, creating a simple moving expression. The code relies on `svg.append`, `.attr`, and D3's selection and transition APIs, rendering entirely through SVG without external data.

Mmariamy
97% match