Skip to main content
SimilarExport ZIP
100%

Face with D3.js

✓ Published0🌍 Public
Aarontha
Last edited Aug 18, 2019
Created on Aug 18, 2019

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face with D3

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.

AAshutosh Singh
93% match
Loading thumbnail…

D3 Face

A smiling face rendered in SVG animates its mouth and eyelids using D3 transitions. The code draws a yellow circle for the head, positions two eyes, and constructs an arc-based mouth with `d3.arc()`. The mouth transitions between two arc radii over two seconds, while rectangular eyelids move up and down using chained `.transition().duration()` calls. Built with D3 v5 selections, the example demonstrates SVG shape manipulation and timed animations within a React-free HTML page.

Mmanoj5464
93% match
Loading thumbnail…

Face D3.js

A yellow circle with black eyes and a curved mouth forms a simple animated face in an SVG canvas. The right eye moves vertically in a looping transition, shifting down and back up over a two-second duration. The code builds the face using D3 selections and the `arc` generator for the mouth, setting attributes like `cx`, `cy`, and `fill` directly on SVG circles. All rendering occurs in-browser with D3 v5, animating through chained `transition().duration()` calls.

Iimoutidi
93% match
Loading thumbnail…

Face with D3.js!

A cheerful cartoon face rendered in SVG appears on screen, built entirely with D3.js v5. The code uses `d3.select` and `d3.arc` to construct a yellow circle head, red eyes, blue rectangular eyebrows, and a purple arc-based mouth. The eyebrows animate via chained `transition()` calls, sliding inward and outward over three-second intervals. The example demonstrates composition of SVG primitives and basic animation without external data.

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

D3 Face Making

A smiling face made of SVG shapes animates on a yellow circular background. The code uses D3 v5 selections and transitions to move the eyes and eyebrows up and down repeatedly, while the mouth is drawn with a D3 arc path generator. The example demonstrates how to build and animate a simple character using `select`, `arc`, and chained `transition().duration()` calls in SVG.

AAustinMadangwa
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black-outlined eyes and an animated mouth is drawn using D3.js v5. The face is centered via an SVG group transform, with circles for the eyes and an arc-based path for the mouth. Eyebrows are rectangles that transition vertically twice over two seconds using D3's `transition().duration()`. The code uses `d3.select`, `d3.arc`, and SVG attributes like `attr('d', ...)`, rendering entirely in SVG with no external data source.

Ddanielchamone
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
92% match