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

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

This fork of "Let's make a face with D3.js!" shows a simple smiley face drawn with SVG shapes—a yellow circle for the head, two dark circles for eyes, a curved mouth using `d3.arc`, and rectangular eyebrows. The animation demonstrates basic DOM manipulation: the eyebrows move up and down via chained `transition` calls with `duration(2000)`, altering their vertical transform. The code uses `d3.select` and `d3.arc` from D3 v5, with all elements positioned relative to a centered `<g>` group. The visualization highlights how D3 can bind data and animate SVG attributes declaratively.

96% match

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

A smiley face drawn with D3.js animates its eyebrows in a repeated rise-and-fall motion. The example demonstrates fundamental DOM manipulation by building the face from SVG elements—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` helper for the mouth. Eyebrow movement uses chained `transition().duration()` calls to shift the group’s `transform` attribute, alternating between raised and lowered positions. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG on a 960×500 canvas.

Ppavakpatel

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

A smiling face rendered in SVG animates as its eyebrows repeatedly rise and lower, demonstrating basic shape construction and timed transitions with D3.js v5. The code builds the face from geometric primitives—circles for the eyes, rectangles for brows, and a path generated with the `arc` helper for the mouth—all positioned via SVG transforms. A chained `transition().duration()` sequence moves the eyebrow group up and down in a two-second loop, showing how to animate attributes without external data.

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is drawn using SVG elements, including circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. Eyebrows animate upward and downward through chained `transition()` calls with a two-second duration each. The code uses D3 v5 and imports `select` and `arc` directly. All elements are centered within an SVG via a translate transform.

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

A D3.js smiley face animates by moving its eyebrows up and down on an SVG canvas. The code uses `d3.select` to append SVG elements including circles for the eyes and mouth, and rectangles for the eyebrows. A `transition` with a 2000-millisecond duration moves the eyebrow group vertically, then back, creating a repeating animation. The face is centered using SVG transforms, with dimensions read from the SVG attributes. The mouth is drawn using the `d3.arc` path generator.

Hharika-1929

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

A smiley face drawn with SVG elements animates its eyebrows upward and downward in a repeating two-second cycle. The code builds the face by appending circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth using D3.js v5. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on a group element, which alternately shifts its `transform` attribute. The example demonstrates fundamental DOM manipulation and selection with `d3.select` and `d3.append`.

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

A smiley face drawn with D3.js animates its eyebrows in a looping vertical motion, demonstrating fundamental DOM manipulation. The visualization constructs the face using SVG shapes—a circle for the head, circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` for the mouth. Coordinates are centered via a translated `<g>` element, and the eyebrow movement is driven by chained `transition` calls that shift the group’s `transform` attribute over 2-second intervals. The code relies on D3 v5’s `select`, `attr`, and `transition` APIs, with a fixed viewport defined in the HTML.

NNeil Chen

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

This example builds a smiley face with D3.js v5, animating its eyebrows in a repeating up-and-down motion. The face is constructed entirely from SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` API for the mouth—all grouped and positioned via `transform` attributes. The animation uses chained `transition().duration()` calls on the eyebrow group, while static styling is applied directly to attributes like `fill` and `stroke`. The code imports `select` and `arc` from D3 and renders to a fixed 960×500 SVG canvas.

Mmanjushayarreddu