Oblicej with D3.js

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiley face from basic SVG shapes. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate by translating up and down in a loop using chained `transition()` calls with 2-second durations. The code demonstrates fundamental DOM manipulation via D3 selections, `append()`, and `attr()`, while the `arc()` generator from D3’s shape module creates the mouth path. All elements are centered using a translated SVG `<g>` group.

AAlain Jennotte

Let's make a face with D3.js!

A smiling yellow face with black outlined eyes and a curved mouth animates its eyebrows up and down. The example demonstrates fundamental DOM manipulation in D3.js by appending SVG shapes to a central group, with a path drawn via the `arc` function for the mouth. The code uses chained `transition().duration()` calls to move the eyebrows between two vertical positions, creating a looping animation. All elements are rendered as SVG within an HTML5 canvas, using D3 v5.

OOsekovS

Let's make a face with D3.js!

OOsekovS

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, whose eyebrows animate up and down in a looping motion. It demonstrates fundamental DOM manipulation using D3.js selections, appending a circle for the head, circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc()` helper for the mouth. The animation runs via chained `transition()` calls with `.duration(2000)` on the eyebrow group. The code imports `select` and `arc` from the `d3` module and uses `attr()` to set positions and styles.

Aalbanodossantos

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous

Let's make a face with D3.js!

This example demonstrates a simple smiling face built entirely with SVG shapes, including a yellow circular head, two eyes, animated eyebrows, and an arc-based mouth. The code uses D3.js v6 selections to append and position elements, while `transition().duration()` creates the bouncing eyebrow animation. A single `d3.arc()` path generates the lips, and the central `g` transform centers the composition. The face is drawn with hard-coded geometry values for spacing and radius, without external data.

Wwoo

Let's make a face with D3.js!

This example shows how to build a smiley face with D3.js v5, using SVG shapes and animation to make the eyebrows move. A yellow circle forms the face, with two smaller circles for eyes and a path drawn with the `arc` helper for the mouth. The code uses `select` and `append` to create elements, and `transition().attr` to animate the eyebrows upward and back down over two seconds each way. The face is centered by translating a group element, with all dimensions derived from the SVG’s width and height attributes.

PPiotrekW2

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger