Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
PPhilRG
Last edited May 13, 2020
Created on May 11, 2020

This example builds a smiley face with D3.js, including a yellow circle head, eyes, and a mouth, while animated eyebrows move up and down and shift side to side in a looping transition. The code demonstrates basic DOM manipulation and SVG rendering using D3 v5 selection and attribute methods, alongside the `arc` generator to create the mouth path. A timed `transition` chain, with 2000-millisecond durations, animates the eyebrow group’s transform, changing its vertical and horizontal position, while colored rectangles serve as the eyebrows. The face is centered in an SVG with a green background.

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 builds a yellow smiley face with D3.js, featuring eyes, eyebrows, and a mouth rendered as SVG shapes. The code uses D3 selections to append a circle for the face, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. A chained `transition` with a 2-second duration animates the eyebrow group’s vertical position upward and then back, creating a moving-brow effect. The face is centered within a 960×500 SVG, and the animation runs once on page load.

Aarg04
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, featuring two eyes, a curved mouth, and animated eyebrows that move up and down. It demonstrates fundamental DOM manipulation by selecting an SVG, appending circles, rectangles, and a path created with the `arc` generator, and using `transition` to animate the eyebrow group’s transform attribute. The face is centered via a translated group, with all elements sized relative to the SVG’s dimensions. Rendering is SVG-based with a two-second transition loop.

Lleewardsmain
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates D3.js v5 DOM manipulation. The code builds the face using SVG shapes, appending a circle for the head, two circles for eyes, rectangular eyebrows, and a path generated with the `arc()` function for the mouth. The eyebrows animate upward and downward over two seconds using chained `transition()` and `attr()` methods. This example highlights fundamental D3 selection, attribute setting, and transition functionality.

AA1L9E9X9
96% match
Loading thumbnail…

Let's make a face with D3.js!

This interactive example shows a smiley face with animated eyebrows built using D3.js. The face is composed of SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth—all centered via a transformed group. The eyebrows move up and down using chained `transition` calls with a 2000-millisecond duration. The code uses D3 v5 selectors to query the SVG, `arc` to generate the mouth’s path, and direct attribute setters for positioning.

Kkesmith21
95% 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
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a smiley face in an SVG container, with eyebrows that animate up and down via chained transitions. The code selects the SVG, appends a centered group, and draws the yellow circle head, eyes, rectangular eyebrows, and a mouth path created with the `d3.arc` generator. Eyebrow motion is achieved through two sequential `transition().duration(2000)` calls that shift the eyebrow group’s transform attribute. The rendering relies on SVG elements and D3’s `select` and `arc` methods, with fixed numeric constants for spacing and sizing.

Mmjoaquim12
95% match