Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Nov 26, 2019

Created on Nov 26, 2019

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

This example demonstrates basic D3.js DOM manipulation by constructing a smiling face from SVG elements, with animated eyebrows that move independently. The code uses D3 v5 selection methods such as `select`, `append`, and `attr` to create a yellow circle for the face, while additional elements are styled via external CSS. The visualization renders in an SVG container with fixed dimensions, and the interaction is shown through a linked video tutorial. The approach highlights how D3 binds data to visual primitives without requiring a dataset, focusing instead on programmatic element creation and attribute updates.

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 basic DOM manipulation with D3.js by constructing a smiling face from SVG primitives. Using d3-selection methods like `select` and `append`, it creates a yellow circle, two eyes, a path-based smile (built with the `d3.arc` function), and rectangular eyebrows, with one eyebrow rotated to create asymmetry. The SVG is centered via a transform, and the code imports `select` and `arc` directly from the D3 module, showcasing how to build and style static SVG elements programmatically with D3 v5.

Ddev-snip

95% 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 smiling face from SVG shapes. The code draws a yellow circular head, two eyes, and a mouth using an arc, then animates the eyebrows by moving a group element up and down. It uses `d3.select` to target the SVG, appends shape elements, and chains `transition().duration(2000)` calls to create the looping eyebrow movement. The rendering approach is SVG output, with all logic contained in a single JavaScript file.

Ggstriker050

95% match

Loading thumbnail…

Let's make a face with D3.js!

The example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face out of SVG shapes, including a yellow circle for the head and animated eyebrows that move up and down. It uses D3’s `select`, `append`, and `attr` methods to build and style the face elements directly within the SVG canvas. The rendering relies on D3 v5’s core API, with the face drawn entirely through programmatic SVG element creation rather than data mapping.

Ttonestar

95% 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

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiling face out of SVG shapes, then animating its eyebrows. A yellow circle forms the head, with two dark eyes and an arc-based mouth positioned around the center. The code uses `d3.select`, `append`, and attribute setters to construct elements, while `transition().duration()` moves the eyebrow group up and down over two-second intervals. The rendering relies on SVG elements within a 960-by-500 viewport, with all positioning handled through transform attributes and numerical constants.

JJayesh Swami

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing a smiley face from SVG shapes, with a gentle animation of its eyebrows. The code builds a yellow circle head, eyes, and a mouth using D3’s `select`, `attr`, and an `arc` generator for the path. The eyebrow rectangles transition vertically via chained `transition().duration(2000)` calls, moving them down and back up. It uses D3 v5, rendering to a static SVG canvas with no external data, focusing purely on programmatic element creation and animation.

Nnshedd

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle for the head, black circles for the eyes, rectangles for the eyebrows, and an arc for the mouth. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups, and positioning shapes with the `attr` method. Eyebrows animate by using chained `transition().duration(2000)` calls to move their group vertically, first upward and then back to the original position. The example highlights D3’s `select` and `arc` APIs for creating and transforming visual elements.

QQiushi

95% match

Loading thumbnail…

Let's make a face with D3.js!

This D3.js v5 example demonstrates fundamental DOM manipulation by building a smiling face from SVG primitives, including yellow circles for the head and eyes, and rectangular eyebrows that animate upward and downward. The code constructs the face using `d3.select`, `svg.append`, and shape methods like `.attr`, while `d3.arc` generates the mouth as a path with specified inner and outer radii. A chained `transition().duration(2000)` sequence repeatedly moves the eyebrows up and down, creating a simple looping animation.

IIsabel

95% match