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

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

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face with eyes, eyebrows, and a mouth. The eyebrows animate by alternating their vertical position via chained `transition().duration()` calls, moving up and then back down. The code uses `d3.select` and `d3.arc` to create SVG shapes, with coordinates calculated from the viewport dimensions. All elements are appended to a centered `<g>` group, and the animation runs continuously without user interaction.

TTarul170720

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

This example shows a yellow smiley face built entirely with D3.js v5, featuring two eyes and a curved mouth drawn with an arc path. The face’s eyebrows, rendered as rectangles, animate up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 selections to append SVG elements, `d3.arc` for the mouth, and attribute manipulation to position the facial features relative to the SVG's center. All rendering occurs in an inline SVG with CSS hiding page overflow.

JJenifer Vivar

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

A D3.js example builds a yellow smiley face with animated eyebrows using fundamental DOM manipulation. The face is drawn with SVG circles for the eyes and a path created via the `d3.arc()` generator for the mouth. Eyebrow rectangles transition vertically upward and back down over two 2-second intervals using chained `transition()` calls. The code selects the SVG element, applies transforms to center the face, and uses static data attributes like `eyeSpacing` and `eyeRadius` to position features, rendering entirely in the browser with d3.v5.

NNiharikapabbathi08

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

This example shows a yellow smiley face with eyes, eyebrows, and a mouth, built using D3.js v5. The face elements are drawn as SVG shapes, with the mouth created using the `arc` function. The eyebrows, rendered as rectangles, animate vertically through chained `transition` calls, moving up and then returning to their original position over two seconds. The code uses D3 selections and attribute manipulation to construct and transform the visual components.

Ssabaliaqat786

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

This example builds a yellow smiley face with D3.js and animates its eyebrows upward in a repeating two-second cycle. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition` calls to move the eyebrow group’s `transform` attribute. Circles form the eyes and a yellow circle with a black stroke forms the head, all rendered in SVG. The animation demonstrates basic DOM manipulation and timed transitions with D3 v5.

CChromosin13

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

This example builds a cheerful, animated smiley face using D3.js (v5) and SVG. It demonstrates core DOM manipulation and transitions by drawing a yellow head, eyes, eyebrows, and a mouth with the `d3.arc` path generator. The code sequentially applies a 2-second `transition` to shift the eyebrow group vertically, creating a bobbing motion. The face is centered and scaled relative to the SVG’s dimensions, with all shapes positioned using calculated offsets for eyes and brows.

RRadha246

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

This example renders a yellow smiley face with animated eyebrows using D3.js. It builds the face with SVG primitives—circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth—centered via a translated group. The code applies chained `transition().duration(2000)` calls to move the eyebrows up and down repeatedly. It uses `select` to access the SVG element and `arc` from the `d3` module to generate the mouth’s path, with dimensions and positions hardcoded. The animation runs on a 960×500 canvas.

Ppaul4952233@gmail.com

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

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

Ssd2beatles