Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Ssureshreddypr
Last edited Jul 30, 2020
Created on Jul 30, 2020

This example shows a yellow smiley face drawn in SVG, whose right eyebrow animates upward while the left remains still. It demonstrates basic DOM manipulation with D3.js v5, using `d3.select` to append circles, rectangles, and an arc-generated path for the mouth. The code relies on D3’s `arc` generator for the smile and `transition` with a 2-second duration to move the eyebrow. All shapes are positioned via SVG attributes like `cx`, `r`, and `transform`, with a static yellow face and black features.

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 shows a yellow smiley face drawn in SVG, with eyebrows that animate upward and then return to their original position. The face is constructed through fundamental D3.js DOM manipulation, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` generator, while eyebrow movement relies on chained `transition().duration()` calls that modify a `transform` attribute. All shapes are centered within an SVG element sized 960 by 500 pixels.

DDan Mihaila
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. It demonstrates fundamental D3.js DOM manipulation by selecting an `<svg>` element and appending groups for the eyes and eyebrows, using `d3.select` and `d3.arc` for the mouth path. The eyebrow movement relies on chained `transition().duration()` calls that adjust a `transform` attribute, while the face’s geometry is defined via static attributes for circles, rectangles, and the arc path.

LLuce Liu
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG shapes whose eyebrows animate upward and then back down. It demonstrates basic DOM manipulation with D3.js. The code uses `d3.select` and `svg.append` to build the face's circle, eye, and rectangular eyebrow elements, while the mouth is drawn with the `d3.arc` path generator. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on the brows’ parent group, moving it up and then returning it to its original position.

Ccguibourg
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js version 5 to construct a yellow smiley face with eyes, eyebrows, and a mouth directly in an SVG. It demonstrates fundamental DOM manipulation by selecting elements, appending shapes, and applying attributes. The code uses `d3.select` and `d3.arc` to generate the mouth path, while a two-stage `transition()` chain animates the eyebrows upward and then back to their original position over 4 seconds.

Eevesshaw
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes has animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation, building the face with `select`, `append`, circles, rectangles, and a mouth path generated using the `arc` helper. Eyebrow motion is created through chained `transition().duration()` calls on a group element, while the face is centered using an SVG `transform`. The code uses D3 v5 modules and relies on static shape attributes rather than data binding.

MMMoronto
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with its eyebrows animated to move up and down in a continuous loop. The example demonstrates basic DOM manipulation with D3.js, using `d3.select` and `d3.append` to build the face from circles, rectangles, and a path, then applying `transition().duration()` to animate the eyebrow movement. The mouth is created using the `d3.arc` shape generator, and the entire scene is centered within an SVG canvas of fixed dimensions.

FfacundoEMartin
96% 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
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows moving up and down in a looping animation. The face is built entirely through D3.js v5 selections, using `append` to create circle, rectangle, and path elements, and `arc()` to generate the mouth shape. Eye spacing, eyebrow dimensions, and positions are defined as constants, while the eyebrow motion is driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. The code runs in a standalone HTML page with a 960x500 SVG canvas.

SShengjie-Sun
95% match