Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
Llinh-pham-nz
Last edited Nov 8, 2019
Created on Oct 29, 2019

A smiling cartoon face is drawn with SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth. The eyebrows are rectangles that repeatedly move up and down via chained `transition` calls, creating a subtle animation. The code uses D3.js v5 selection methods, the `arc` generator for the mouth path, and coordinates computed from the SVG dimensions. The face is centered using a `g` element with a translation transform, and all styling is applied through D3 attributes.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn using D3.js v5 with SVG shapes, including a yellow circle for the head, eyes, eyebrows, and a mouth created with the `arc` generator. The eyebrows animate upward and back down over four seconds using chained `transition` and `attr` methods. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups, and positioning elements via translation transforms. All coordinates and dimensions are computed from the SVG's width and height attributes.

Tthanhtrant219
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn using D3.js v5 with SVG shapes, including a yellow circle for the head, eyes, eyebrows, and a mouth created with the `arc` generator. The eyebrows animate upward and back down over four seconds using chained `transition` and `attr` methods. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups, and positioning elements via translation transforms. All coordinates and dimensions are computed from the SVG's width and height attributes.

Tthanhtrant219
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn using D3.js v5 with SVG shapes, including a yellow circle for the head, eyes, eyebrows, and a mouth created with the `arc` generator. The eyebrows animate upward and back down over four seconds using chained `transition` and `attr` methods. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups, and positioning elements via translation transforms. All coordinates and dimensions are computed from the SVG's width and height attributes.

Tthanhtrant219
95% match
Loading thumbnail…

Let's make a face with D3.js!

A simple yellow smiley face is drawn with SVG shapes, featuring circular eyes, rectangular eyebrows, and a mouth created using the `arc` generator. The eyebrows animate upward and back down via chained `transition` calls over two-second durations. The code builds the face with D3 v5 selections, using `select`, `attr`, and `append` to position elements relative to a centered group, with coordinates calculated from the SVG’s width and height.

Pphongbui81062
95% match
Loading thumbnail…

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver
95% match
Loading thumbnail…

Let's make a face with D3.js!

Using D3.js v5, this example builds a simple cartoon face from SVG shapes: a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based smile. The code employs D3 selections to append elements and `d3.arc` to generate the mouth path. Animated eyebrows move via chained `transition().duration()` calls, shifting vertically and returning, creating a blinking-like effect. The rendering uses SVG with a centered group transform, and all visual components are defined programmatically with fixed numeric constants for spacing and size.

Nnkohdatavis
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn with SVG shapes, including a yellow circle head, white eyes with black pupils, rectangular eyebrows, and a curved mouth. The face animates through D3.js transitions: the eyes and pupils scale up and down, the eyebrows shift vertically, and the mouth rotates and scales. Using D3 v5, the code builds elements with `select`, `append`, and `attr`, while a series of chained `.transition().duration()` calls create the sequential motion.

ZZhi Guangda
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in yellow dominates the SVG canvas, with eyes, eyebrows, and a curved mouth built from basic D3 shapes. The animation shows the eyebrows shifting upward over two seconds and then returning, using chained `transition().duration()` calls. The code constructs the face with `select`, `append`, and `arc` from D3 v5, positioning elements via `attr('transform')` with string translation. The path for the mouth is generated by the arc helper, and all drawing occurs through SVG element creation.

Nnicfavfar
94% match