Skip to main content
SimilarExport ZIP
100%

a face with D3.js!, Migusti

✓ Published0🌍 Public
RRemustus
Last edited Sep 3, 2021
Created on Sep 3, 2021

A smiling face rendered in SVG animates as its eyebrows rise and fall, demonstrating fundamental DOM manipulation with D3.js. The code uses d3.select to append circle, rect, and path elements, positioning them via SVG transform attributes. Eyebrow movement is created with chained transition() and duration(2000) calls, while the mouth uses d3.arc with defined innerRadius, outerRadius, and start/end angles. The yellow face and black features are drawn entirely through D3’s data-join-free imperative API on a fixed 960×500 canvas.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face using basic shapes, including circles for the eyes and a path generated with the `d3.arc` function for the mouth. Eyebrows are rectangle elements that move up and down using chained `transition` calls, each lasting three seconds. The example relies on D3 v5’s `select`, `arc`, and transition methods, rendering in SVG with only a script and stylesheet, without external data sources.

AArthurFJ
92% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes animates its eyebrows up and down in a looping cycle. The code uses D3.js selection, appending, and attribute manipulation to build a yellow circle head, two black eyes, rectangular brows, and an arc-shaped mouth from D3’s `arc` function. A chain of `transition` calls with two-second durations moves the eyebrow group up and down repeatedly, demonstrating fundamental DOM manipulation and view transitions within an SVG canvas.

Mmishaldholakia
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring animated eyebrows that move up and down. The code selects the SVG element, appends circles for the face and eyes, rectangles for the eyebrows, and an arc for the mouth using d3.arc. Eyebrow movement is achieved through chained transition().duration() calls that shift their vertical position. The example demonstrates fundamental DOM manipulation with D3's select and append methods, using static attributes and no external data.

VVito
92% match
Loading thumbnail…

A Face with D3.js!

A smiley face drawn with D3.js features animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation by building the face from SVG primitives: circles for eyes, a rectangle for the nose, a path from `d3.arc` for the mouth, and rectangles for eyebrows. The animation uses chained `transition().duration(2000)` calls to shift the entire eyebrow group's `transform`, showing how D3 manipulates SVG attributes over time. The SVG canvas is set to 960×500 with an orange background.

YYoung Song
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes has animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation, building the face with `select`, `append`, circles, rectangles, and a mouth path generated using the `arc` helper. Eyebrow motion is created through chained `transition().duration()` calls on a group element, while the face is centered using an SVG `transform`. The code uses D3 v5 modules and relies on static shape attributes rather than data binding.

MMMoronto
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau
92% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered as SVG shapes in D3.js v5 shows animated eyebrow movements. The code builds the face using `d3.select`, `d3.append`, and `d3.arc` to create a yellow circle head, two eyes, and a mouth. Eyebrows are rectangles that move up and down via chained `transition().duration()` calls, each lasting two seconds. The example demonstrates fundamental DOM manipulation with D3's imperative API, drawing all elements on a 960×500 SVG canvas.

YYuShuenWang
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face from primitives: circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Using D3's selection and transition methods, the eyebrows animate vertically over two seconds, then return, cycling through the eyebrow group's transform attribute. The example relies on d3.select, d3.arc, and chained transitions to compose and animate SVG shapes.

Jjhsu0811
92% match