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

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a yellow circle head, eyes, a line nose, and an arc mouth. The code animates the eyebrows using chained `transition().duration()` calls, moving them upward and back down over two seconds. It uses D3 v5’s `select` to target the SVG element and `arc` to generate the mouth path, with all elements appended to a centered group. The rendering relies entirely on SVG and animation, with no external data source.

Mmivan000

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows, rendered as rectangles, animate upward and then back down through chained `transition().duration()` calls. The code imports `select` and `arc` from D3 v5, uses SVG elements for rendering, and relies on data-driven attributes to position features relative to the viewport dimensions.

RRadhika Ganapathy

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face from SVG shapes. A yellow circle forms the head, with black circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The eyebrows animate upward and downward via chained `transition().duration()` calls, moving their containing group’s `transform` attribute over two seconds. The code uses D3 selections, `attr()`, and `append()` to construct elements, alongside the `arc()` generator from D3’s shape module.

HHojjat Karami

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face with animated eyebrows. The face is built using SVG shapes, including circles for the eyes and a path generated with the `d3.arc` function for the mouth. Eyebrows are rendered as rectangles and animated using chained `transition` calls with `duration` to move them up and back down. The code imports `select` and `arc` from the D3 v5 library, and positions elements relative to the SVG’s center using attribute setters and transform strings.

CColten Appleby

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives, including a yellow circle head, eyes, and a mouth arc. The animation shows the eyebrows moving up and down repeatedly by chaining `transition().duration()` calls on the eyebrow group, which translate vertically. The code builds the face using `d3.select`, `svg.append`, and `d3.arc` to generate the mouth path, with all elements arranged via absolute coordinates. The animation runs automatically on load, cycling the eyebrow position every two seconds.

Mminpugithub

KKonstantinos Kotsiaridis

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face in SVG. The face includes two eyes, a mouth drawn using the `d3.arc` path generator, and rectangular eyebrows that animate vertically via chained `transition` calls with a 2-second duration each. The animation toggles the eyebrows up and down repeatedly, showing how D3’s selection methods and attribute updates, such as `attr` and `transition`, modify SVG elements over time. The code uses D3 v5 and imports `select` and `arc` from the library.

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth. The eyebrows animate by moving upward and then returning to their original position using chained `transition().duration(2000)` calls on a group element. The code uses D3 v5’s `select`, `append`, `attr`, and `transition` methods, along with the `arc` generator for the mouth path. All rendering occurs in an SVG canvas, with dimensions set to 960 by 500 pixels.

Cczhang746

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

A D3.js smiley face demonstrates fundamental DOM manipulation and animation. The face consists of a yellow circle, two eyes, and a mouth arc, with rectangular eyebrows that animate up and down over two-second transitions using chained `transition` calls. The SVG elements are positioned using translation transforms within a central group. The example uses D3 v5 with the `select`, `append`, `attr`, and `arc` APIs to build and animate the face, rendering via SVG in a browser.

Sserrulate@gmail.com