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

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

A yellow smiley face is rendered in SVG, with its eyebrows animating upward and back downward over four seconds. The face is built using D3.js v5 selections and `arc()` for the mouth, with `circle` and `rect` elements for eyes and brows. A `transition()` chain moves the eyebrow group vertically, demonstrating sequential DOM updates driven by D3's transition API.

97% match

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

This example creates a yellow smiley face with eyes, eyebrows, and a smile using D3.js v5. The code builds the face with SVG circles, rectangles, and an arc path, then animates the eyebrows by repeatedly transitioning their vertical position over two-second intervals. It demonstrates fundamental DOM manipulation with selections and the `transition()` method, using `d3.select` and `d3.arc` to construct the shapes in a centered group.

97% match

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

A yellow smiley face rendered in SVG has its eyebrows repeatedly moving up and down in a looping animation. The example demonstrates basic D3.js selection, attribute manipulation, and chained transitions on SVG elements. It uses the `d3.select` API to append circles, rectangles, and an arc-generated mouth path, while `transition().duration()` cycles the eyebrow group's vertical transform. The scene is centered via a translated `g` element, with hardcoded geometric values for facial features.

96% match

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

This example shows a yellow smiley face with two eyes, moving eyebrows, and a curved mouth, rendered as SVG shapes. The eyebrows shift upward and then return to their original position using chained `transition().duration()` calls. The code builds the face with D3 selections and shape generators, including `select`, `arc`, and attribute setters like `.attr()`, positioning elements via `translate` transforms on a centered group. The face is drawn entirely through D3’s DOM manipulation, with no external data source.

SSUNAMLIMBU

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

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating up and down repeatedly. The face is drawn using D3.js v5, building circles, rectangles, and a mouth path through basic DOM selection and appending. Eyebrow movement is achieved with chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports `select` and `arc` from D3, computes layout from the SVG’s dimensions, and uses inline attribute settings for styling and positioning.

117761A04F1

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

This example shows a smiley face built with D3.js, featuring yellow circular head, eyes, rectangular eyebrows, and a curved mouth rendered as an SVG path. The face is centered using SVG groups and transformations, with fixed numeric values positioning each facial feature. The code uses D3 v5 selections to append and style elements, the `arc()` generator for the mouth shape, and imports specific functions (`select`, `arc`) from the D3 module. Static positioning defines the layout, with no interactive or animated behavior included.

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth. The eyebrows animate by moving upward and then returning to their original position using chained `transition().duration(2000)` calls on a group element. The code uses D3 v5’s `select`, `append`, `attr`, and `transition` methods, along with the `arc` generator for the mouth path. All rendering occurs in an SVG canvas, with dimensions set to 960 by 500 pixels.

Cczhang746

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

This example uses D3.js v5 to build a simple animated smiley face from basic SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and downward through chained `transition` calls, each lasting 2 seconds. It demonstrates fundamental DOM manipulation with `select` and `append`, and uses SVG attributes like `cx`, `r`, and `transform` to position elements relative to a centered group.

Rradhadevarapu