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

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

A smiley face drawn with D3.js animates its eyebrows in a repeating up-and-down motion, created by transitioning the group element that contains both eyebrow rectangles. The face is built entirely with SVG shapes, including circles for the eyes and an arc for the mouth, using D3 selections and the `d3.arc` function. The animation runs via chained `transition().duration(2000)` calls, which move the eyebrows up and then back to their original position.

VVaishnavi6199

Aavvarijayakrishna99@gmail.com

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

This smiley face, built with D3.js v5, animates by moving its eyebrows up and down. The SVG face is composed of circles, rectangles, ellipses, and an arc path. The code uses D3's `select`, `append`, and attribute setters to construct the face, and a chained `transition()` with a 2000-millisecond duration to animate the eyebrow group's transform. The visualization demonstrates fundamental DOM manipulation through D3's selection and modification of SVG elements.

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

This example animates a smiling face drawn with D3.js, showing a looped sequence where the eyebrows rise and fall. It demonstrates core SVG manipulation by selecting the root `<svg>` element and appending groups and shapes, including circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth, which is generated using the `d3.arc()` function. The animation is driven by a chain of `.transition().duration(2000)` calls that move the eyebrow group’s `transform` attribute between two vertical positions, using D3 v5’s built-in transition API. The face is centered via a `translate` transform, and the SVG canvas is a fixed 960×500 pixel space.

KKishore22cs072

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

A smiley face composed of SVG shapes animates its eyebrows in a looping sequence. The code builds the face using D3 selections, appending circles for the head and eyes, rectangles for brows, and a path from `d3.arc` for the mouth. Eyebrow movement is driven by chained `transition().duration(2000)` calls that shift the group’s `transform` attribute between two positions. The example demonstrates fundamental DOM manipulation and animation with D3 v5.

SSai Kaushik

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 Let's make a face with D3.js!

A smiley face rendered with SVG animates its eyebrows upward and downward in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG element, appending groups, circles, rectangles, and a path for the mouth using `d3.select` and `d3.arc()`. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group’s `transform` attribute. The code uses D3 v6, with dimensions defined by the SVG’s width and height attributes.

Kkosakase

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!

This fork animates a D3.js smiley face by moving its eyebrows up and down in a repeating sequence. The code demonstrates fundamental DOM manipulation, building the face with SVG shapes including a blue circle head, two eyes, eyebrow rectangles, and an arc-generated mouth. The animation uses D3’s `transition().duration()` chained calls to shift the eyebrows’ transform attribute between two vertical positions over two-second intervals. The example uses d3-selection and d3-shape APIs, with the SVG appended to a 960×500 canvas and coordinates centered via a translation.

Rradhadevarapu