Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
SShantanu Tripathi
Last edited Jun 30, 2020
Created on Jun 30, 2020

A smiley face with yellow circular head, black eyes, and a curved mouth is rendered in SVG using D3.js v5 and ES6 modules. The eyebrows are rectangular shapes that animate vertically via chained `transition()` calls, moving up and then returning to their original position over repeated 2-second intervals. D3's `select` and `arc` APIs construct the SVG elements, with layout driven by hardcoded dimensions from the parent `<svg>`.

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 yellow smiley face is drawn with D3.js, featuring circular eyes, a curved mouth, and animated eyebrows that move up and down in a repeating transition. The SVG elements are positioned using D3's `select` and `append`, with the face centered via a `g` transform. The eyebrows animate through chained `transition` calls, and the mouth uses the `arc` generator from D3's shape module. The code demonstrates fundamental DOM manipulation and SVG rendering, using d3.v5 to build and animate the face entirely in the browser.

Sshahbaj1999
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with circular eyes, rectangular eyebrows, and an arc-based mouth. The face’s eyebrows and mouth animate over two-second transitions, moving upward and downward repeatedly. The code selects the SVG element, appends groups for positioning, and uses D3’s `arc()` generator to shape the mouth, while `transition().duration()` drives the timed movements.

AAbhijeet Panda
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black eyes and an arc-shaped mouth is drawn in SVG using D3.js v5. The eyes remain static, while the eyebrows, rendered as rectangles, move up and down via chained `transition` calls over two-second intervals. The mouth is generated with the `d3.arc` helper, and all elements are positioned using SVG attribute manipulation.

AAayush Chhabra
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black circular eyes, rectangular eyebrows, and an arc-based mouth is rendered entirely in SVG. The example demonstrates fundamental DOM manipulation and animation with D3 v5, using `d3.select`, `d3.append`, and `d3.arc` to generate the facial features. Eyebrows animate via chained `transition` calls that move their group vertically over two seconds, then return. The face is centered using an SVG `<g>` element with a computed translation, and all geometric values are defined as named constants for clarity.

KKarthik Kunala Venu
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js v5 for fundamental DOM manipulation. Circles form the head and eyes, while an arc path creates the mouth. Two rectangular eyebrows animate independently using `transition().duration(3000)` to shift their vertical position. The code demonstrates chaining `.attr()` methods to set SVG attributes, using the `select` and `arc` APIs from the d3 module, and applies static styling through a linked stylesheet. This example focuses on basic element creation and sequential transitions.

RRAMANDEEP SINGH
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn as an SVG using D3.js v5, with circular eyes, a path-based mouth built via the `d3.arc` API, and rectangular eyebrows. The eyebrows animate upward and back down using chained `transition` and `attr` calls over two 2-second intervals. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups and shapes, and setting attributes with transforms, all in an empty HTML body.

AAnkit
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with a circular head, two eyes, and a mouth formed by an arc path. The eyebrows are animated upward and back down via chained `transition` calls that modify their `transform` attribute over two-second durations. The example demonstrates fundamental DOM manipulation with `select` and `append`, using static measurements for spacing and coordinates to compose the face.

MMainul Islam
96% match