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

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

A smiling face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The code selects an SVG element, appends a yellow circle for the face, and adds eyes, eyebrows, and a mouth using D3’s `arc()` generator. Two transitions animate the eyebrow group’s vertical position over two seconds each, moving them up and down. The example relies on D3’s `select` and `transition` methods to build and animate the static SVG structure.

PPiotr Paszek

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

A smiling face built with SVG shapes demonstrates fundamental DOM manipulation using D3.js v5. The code constructs a yellow circle head, two eyes, and a mouth arc using the `d3.select`, `d3.arc`, and `d3.transition` APIs. The eyebrows, drawn as rectangles, animate vertically via chained `transition().duration()` calls, moving up and then back down over 2.8 seconds. All elements are positioned relative to the SVG's center using `transform` attributes.

BBobViz

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

A smiling face built with SVG renders a yellow circle, two eyes, and an arc-based mouth. D3.js v5 transitions animate the eyebrows, moving a group containing two rectangles upward and back down over a four-second loop. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to manipulate DOM elements directly, with static attributes for spacing and dimensions defined in JavaScript.

SSaip Can Hasbay

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!

A smiley face drawn with SVG elements demonstrates fundamental DOM manipulation and animation with D3.js v5. The face features a yellow circle, two eyes, and a mouth created using the `arc` generator, while the eyebrows animate upward and downward via chained `transition` calls. The code uses `select` and `append` to build the SVG structure, and CSS hover and active states change the face's fill color. The example focuses on showing how D3 can construct and transform visual elements through data-independent selection methods.

XXenos Panagiotis

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

A smiling face built entirely with SVG elements demonstrates basic D3.js DOM manipulation and animation. The code uses `d3.select` to create circles for the eyes, rectangles for the eyebrows, and a `d3.arc` path for the mouth, all within a centered group. The eyebrows animate upward and back down via chained `transition().duration(2000)` calls on the group's transform. Rendered at 960×500, the face is drawn with yellow fill and black strokes, showing how D3 v5 handles simple geometric shapes and timed state changes.

Jjaredzhou

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, two eyes, a mouth drawn using the `d3.arc` function, and rectangular eyebrows are all appended to an SVG container. The eyebrows animate by moving up and down through a chained `transition` with `attr` changes, using a two-second duration for each movement. The code uses D3 v5’s `select` and `arc` methods, with the animation running once on load.

Llerik03

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