Fork of 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 yellow SVG shapes, demonstrates a looping eyebrow animation in D3.js v5. The code uses `d3.select` and `d3.arc` to construct the static face, while chained `transition().duration()` calls move the eyebrow rectangles up and down. All rendering occurs in an SVG container, with the face centered via a translation transform. The example illustrates fundamental DOM manipulation and basic animation sequencing in D3.

MManideepChakilam

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

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The SVG face is built using circles for the eyes and an arc path for the mouth, centered via a group transform. Using `d3.transition` with a 2000-millisecond duration, the eyebrows—rendered as rectangles—move up and down in a looping sequence, showcasing sequential transition chaining in D3 v5. The code imports `select` and `arc` from the D3 module to construct and animate the static face.

Mmanishcheruku

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation and transitions with D3.js. The face is built using SVG shapes including circles for the eyes, a path created with `d3.arc` for the mouth, and rectangles for the eyebrows. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down repeatedly, while the static face elements remain centered via a translated `<g>` element. The code imports `select` and `arc` from the D3 v5 library and renders entirely in SVG within a 960×500 viewport.

MManideepChakilam

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!

A D3.js smiley face animates its eyebrows in a looping vertical motion, shifting up and down every two seconds. The face is drawn entirely with SVG primitives: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path created with the `arc` generator for the mouth. The code uses `d3.select` to manipulate the SVG canvas, handles mouse events implicitly through transitions, and relies on D3 v5's `transition().duration()` method to animate the eyebrow group's transform attribute. The layout is centered via a translation transform based on the viewport dimensions.

BBKirst3

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!

This example shows a yellow smiley face with animated eyebrows, which shift upward and then return to their resting position in a looping motion. The face is constructed entirely from SVG primitives—circles for the eyes and head, rectangles for the brows, and a path for the mouth—all centered within a 960×500 viewport. Using D3 v5, the code demonstrates DOM manipulation through chained `select`, `append`, and `attr` calls, while the eyebrow animation relies on the `transition` API to tween the `transform` attribute over 1500 milliseconds.

DDeeraj Thakkilapati

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

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js v5. The code uses `d3.select` and `d3.append` to build circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrow movement is achieved through chained `transition().duration()` calls that shift the group’s transform. The example demonstrates fundamental DOM manipulation and transition sequencing with D3.

Ssugunagar