Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
AAjay Patel
Last edited Jul 26, 2019
Created on Jul 26, 2019

A static smiling face drawn with D3.js displays a yellow circle for the head, two circular eyes, and a mouth created from a D3 arc path. The animation moves the eyebrows upward and back down over two seconds using D3 transitions that modify the transform attribute. The SVG elements are built programmatically with D3 selection, appending, and attribute methods, positioned via translate transformations on grouped containers.

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!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes—a circle for the head, two circles for eyes, and a path generated by the arc function for the mouth—appears centered in a 960×500 viewport. The code imports select and arc from D3 v5, using SVG groups to position features. The eyebrows, rendered as rectangles, animate by moving up and down through chained transition().duration() calls, while the static face elements remain fixed.

Ssemopz
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5. Its eyes and mouth are static, while its rectangular eyebrows animate upward and back down via chained `transition` calls on a group element. The code uses `d3.select` and `d3.arc` to construct the face, with all positions and dimensions defined as numeric constants. The animation runs once over four seconds, demonstrating basic DOM manipulation and data-driven shape creation with D3.

CCameron
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5. Its eyes and mouth are static, while its rectangular eyebrows animate upward and back down via chained `transition` calls on a group element. The code uses `d3.select` and `d3.arc` to construct the face, with all positions and dimensions defined as numeric constants. The animation runs once over four seconds, demonstrating basic DOM manipulation and data-driven shape creation with D3.

CCameron
95% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face is drawn as a yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth, all rendered in SVG. The animation uses D3 transitions to move the eyebrows up and down over two seconds. The code leverages `d3.select`, `d3.arc`, and SVG `circle`, `rect`, and `path` elements within a fixed 960×500 viewport, with the face centered via a group transform.

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

Let's make a face with D3.js

A yellow circle with black facial features forms a smiley face on an SVG canvas. Two eyes and a mouth are drawn using D3 shapes, while a pair of dark eyebrows animate vertically in a looping transition, moving up and then back down. The face is centered via a group transform, with the mouth created using the d3.arc path generator. The animation uses chained transition calls on an SVG group element to shift the eyebrows repeatedly.

HHasideluxe
95% match