Fork of Fork of face

Fork to Make a face

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The code uses `d3.select`, `d3.append`, and `d3.arc` to build the face, while sequential `transition().duration()` calls move the eyebrows up and down in a two-second cycle. The static SVG elements—circle, rectangles, and path—are positioned using translation transforms, with no external data source beyond fixed constants.

Rraphman100

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and transitions in D3.js. The code builds the face using SVG shapes—circles for the eyes and head, rectangles for the eyebrows, and a path created with d3.arc for the mouth. Eyebrows move up and down through chained transition.attr calls, each lasting two seconds. The example uses d3.select and d3.arc from D3 v5, with the entire scene rendered as static SVG elements on a 960×500 canvas.

Rradhadevarapu

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation in D3.js v5. The face is built using SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. Eyebrows move up and down repeatedly via chained `transition()` calls with 2000-millisecond durations. The code imports `select` and `arc` directly from the d3 module, and centers all elements using SVG group transforms.

SSANEEM MOHAMMAD

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

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation and animation with D3.js. The code selects an SVG element and builds the face using circles for eyes, rectangles for eyebrows, and a d3.arc path for the mouth. A chained transition on the eyebrows group animates its vertical position over two seconds, then returns it, creating a repetitive raising and lowering effect. The example relies on D3 v5 selections, attributes, and transitions in a straightforward SVG scene.

SSanjib Paudel

NNiharika Reddy Amanaganti

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and SVG rendering with D3.js. The face is constructed from SVG circles for the eyes and face, a path created with the `d3.arc` function for the mouth, and rectangles for the eyebrows. Animated eyebrow movement is achieved using `transition()` and `attr` chaining over two 2000-millisecond intervals. The example uses D3 v5 and shows how to select and manipulate SVG elements with data-driven methods.

Fork of face

This example shows a simple smiley face built with D3.js, rendered as SVG with a yellow circle, eyes, and a mouth. The code demonstrates fundamental DOM manipulation by using `d3.select` to append elements and `transition.attr` to animate the eyebrows, which move upward and then back down in a looping 2-second cycle. It relies on the D3 v5 API, including `arc` for the mouth path, with dimensions defined by hardcoded constants for spacing and radii.

EEbenizerR

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation in D3.js v5. The code uses `d3.select` to append SVG circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` helper for the mouth. The eyebrows animate via chained `transition().duration()` calls, moving them up and down over two seconds. The face is centered using an SVG transform translation, and the static body scales to a 1000x500 viewport.

NNavaneeth-Ragi