Skip to main content
SimilarExport ZIP
100%

Dataviz 2018 - 2. D3 starter, SVG DOM manipulation, transition(animation), Smile Face - Ep4

✓ Published4🌍 Public
MMinwoo Pak
Last edited Jun 15, 2021
Created on Oct 13, 2019

This example shows a yellow smiley face built from SVG elements, with animated eyebrows that move up and down in a looping transition. The code creates a circle for the face, two circles for eyes, a mouth drawn with `d3.arc`, and rectangles for eyebrows using D3 selections. It demonstrates SVG DOM manipulation by appending elements to groups, and animates the eyebrow group’s `transform` attribute with chained `transition().duration()` calls. The visualization runs in D3 v7 and renders to a 960×500 SVG canvas.

AI-generated description

Make a smiley face with d3

Getting started with D3 Handling SVG elements Transition

MIT Licensed

Similar vizzes

Loading thumbnail…

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
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiley face from SVG elements, with animated eyebrows that move up and down. The code uses D3 selections to append a yellow circle for the head, circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. It applies `transition` with a two-second duration to animate the eyebrow group’s vertical position, showcasing data-driven document updates. The rendering uses SVG within a 960x500 viewport, driven entirely by D3’s `select` and `arc` APIs.

MMrG113
90% match
Loading thumbnail…

data viz project

A yellow smiley face on a black-outlined circle uses D3.js v5 to animate its eyebrows in a looping transition. The SVG face is centered via a translated group, with eyes placed using circles and eyebrows as rectangles. D3’s `transition` and `attr` methods move the eyebrow group up and down repeatedly, while the mouth is drawn with the `arc` generator using a half-circle path. The example demonstrates basic DOM manipulation and shape creation in D3, rendering entirely in SVG.

Nnawbx1
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing an animated smiley face from SVG shapes. The face consists of a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based mouth, all positioned relative to an SVG group centered on the canvas. Using d3 selection and transition methods, the eyebrows perform a repeated up-and-down motion over two-second intervals. The code relies on d3.select, d3.arc for the mouth path, and chained transition.attrTween (via transition.attr) to animate the eyebrow group’s vertical offset, showcasing basic data-driven document updates without any external dataset.

Ttonestar
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes, and its eyebrows move up and down in a looping animation. The example demonstrates fundamental D3.js v5 DOM manipulation by chaining `transition` and `duration` calls to animate the eyebrow group’s `transform`. It uses `d3.select` to target the SVG, `d3.arc` to create the mouth path, and explicit `attr` setters for circles and rectangles, showing how D3 binds data-less elements to the document.

PPiet van Blokland
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates core D3.js DOM manipulation and transitions. The code builds the face from basic shapes—circles for the eyes and head, a rectangular eyebrow, and an arc-generated mouth—anchored within a centered group. Using d3-selection and d3-transition, the eyebrows animate upward and back down over two sequential two-second intervals. The example shows how D3’s select, append, attr, and transition methods compose to create dynamic, interactive-style visuals without external data, relying purely on hardcoded geometry and SVG coordinates.

DDy-Diana
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered with SVG demonstrates D3.js DOM manipulation. The code uses `d3.select` to build circles for eyes and a face, a `d3.arc` path for the mouth, and `transition().attr()` to animate rectangular eyebrows moving up and down over two seconds. The example highlights chained transitions and attribute updates on a fixed SVG canvas.

Wwindwardpassage
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that rise and fall. The face is built through basic DOM manipulation with D3.js, appending circles, rectangles, and an arc-shaped mouth to an SVG group. A chained `transition` with a 2000-millisecond duration moves the eyebrow group up and down. The example demonstrates core D3 v5 selections and transitions for simple, focused visual animations.

WWesley Yuen
90% match