Skip to main content
SimilarExport ZIP
100%

Let's make face with D3!

✓ Published2🌍 Public
GGabriele Bonzi
Last edited Feb 17, 2020
Created on Feb 17, 2020

A static green face with black eyes and a mouth is drawn using D3.js in an SVG element, centered within a 960x500 viewport. The features are positioned with hardcoded coordinates, and the eyebrows animate upward and back down over two seconds using the `transition` API. The code leverages D3 v5’s `select` and `arc` functions to construct the SVG shapes and the mouth path.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3!

A yellow face with black outlines is drawn using D3 selections and SVG shapes, including circles for the head and eyes and rectangles for eyebrows. The eyebrows animate up and down via chained `transition().duration()` calls, while a mouth is created using the `d3.arc()` generator. The code uses `d3.select` and `d3.arc` from D3 v6, with explicit SVG attributes for positioning and sizing.

Ffabricio3g
92% match
Loading thumbnail…

Let's make a face with D3.js !

A friendly face built from SVG primitives in React uses D3 v6 selectors to attach elements to an empty SVG container. The face is centered via a translated group, with circles for eyes and a path generated by the D3 `arc` generator for the mouth. Eyebrows, rendered as rectangles, animate upward and back down using chained `transition().duration()` calls. The drawing relies on D3's `select` and `arc` APIs, with hardcoded numeric coordinates for feature placement.

Ttanvirmahdad
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, animated eyebrows, and a curved mouth is built using D3.js v5 and rendered as SVG. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition().duration()` calls to move the rectangular eyebrows vertically. Static attributes set the face and eye positions, while the eyebrows animate in opposing time sequences. The example runs in a React framework and draws on a 960×500 SVG canvas.

SShabani Muswamba
91% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black eyes and expressive eyebrows is drawn using D3.js v5 in an SVG. The code uses `select` to access the pre-defined SVG element, `arc` to generate the mouth path, and chained `transition().duration()` calls to animate the right eyebrow bouncing upward and downward. The face is centered using a translated `g` group, with hardcoded numeric values for spacing, radii, and offsets defining all facial features.

AAtarius Armstrong
91% match
Loading thumbnail…

Let's make a face with D3.js

A yellow face with black-outlined eyes, animated eyebrows, and a static arc-shaped mouth is rendered in an SVG. Using D3.js v5 and React, the code selects the SVG, calculates its dimensions, and appends a centered group for positioning. It draws circles for eyes and rectangles for eyebrows, then applies chained `transition().duration()` methods to animate the eyebrows up and down. The mouth is generated with D3’s `arc()` generator, while coordinates are computed via template literals.

AAmr Eldemerdash
91% match
Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow face is drawn with D3.js, featuring circular eyes, rectangular eyebrows, and a curved mouth, all rendered as SVG elements. The eyebrows animate up and down over two seconds using D3 transitions. The code uses `d3.select`, `d3.arc`, and SVG shape methods like `append`, `attr`, and `transition` to build the face within a 960x500 viewport, centering the elements with a group transform.

Ddamankwah
91% match
Loading thumbnail…

Let's make a Face with D3.js!

A yellow face with black features is drawn in SVG using D3.js v5, centered within a 960-by-500 viewport. The example uses `d3.select` to append a group, circles for eyes, a nose, and eyebrow rectangles, plus a mouth constructed with `d3.arc` for the path data. A `transition().duration(2000)` animates the eyebrows downward then back to their original offset. The code runs in a React starter, but renders directly to the SVG element using D3’s selection and arc APIs.

MMayaJava
91% match
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
91% match