Skip to main content
SimilarExport ZIP
100%

Face Curran with d3.js

✓ Published1🌍 Public
PPranav Revankar
Last edited Jan 19, 2020
Created on Jan 18, 2020

A yellow circle with animated eyes and a smile renders in an SVG using d3.js. The right eye transitions from black to red over two seconds, while the smile—drawn as an arc path via `d3.arc()`—gradually morphs from a thick ring to a solid filled shape over twenty seconds. The code builds shapes from scratch using `d3.select`, `attr`, and `transition`, with fixed coordinates for eye spacing and offsets.

AI-generated description
MIT Licensed

Similar vizzes

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

Face with D3.js!

A cheerful, animated face rendered entirely with D3.js SVG shapes. The code draws a yellow circular head, two red eyes, blue rectangular eyebrows, and a purple arc-shaped mouth, all positioned within a responsive coordinate system. The eyebrows use the `transition` API to animate horizontally back and forth over six seconds. The face is built by composing basic SVG primitives—`circle`, `rect`, and `path` elements—using D3's `select` and `attr` methods, while the mouth is generated with the `arc` generator.

Ssslee8778960
86% match
Loading thumbnail…

Face with D3.js!

A yellow circle face renders in SVG with two eyes, animated eyebrows, and a black arc-based mouth. The face is centered using fixed pixel coordinates in a 960-by-500 viewport. D3 v5 selections append the shapes, while chained `transition().duration(2000)` calls animate the rectangular eyebrows upward and back down. The mouth path uses `d3.arc()` with an inner and outer radius to create a curved shape. React scaffolds the page, and d3-selected elements respond to the pre-set attributes and timing.

TTienTheBros
86% match
Loading thumbnail…

Face with D3.js!

A yellow circle face renders in SVG with two eyes, animated eyebrows, and a black arc-based mouth. The face is centered using fixed pixel coordinates in a 960-by-500 viewport. D3 v5 selections append the shapes, while chained `transition().duration(2000)` calls animate the rectangular eyebrows upward and back down. The mouth path uses `d3.arc()` with an inner and outer radius to create a curved shape. React scaffolds the page, and d3-selected elements respond to the pre-set attributes and timing.

TTienTheBros
86% match
Loading thumbnail…

Making a face with Curran's help

A yellow SVG face with animated eyebrows demonstrates basic D3 v5 shape and transition APIs. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to move the brow rectangles up and down over two seconds. Eyes and brows are positioned with explicit `attr` values for spacing and offsets, while the mouth is drawn as a half-arc path. The face is centered by translating a group element to the middle of the 960×500 SVG canvas.

RRamon96
86% 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
85% 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
85% 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
85% match