Skip to main content
SimilarExport ZIP
100%

Lets make a face with D3.js!

✓ Published1🌍 Public
SShashankC22
Last edited Jul 14, 2020
Created on Jul 14, 2020

A face built from SVG primitives appears on a yellow circle, with eyes, animated eyebrows, and an arc-based mouth. The example demonstrates reusable D3.js shape generators and selections, using `select`, `arc`, and chained `transition.attr` calls to move the eyebrows over two seconds. Static elements like circles and rectangles are positioned with absolute coordinates, while the mouth uses an arc with specified inner and outer radii and angle range. The visualization shows how D3 v5 manipulates SVG attributes directly through method chaining.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face with D3.js!

A face built from SVG primitives appears on a yellow circle, with eyes, animated eyebrows, and an arc-based mouth. The example demonstrates reusable D3.js shape generators and selections, using `select`, `arc`, and chained `transition.attr` calls to move the eyebrows over two seconds. Static elements like circles and rectangles are positioned with absolute coordinates, while the mouth uses an arc with specified inner and outer radii and angle range. The visualization shows how D3 v5 manipulates SVG attributes directly through method chaining.

SShashankC22
100% match
Loading thumbnail…

Lets make a face with D3.js!

A face built from SVG primitives appears on a yellow circle, with eyes, animated eyebrows, and an arc-based mouth. The example demonstrates reusable D3.js shape generators and selections, using `select`, `arc`, and chained `transition.attr` calls to move the eyebrows over two seconds. Static elements like circles and rectangles are positioned with absolute coordinates, while the mouth uses an arc with specified inner and outer radii and angle range. The visualization shows how D3 v5 manipulates SVG attributes directly through method chaining.

SShashankC22
100% match
Loading thumbnail…

Let's make a face with D3.js!

A face made of SVG shapes uses D3.js to demonstrate fundamental DOM manipulation and chained transitions. A yellow circle, two eyes, and an arc-based mouth are drawn, while the eyebrows, rendered as rectangles, animate upward and then return to their original position via two sequential `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5, builds the face within a centered `<g>` group, and relies on plain SVG attributes for positioning and styling.

HHonza Cahlík
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two black eyes, animated eyebrows, and an arc-shaped mouth forms a smiling face. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to append circles, rectangles, and a path built with `d3.arc`. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle animated expression. All elements are centered within an SVG of fixed dimensions using a translated group.

DDifan Gu
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, animated eyebrows, and a smiling arc mouth is drawn in SVG using D3 v5. The example demonstrates basic shapes and transitions, with the eyebrows moving up and down in a looping animation via chained `transition` calls. Code imports `select` and `arc` from D3, uses SVG attributes like `cx`, `r`, and `path` with an `arc` generator, and positions elements relative to the SVG center. Static eye circles and a mouth path complete the composition.

GGulrez
94% match
Loading thumbnail…

Let's make face with D3.js!

A yellow circular face with black-outlined eyes, animated eyebrows, and a curved mouth is rendered in SVG using D3.js v5. The example demonstrates how to build a static facial structure with `select`, `append`, and `arc` for the mouth, then animate the rectangular eyebrows via chained `transition().duration()` calls that move them up and down. All shapes are positioned and scaled relative to the SVG’s width and height, with the face group translated to the center. The code uses D3’s selection and arc generators, with transitions running for two seconds per movement phase.

Bbhayyasaheb
94% match
Loading thumbnail…

Lets make a face with D3.js!

A yellow circle with black outlines forms a face, complete with two eyes, animated eyebrows that move up and down, and a curved smile drawn using D3's `arc` generator. The SVG elements are positioned relative to a centered group, with the eyebrows animating through chained `transition` calls that alter the group's transform over two-second intervals. This example uses D3 v5's `select` and `arc` functions to build and animate the face entirely in the browser.

AAdeola Oni
94% match
Loading thumbnail…

Let's make a face with D3.js

A yellow face built from SVG shapes animates its eyebrows up and down in a looping sequence. Using D3.js v5, the example selects an SVG element and constructs the face with circles for the eyes and an arc-generated path for the mouth, all positioned dynamically based on the SVG’s dimensions. The eyebrows, rendered as rectangles, use D3’s `transition().duration()` method twice to create the repeated motion. The code imports `select` and `arc` from the D3 module, demonstrating core SVG manipulation and animation within a single static data-less visualization.

AAveryBurke
94% match