Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
AAayush Chhabra
Last edited Nov 13, 2020
Created on Nov 13, 2020

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.

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

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas with D3.js, featuring eyes, eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using D3's `transition()` and `attr()` methods. The face is built from basic SVG shapes—circles for the eyes and a path generated with `d3.arc()` for the mouth. All elements are positioned dynamically based on the SVG's width and height attributes.

MMathias Brem
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face in an SVG using D3.js v5. The face consists of a circle, two eyes, animated rectangular eyebrows, and a mouth created with the d3.arc path generator. The eyebrows transition their vertical position over two seconds using chained transition calls, moving downward and back upward. The code uses d3.select and attribute manipulation to position elements relative to the SVG’s center.

KKaavya Lakshmanan
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 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 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 is drawn on an SVG canvas, with two eyes, eyebrows, and a mouth created from circles, rectangles, and an arc path. The eyebrows animate upward and back down over repeated two-second transitions, demonstrating D3's `transition` and `attr` methods for DOM manipulation and animation. The example uses D3 v5's `select`, `arc`, and chained transitions to build and move SVG elements dynamically.

Sstestedletbd
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