Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Nnicfavfar
Last edited May 7, 2019
Created on May 7, 2019

A smiling face rendered in yellow dominates the SVG canvas, with eyes, eyebrows, and a curved mouth built from basic D3 shapes. The animation shows the eyebrows shifting upward over two seconds and then returning, using chained `transition().duration()` calls. The code constructs the face with `select`, `append`, and `arc` from D3 v5, positioning elements via `attr('transform')` with string translation. The path for the mouth is generated by the arc helper, and all drawing occurs through SVG element creation.

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

A smiling yellow face is drawn in an SVG canvas using D3.js, with eyes, eyebrows, and a mouth positioned relative to a centered group. Eyebrows animate upward and back down via chained `transition().duration()` calls, moving the group's transform attribute. The code uses `d3.select`, `d3.arc` for the mouth's shape, and explicit SVG `circle`, `rect`, and `path` elements. The face is styled with a light blue background and black strokes, all rendered dynamically from the viewport height and width.

GGabe Nascimento
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate basic DOM manipulation and animation. The face is built by appending circles for the head and eyes, rectangles for eyebrows, and a path generated with the `d3.arc()` API for the mouth. The eyebrows animate upward and back down over two sequential 2000-millisecond transitions, showing how `selection.transition()` chains. The code uses `d3.select` to manipulate the SVG elements and sets coordinates with fixed pixel offsets for facial features.

DDaniel Hug
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using D3.js v5's `select` and `arc` APIs, with SVG circles for the eyes and a path for the mouth. The eyebrows, rendered as rectangles, animate upward and back downward over four seconds via chained `transition().duration(2000)` calls. The code demonstrates fundamental DOM manipulation by building the face from scratch in an SVG container, using hardcoded dimensions and positions.

GGray1011
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.

LLittledevil7
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring two eyes, brown eyebrows, and a mouth created using the `d3.arc` path generator. The eyebrows, grouped with the eyes, animate downward over two seconds and then return to their original position, using chained `transition` calls on the group's `transform` attribute. The face is centered within an SVG canvas by translating a root group, with all shapes positioned relative to this group. The code demonstrates fundamental DOM manipulation, selection, and attribute handling in D3 version 6.

Yyycgrace
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face is drawn in SVG with D3.js, featuring eyes and a mouth created from an arc path. The example demonstrates basic DOM manipulation and transitions as the eyebrows animate upward and back down over two seconds. Using d3.select, arc, and attr, the code builds the face from a circle, rectangles, and a path, while the transition method moves the eyebrow group between vertical offsets. The face is centered within a 960 by 500 SVG canvas using a translated group element.

Nnawendusingh
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 v5's `select` and `arc` to append a circle, eyes, and a mouth, with the mouth created via the `arc()` generator. Eyebrows, drawn as rectangles, animate upward and downward through chained `transition().duration()` calls, while the mouth also shifts position over two seconds. All elements are positioned within a centered `<g>` group, showing basic SVG construction and data-driven updates.

AAniket
96% match