Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
KKrishu
Last edited Aug 4, 2020
Created on Aug 4, 2020

A yellow smiley face rendered in SVG uses D3.js selections to append and style a circle for the head, eyes, and a path-based mouth. Eyebrows are rectangles that animate upward and back down through chained `transition` calls over two-second durations. The code imports `select` and `arc` from the D3 v5 library, calculating coordinates around a centered group. This example demonstrates fundamental DOM manipulation, showcasing how D3 binds data to visual elements without a dataset, relying purely on static attributes and timed transitions.

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 circles, rectangles, and an arc path, using D3.js v5 selections and the `d3.arc` helper to generate the mouth. The SVG is centered on a 960×500 canvas, and the eyebrows animate upward and back down via chained `transition` calls with specified durations. Eye spacing, radius, and eyebrow offsets are defined as constants, while the face itself is composed from static shape elements without a data join.

KKrishu
97% 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 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 using D3 selections, with a circular head, two eyes, eyebrows, and a mouth created from an arc path. The face demonstrates D3 transitions by animating the eyebrow group upward and then back down over repeated 2-second intervals. The code uses `d3.select` and `d3.arc` from D3 v5, with SVG elements appended and styled via attributes for positioning and fill.

Kkwanwoo100
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

Aagongwpi
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 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
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