Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
AAnton Koukharski
Last edited Aug 5, 2019
Created on Aug 1, 2019

A face made of SVG shapes is drawn and animated with D3.js v5, using a yellow circle for the head, green eyes, and black eyebrows. The code uses `d3.select` and `d3.arc` to construct the mouth, while chained `transition().duration()` calls animate the eyebrows upward and the mouth into a wider smile over two seconds. The static SVG canvas is 960 by 500 pixels, with all elements positioned relative to the center via a translated `<g>` group.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A face made of SVG shapes is drawn and animated with D3.js v5, using a yellow circle for the head, green eyes, and black eyebrows. The code uses `d3.select` and `d3.arc` to construct the mouth, while chained `transition().duration()` calls animate the eyebrows upward and the mouth into a wider smile over two seconds. The static SVG canvas is 960 by 500 pixels, with all elements positioned relative to the center via a translated `<g>` group.

AAnton Koukharski
100% 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
95% match
Loading thumbnail…

Let's make a face with D3.js

A smiling yellow face is drawn in an SVG canvas using D3.js, with eyes, eyebrows, and a mouth positioned relative to a centered group. Eyebrows animate upward and back down via chained `transition().duration()` calls, moving the group's transform attribute. The code uses `d3.select`, `d3.arc` for the mouth's shape, and explicit SVG `circle`, `rect`, and `path` elements. The face is styled with a light blue background and black strokes, all rendered dynamically from the viewport height and width.

GGabe Nascimento
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black outlines is drawn using D3.js, featuring circular eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate vertically via chained `transition` calls, moving down and back over two seconds each. Using D3 v7, the code selects the SVG, creates a centered group, and builds shapes with `circle`, `rect`, and the `arc` generator for the mouth. The face's proportions are driven by constants like `eyeSpacing` and `eyeRadius`, with no external data source.

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

Let's make a face with D3.js!

A yellow circle with two eyes, eyebrows, and a mouth forms a simple face in an SVG canvas. The code uses D3 v5 selections to build the shapes, with `d3.arc` generating the mouth’s path. A `transition` applies a two-second upward and downward movement to the eyebrow group, animating the face without any data input. All elements are centered via a translated `<g>` group, and the rendering relies strictly on SVG attributes and D3’s transition system.

Ffbudwill
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face with black eyes, eyebrows, and a curved mouth is drawn in SVG using D3.js v6. The face’s eyebrows animate upward and back down over four seconds via chained `transition().duration()` calls on an SVG group’s `transform` attribute. The mouth is created with the `d3.arc()` helper, while circles and rectangles compose the eyes and brows, all centered within an SVG canvas using a translated group.

Iihatelearning
95% match