Fork of Let's make a face with D3.js

100%

Fork of Let's make a face with D3.js

✓ Published1🌍 Public

Last edited Jun 18, 2022

Created on Jun 18, 2022

Forked from Let's make a face with D3.js

A smiling face is drawn with D3.js v5, featuring a yellow circle, two eyes, animated eyebrows that repeatedly move up and down, and a mouth shaped using an arc path. The SVG is centered using a translation, and the eyebrows animate via chained `transition().duration` calls that toggle their vertical offset. The code imports `select` and `arc` from D3, reads the SVG dimensions from attributes, and builds the face from primitive shapes. The example is rendered as a static SVG with animation triggered on load, using a React-friendly structure.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js

This example builds a smiling face in SVG using D3.js v5 and React, with a yellow circle for the head, two eyes, and an arc-based mouth. The code uses `d3.arc` to generate the mouth path and `d3.select` to append and style elements. An animated eyebrow movement is achieved with chained `transition` calls that shift a group containing two rectangles up and down over two-second durations. The face is centered via SVG transforms, with positions calculated from the viewport dimensions.

HHarishma Nallala

97% match

Loading thumbnail…

Fork of Let's make a face with D3.js

This example builds a simple smiling face using D3.js v5 within a React-free HTML page, rendering to SVG. The face is composed of a yellow circle, two eyes, eyebrows, and a mouth drawn with `d3.arc()`. The eyebrows animate up and down using chained `transition().duration()` calls, shifting their group’s `transform` attribute. Static positioning relies on absolute pixel values from the SVG’s width and height, and all shapes are appended to a central `<g>` element.

Ssolarmic2015

96% match

Loading thumbnail…

Fork of Let's make a face with D3.js

A smiling face is drawn on a yellow SVG circle, with eyes, animated eyebrows that rise and fall over two seconds, and a mouth created as an arc path. The visualization uses D3.js v5 to select and manipulate SVG elements, with JavaScript handling the layout and the `d3.arc` API for the mouth’s shape. The `transition` method animates the eyebrow movement.

DDemisTheo

96% match

Loading thumbnail…

Fork of Let's make a face with D3.js

This example renders a smiling cartoon face as a static SVG scene, but adds a looping animation that moves the eyebrows up and down over time. The face is constructed using D3.js primitives: a yellow circle for the head, smaller circles for the eyes, rectangles for the brows, and a path generated with `d3.arc` to form the mouth. The code uses D3 v5’s selection and transition API to animate the eyebrow group’s transform attribute, creating a simple, expressive effect.

SSaiSree0122

96% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face built with SVG renders a yellow circle, two eyes, and an arc-based mouth. D3.js v5 transitions animate the eyebrows, moving a group containing two rectangles upward and back down over a four-second loop. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to manipulate DOM elements directly, with static attributes for spacing and dimensions defined in JavaScript.

SSaip Can Hasbay

95% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The code selects an SVG element, appends a yellow circle for the face, and adds eyes, eyebrows, and a mouth using D3’s `arc()` generator. Two transitions animate the eyebrow group’s vertical position over two seconds each, moving them up and down. The example relies on D3’s `select` and `transition` methods to build and animate the static SVG structure.

PPiotr Paszek

95% match

Loading thumbnail…

Fork of Let's make a face with D3.js

This example builds a smiling face out of geometric SVG shapes using D3.js v5 within a React starter scaffold. It draws a yellow circle for the head, two smaller circles for eyes, rectangles for eyebrows, and an arc-generated mouth. The `select` and `arc` helpers from the D3 module construct the elements, while chained `transition().duration(2000)` calls animate the eyebrow group vertically up and down, demonstrating simple keyframe-style motion.

Aanandbabu-k

95% match

Loading thumbnail…

Fork of Let's make a face with D3.js

This example shows a smiling cartoon face built with D3.js v5, featuring animated eyebrows that move up and down over time. The face is constructed from SVG primitives, including a yellow circle for the head, black circles for eyes, rectangles for eyebrows, and a mouth drawn using an arc path. The code uses D3’s `select` and `arc` APIs, along with chained `transition` calls to animate the eyebrow position. Rendering is set up in a React-free HTML page with an SVG canvas, though the framework metadata indicates React integration is possible.

JJOSHUA BUSINGE

95% match