Skip to main content
SimilarExport ZIP
100%

d3 practice 1

✓ Published0🌍 Public
GGeorge2916
Last edited Apr 20, 2021
Created on Apr 16, 2021
Forked from HTML Starter

An animated SVG face keeps its eyes, yellow head, and black outline still while both eyebrows bob up and down. The code builds the scene with d3 select, append, and attr, then choreographs the motion using d3 transition with chained duration and attribute changes. A d3 arc path forms the mouth, and the drawing uses fixed pixel coordinates within a 960 by 500 viewport.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with d3.js

A yellow circle with black outline forms a face via SVG. Two black eyes and rectangular eyebrows animate upward and downward in a repeating transition, while an arc-shaped mouth uses d3.arc. The code builds the face with d3.select, appends SVG shapes, and applies chained transition().duration() calls to move the eyebrow group. All elements are positioned via SVG attributes within a centered group.

JJustinS1209
88% match
Loading thumbnail…

D3 test

This example shows a simple yellow face built from SVG shapes, with eyes that blink through a repeating eyebrow animation and a smiling arc-shaped mouth. The code uses D3 v6 selections to append circles, rectangles, and a path to an SVG canvas, while the mouth is drawn with the `d3.arc` helper. A two-stage `transition` chain animates the eyebrows downward and back, demonstrating chained timing. The face is centered using an SVG transform, and static styling comes from the included stylesheet.

Vvmoharir
87% match
Loading thumbnail…

Practice

A smiling face built from D3.js SVG shapes demonstrates sequential animation with transition chains. The yellow circle, eyes, and arc-based mouth are drawn using D3 selections and the `d3.arc` helper, while two rectangular eyebrows animate upward and back down over four seconds. The movement uses chained `transition().duration()` calls on the eyebrow group's transform attribute, illustrating basic DOM manipulation and timed updates.

Hhossaphul
87% match
Loading thumbnail…

d3example1

A smiling face rendered as SVG demonstrates D3.js DOM manipulation and animation. Yellow circles, black-stroked elements, and an arc path form the face, eyes, and mouth. The eyebrows, appended as rectangles, move upward and return via chained `transition().duration(2000)` calls on a group. The code uses `select`, `arc`, and attribute setters to build the static geometry and animate the eyebrow group's `transform` attribute.

Aanandbabu-k
87% match
Loading thumbnail…

D3-1: Making a face

A face made of SVG primitives is assembled with D3: a yellow circle forms the head, blue circles form the eyes, an arc path creates the mouth, and rectangles serve as eyebrows. The eyebrows animate by moving upward and then returning to their original position, using D3’s `transition` to shift their `y` attribute over time. The code uses `d3.select` to target the SVG element, `d3.arc` to define the mouth’s path, and SVG’s `circle`, `rect`, and `path` elements for rendering.

Bbkopruluoglu3
87% match
Loading thumbnail…

Let's make a face with D3

A yellow SVG face with black-outlined features is drawn using D3 v5. The head is a circle centered in a 960 by 500 viewport, with eyes and animated eyebrows that move up and down via chained transitions. A mouth is rendered using the `d3.arc` shape generator with specified inner and outer radii. The code imports `select` and `arc` from D3, appends elements to an SVG group, and uses `transition().duration()` to create the eyebrow motion.

NNikki-gea
87% match
Loading thumbnail…

D3 Face

A cartoon face rendered in SVG uses D3 v5 to build a yellow circle head with black eyes and an arc-based mouth. Eyebrows, drawn as rectangles, animate vertically through chained `transition` calls on a group element. The code leverages D3’s `select` and `arc` APIs, with static attributes for positioning and a repeated eyebrow movement lasting two seconds per phase, demonstrating basic SVG construction and timed animation.

Ttenghaoman
87% match
Loading thumbnail…

Let's make a face with D3.js!

A face built from SVG primitives is drawn on a 960 by 500 canvas, with yellow circle head, black-outlined eyes, eyebrows, and a smile-shaped arc. The animation sequentially shifts the entire eyebrow group downward and then back upward over two seconds each using chained D3 transitions. The example demonstrates basic DOM manipulation via `d3.select` and `append`, constructing shapes with attributes, and moving elements with `transition().duration().attr()`, where the mouth is generated with the `d3.arc` generator.

Nnoelmiranda
87% match