Skip to main content
SimilarExport ZIP
100%

Face with D3

✓ Published0🌍 Public
AAshutosh Singh
Last edited Jan 21, 2021
Created on Jan 21, 2021
Forked from D3 Starter

A yellow smiley face rendered in SVG with D3 v6. The example shows eyebrows that animate up and down indefinitely using chained `transition.duration` calls. It builds the face with basic shapes: circles for the head and eyes, rectangles for brows, and an `arc()`-generated path for the mouth. D3's `select` and `arc` functions handle SVG creation and geometry.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face With D3

A yellow smiley face is rendered in SVG, with two eyes, animated eyebrows, and a mouth formed by a semicircular arc. The face is centered within a 960 by 500 SVG canvas, with all facial features positioned and styled using D3 selections. The eyebrows use chained D3 transitions to move up and down over two-second intervals, creating a blinking or winking effect. The code imports `select` and `arc` from D3 v5, demonstrating the use of D3's shape generator for the mouth path.

Ssagarknt97
95% match
Loading thumbnail…

Face with D3.js

A yellow circular face with black-outlined eyes, animated eyebrows, and a smile is rendered in SVG. The eyebrows rise and fall repeatedly over two seconds using chained transitions on a group element, while the smile is drawn with the `d3.arc` shape generator. Built with D3 v5 and the `select` and `arc` APIs, the composition is centered using an SVG group transform.

Aanastasiiaplatovskikh
94% match
Loading thumbnail…

Face with D3.js

A smiling face is drawn as a yellow SVG circle with white outlines, featuring two black eyes that animate by moving down and up via chained `transition().duration()` calls. Built with D3.js v5, the example demonstrates basic SVG shape creation using `d3.select` and attribute assignment for circles, with a commented-out arc-based mouth showing an alternative path approach. The eyes use transform translations over three-second intervals, creating a simple blinking effect without external data.

Aarontha
93% match
Loading thumbnail…

D3 Face

A smiling face is drawn as a yellow circle with eyes, eyebrows, and a mouth, and the eyebrows perform a repeated up-and-down animation. The SVG is generated using D3 v5, with circles for the face and eyes, rectangles for the eyebrows, and an `arc` path for the mouth. A D3 transition with a 2000-millisecond duration drives the eyebrow movement, translating the group along the y-axis.

Rrdeichert
93% match
Loading thumbnail…

face

A smiley face drawn with D3.js animates its eyebrows up and down in a looping transition. The SVG face uses a yellow circle, two eye circles, and an arc-generated mouth, while the eyebrows are rectangles that move via chained `transition.attr` calls over two-second intervals. D3 v5’s `select` and `arc` APIs build the static elements, with the animation driven by D3’s transition system.

Ssatishnarne99@gmail.com
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG with animated eyebrows that move up and down. D3.js creates the face using circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all positioned within a central group. The animation uses chained transitions on the eyebrows group, alternating between two vertical offsets over two-second intervals. The code imports `select` and `arc` from d3 and uses an SVG container sized 960 by 500 pixels.

AAngelii
93% match
Loading thumbnail…

face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face using basic shapes, including circles for the eyes and a path generated with the `d3.arc` function for the mouth. Eyebrows are rectangle elements that move up and down using chained `transition` calls, each lasting three seconds. The example relies on D3 v5’s `select`, `arc`, and transition methods, rendering in SVG with only a script and stylesheet, without external data sources.

AArthurFJ
93% 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
93% match