Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js!

✓ Published1🌍 Public
AAnthony Lee
Last edited Sep 1, 2022
Created on Sep 1, 2022

This example uses D3.js v5 to draw a yellow smiley face centered in an SVG canvas, with black-bordered circles for eyes and a path-shaped mouth created via the `d3.arc()` generator. The code demonstrates basic DOM manipulation by appending geometric shapes to a group element, then animates the eyebrows—two rectangles—through a two-second `transition().duration(2000)` sequence that moves them up and down once. Rendering is entirely SVG, with an embedded YouTube video illustrating the resulting motion.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a yellow smiley face centered in an SVG canvas, with two eyes and a mouth formed by an arc path, while its eyebrows animate by moving upward and then back down. Built with D3.js v5, the code uses `d3.select`, `svg.append`, and `.attr` to construct the face, and `transition().duration(2000)` to create the eyebrow motion. The face is drawn using SVG shapes, including circles for the eyes and a path generated by `d3.arc` for the mouth, with dimensions fixed to a 960×500 viewport.

JJoshuoYang
96% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth. The eyebrows animate by moving upward and then returning to their original position using chained `transition().duration(2000)` calls on a group element. The code uses D3 v5’s `select`, `append`, `attr`, and `transition` methods, along with the `arc` generator for the mouth path. All rendering occurs in an SVG canvas, with dimensions set to 960 by 500 pixels.

Cczhang746
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face drawn with SVG shows off basic D3.js DOM manipulation: the code appends circles for eyes and a mouth, uses a path with `d3.arc` for the smile, and animates the eyebrows with repeated `transition.attr` calls that shift their vertical position over two seconds. The face is centered by translating a grouping element, with fixed numeric constants for eye spacing, radius, and eyebrow sizing. The animation loops once, lifting the eyebrows upward then returning them, demonstrating chained transitions on the same selection.

DDimas Sudjito
95% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates basic D3.js DOM manipulation by constructing a yellow smiley face with green eyes, red arc mouth, and grey eyebrows that animate upward and back down in a looping transition. The code builds SVG shapes—circles, rectangles, and a path using the `d3.arc` helper—inside a centered group, then applies chained `transition().duration(2000)` calls to move the eyebrow group along the y-axis. The face is rendered in an SVG canvas with dimensions set from the HTML attributes, and all styling is applied directly via D3 attribute methods.

55577Satvik
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example renders a yellow smiley face with animated eyebrows using D3.js. It builds the face with SVG primitives—circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth—centered via a translated group. The code applies chained `transition().duration(2000)` calls to move the eyebrows up and down repeatedly. It uses `select` to access the SVG element and `arc` from the `d3` module to generate the mouth’s path, with dimensions and positions hardcoded. The animation runs on a 960×500 canvas.

Ppaul4952233@gmail.com
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example creates a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth centered within an SVG canvas. D3.js selections append SVG shapes and apply a two-second `transition` that moves the eyebrow group upward by 50 pixels and then back down, producing a repetitive animation. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition.attr` calls to alter the `transform` attribute, demonstrating fundamental DOM manipulation with version 5 of the library.

Ccharliemok
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing a yellow smiley face from SVG shapes. The code uses the `arc` generator for the mouth and appends circles for the eyes. Two rectangular eyebrows repeatedly animate upward and downward using chained `transition` calls, each lasting two seconds. The visualization renders entirely in SVG via D3 v5, with the face centered in a 960×500 viewport.

VVighnesh Gawad
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js version 5, demonstrating fundamental DOM manipulation and animation. It constructs the face using SVG circles for the eyes and an `arc` generator for the mouth, while the eyebrows are rectangles that move via chained `transition().duration()` calls. The code uses D3’s `select` to bind to an SVG element and positions elements through translation transforms. The animation cycles the eyebrows up and down over two-second intervals, showcasing basic enter-update-exit patterns without any external data source.

ZZaid0914
95% match