Skip to main content
SimilarExport ZIP
100%

Let's make face with d3

✓ Published0🌍 Public
GGaurav-Adlakha
Last edited Nov 19, 2020
Created on Nov 19, 2020

A stylized yellow face is drawn with D3.js in an SVG, using geometric shapes for the eyes, eyebrows, and an arc-based mouth. The eyebrows animate upward and downward via a chained `transition().duration(2000)` sequence on the group’s `transform` attribute. Eye and eyebrow positions are derived from constants like `eyeSpacing` and `eyeYOffset`, while the face circle scales to the SVG’s height. The code relies on `select`, `append`, and the `arc` generator from D3 v6.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Let's make face with d3

A yellow circle with eyes, eyebrows, and a smile forms a face using D3.js selections and SVG shapes. The eyebrows animate upward and back down via chained `transition().duration(2000)` calls, demonstrating declarative sequencing. Code uses `select`, `attr`, and `arc` from D3 v6 within a React project, parsing the SVG’s width and height attributes to center the face. The mouth is drawn with an `arc()` path generator, and all elements are grouped with `translate` transforms for relative positioning.

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

let's make a face with d3.js

A yellow face with two eyes, animated eyebrows, and a mouth is drawn in SVG using D3 v5. The face is centered within a fixed 960x500 canvas, with circles for the head and eyes, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrows animate vertically via chained `transition` calls over 2000ms each, using `attr` to update the transform. The code imports `select` and `arc` from D3 and builds the visual entirely with SVG elements.

Ppengpenghub
94% match
Loading thumbnail…

let's make a face with d3.js

A yellow face with two eyes, animated eyebrows, and a mouth is drawn in SVG using D3 v5. The face is centered within a fixed 960x500 canvas, with circles for the head and eyes, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrows animate vertically via chained `transition` calls over 2000ms each, using `attr` to update the transform. The code imports `select` and `arc` from D3 and builds the visual entirely with SVG elements.

Ppengpenghub
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face is drawn with D3.js, featuring two eyes, animated eyebrows, and a smile-shaped mouth rendered as an arc. The SVG is centered and built using D3 selections, with the mouth created via the `arc` generator. Eyebrows transition vertically using `transition().duration(2000)`, shifting their position over two seconds before settling. The example uses D3 v5 within a React framework, rendering all elements as SVG with animation.

SSunil Skanda
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a friendly yellow face built entirely with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. The face is constructed using D3.js v5 selections to append a circle for the head, additional circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The code uses `transition()` with a 2000-millisecond duration to animate the eyebrow group’s `transform` attribute. All elements are centered within an SVG canvas using a translation transform, and the styling is handled by an external stylesheet.

Ddacoylo
94% match