Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Kkh-tm
Last edited Jan 9, 2020
Created on Jan 9, 2020

This example builds a simple yellow face using D3.js v5 and SVG shapes, with a large circle for the head, two smaller circles for eyes, rectangular eyebrows, and an arc-generated mouth. The eyebrows animate by translating up and down using chained `transition().duration()` calls on a group element. The code uses D3’s `select`, `arc`, and attribute-setting methods to construct the static elements, while the animation relies on D3’s transition system applied to SVG transforms. The data is hardcoded as constants for spacing, offsets, and radii, and the scene is centered within a 960×500 SVG canvas.

AI-generated description

suka blyat

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, black circles for eyes, and an arc-based path for the mouth. The animation shows the eyebrows moving up and down repeatedly through chained `transition()` calls, each lasting 2000 milliseconds. The code uses D3's `select` and `arc` APIs, with coordinates centered via an SVG group transformation. The face is built programmatically in JavaScript, positioning shapes relative to the center of a 960 by 500 viewport.

Mmuxiaofan
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined eyes and a mouth is drawn using D3.js v5. The code builds SVG shapes with `d3.select` and `d3.arc` for the mouth. Eyebrows are rectangles that animate up and down using chained `transition().duration(2000)` calls, moving via `attr('transform', ...)`. The face is centered by translating a group element based on the SVG’s dimensions. No external data is loaded; all geometry is defined with hardcoded constants.

Xxfqx92
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle head, two eyes, animated eyebrows, and an arc-based mouth. The code constructs the face with `d3.select`, `append`, and `d3.arc` for the mouth path, while the eyebrows animate up and down using `transition().duration()`. All elements are centered within an SVG canvas using a translated group, and the rendering relies entirely on SVG attributes rather than external data.

VVito
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can construct a simple animated face using fundamental SVG elements. A yellow circle forms the head, with two circles for eyes and a path drawn using the `arc` generator for the mouth. The code uses `d3.select` and `d3.append` for DOM manipulation, while the `transition` method animates the eyebrows upward and back over two seconds each way. The face is centered via a group transform, and all shapes are rendered as SVG with hardcoded attributes.

MMargarita Chernetski
95% match
Loading thumbnail…

Let'S make a face with D3.js

This example uses D3.js v5 to construct an animated face entirely from SVG primitives. It draws a yellow circle for the head, adds two black eyes and rectangular eyebrows, then creates a mouth using an `arc()` path generator. The eyebrows are animated with a two-second `transition()` that shifts them up and down before returning to their original position. The code relies on D3's `select`, `append`, and attribute methods to build and manipulate the SVG scene.

AArnaud Gbaguidi
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows how to build a cartoon face using D3.js v5 with SVG shapes and animation. It draws a yellow circular head, two eyes, eyebrows, and a mouth using `select`, `circle`, `rect`, and `path` elements with an `arc` generator. The eyebrows animate up and down via chained `transition().duration(2000)` calls. The code uses static values for positioning and renders entirely in an SVG element, with no external data source.

Mmjoaquim12
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow cartoon face from basic SVG shapes, including circles for eyes and a mouth, rectangles for eyebrows, and an arc for the smile. The face is centered within a red background, and the eyebrows animate upward and then back down using chained `transition.duration` calls. The code uses D3 v5’s `select`, `arc`, and transition methods to construct and animate the SVG.

AAbhijit Roy
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and back down over two seconds via chained `transition()` calls. All elements are centered using an SVG `<g>` group with a translation transform, and the code imports `select` and `arc` from D3 to manipulate the DOM and generate the mouth path. The face is static except for the looping eyebrow movement.

IIan Perry
95% match