Fork of Face

Fork of Fork of face

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation using D3.js. The face is built from SVG shapes, including circles for the eyes and head, rectangles for the eyebrows, and an arc-generated path for the mouth. The code uses d3.select and d3.arc, with a chained transition that moves the eyebrow group up and down over two-second intervals, creating a looping eyebrow raise. Static attributes set the face dimensions and positions within a 960 by 500 SVG canvas.

EEbenizerR

Fork of making face with D3.js!

A smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The code uses `d3.select` to target the SVG, then appends groups and shapes including circles, rectangles, and a path for the mouth via `d3.arc`. Two eyebrow rectangles transition vertically using chained `transition.attr` calls with specified durations, creating a repeated eyebrow raise effect. The static face elements render in pink with black outlines, while only the eyebrows animate.

MM Hema

Fork of face

A stylized smiley face built with D3.js v5 combines SVG shapes and transitions to animate raised and lowered eyebrows. The face includes a yellow circle head, black-outlined features, elliptical cheeks and ears, and a curved mouth generated with the `arc()` function. Using `select`, `append`, and `attr`, the code positions eyes, nose, and hair, while a chained `transition().duration(2000)` sequence moves the eyebrow group up and down, creating a surprised or expressive look. The visualization demonstrates fundamental DOM manipulation and animation via D3’s selection and transition APIs, with all elements rendered as SVG inside a fixed 960×500 viewport.

Eenckkipronoh@gmail.com

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

A smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The SVG face, centered on a blue circle, includes eyes and an arc-based mouth. D3 transitions move the eyebrow group upward and back over two seconds. The code uses `select`, `arc`, and chained `transition().duration()` calls from d3.v5 to animate SVG attributes.

Sshiiva-surya

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

A D3.js smiley face animates by moving its eyebrows up and down in a looping transition. The face is built entirely with SVG primitives—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—positioned within a centered group. Using `d3.select`, `d3.arc`, and chained `transition().duration()` calls, the code shifts the eyebrow group’s vertical translation between two offsets. A black background and yellow face with black strokes create clear visual contrast. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

SSANEEM MOHAMMAD

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

A smiley face with light green circular head, black-outlined eyes, and a double-arc mouth animates its rectangular eyebrows upward and downward in a looping transition. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and `transition` to move SVG elements. Eye and eyebrow spacing are controlled via offset constants, while the mouth is drawn with the `d3.arc` path generator. The animation runs continuously, with each eyebrow movement taking two seconds in each direction.

SSANEEM MOHAMMAD

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

A D3.js smiley face demonstrates basic DOM manipulation with animated eyebrows. Built with d3.v5, the example uses D3 selections to append SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth—into a centered group. A two-stage `transition()` chain moves the eyebrow group up and back down over four seconds, illustrating D3's animation timing. The code imports `select` and `arc` from the 'd3' package, with dimensions read directly from the SVG attributes.

SSayan Chatterjee

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

A red smiley face with animated eyebrows demonstrates fundamental DOM manipulation and transitions with D3.js v5. The SVG face is centered using a translated group, with circles for eyes and a path drawn via the `d3.arc` helper for the mouth. Eyebrow rectangles transition vertically in a repeating two-second cycle using chained `transition().duration()` calls. The code shows direct attribute setting and selection methods on SVG elements, with a static yellow face on a black background.

Kkirangithub23