Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Nnaziafrin
Last edited Nov 10, 2019
Created on Nov 10, 2019

A D3.js animation builds a cartoon smiley face entirely from SVG primitives, with a yellow circular head, two eyes, and a curved mouth created using the `d3.arc` path generator. The eyebrows, drawn as rectangles, repeatedly move up and down via chained `transition` calls, each lasting two seconds, to create a winking or surprised expression. The code demonstrates fundamental DOM manipulation by selecting the root `<svg>`, appending groups and shapes, and transforming them with translation attributes, all without reading any external data source.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a cartoon smiley face entirely from SVG primitives, with a yellow circular head, two eyes, and a curved mouth created using the `d3.arc` path generator. The eyebrows, drawn as rectangles, repeatedly move up and down via chained `transition` calls, each lasting two seconds, to create a winking or surprised expression. The code demonstrates fundamental DOM manipulation by selecting the root `<svg>`, appending groups and shapes, and transforming them with translation attributes, all without reading any external data source.

Nnaziafrin
100% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a cartoon smiley face entirely from SVG primitives, with a yellow circular head, two eyes, and a curved mouth created using the `d3.arc` path generator. The eyebrows, drawn as rectangles, repeatedly move up and down via chained `transition` calls, each lasting two seconds, to create a winking or surprised expression. The code demonstrates fundamental DOM manipulation by selecting the root `<svg>`, appending groups and shapes, and transforming them with translation attributes, all without reading any external data source.

Nnaziafrin
100% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js using SVG shapes, including a circle head, two eyes, eyebrows, and an arc-based mouth created with the `d3.arc` helper. The eyebrows animate by chaining `transition().duration(2000)` calls to move them up and down repeatedly. The code demonstrates foundational DOM manipulation, selecting the SVG element with `d3.select`, appending groups and shapes, and using transforms to position features relative to the canvas center. The face is rendered entirely with static SVG attributes, with no external data source.

Nnazirahmad50
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring circular eyes, a curved mouth, and rectangular eyebrows that animate upward and back in a looping motion. The example demonstrates fundamental SVG DOM manipulation by selecting an `<svg>` element and appending grouped shapes with `d3.select` and `append`. It uses D3's `arc` generator to create the mouth path and `transition().duration()` to move the eyebrows and mouth, with attributes like `attr` and `translate` transforms controlling position and animation.

Mmirna981
94% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation draws a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth. The code builds the face using SVG primitives like `circle`, `rect`, and `path`, selected and appended via `d3.select`. An animated eyebrow movement uses chained `transition().attr()` calls over two two-second intervals, shifting the eyebrow group vertically. The `d3.arc` generator defines the mouth’s curved path, and the layout centers the face within a 960×500 SVG using an offset group and width/height attributes.

Ssourcebox-bug
94% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face uses SVG primitives—circles, rectangles, and an arc path—to draw a yellow head, eyes, moving eyebrows, and a mouth. The animation repeatedly translates the eyebrow group up and down via chained `transition().duration()` calls, demonstrating DOM manipulation. The code constructs the face from scratch using D3’s `select`, `append`, and `attr` methods, and computes the mouth’s shape with the `arc` helper, all rendered in an SVG canvas.

Ppcbt1125
94% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face uses SVG primitives—circles, rectangles, and an arc path—to draw a yellow head, eyes, moving eyebrows, and a mouth. The animation repeatedly translates the eyebrow group up and down via chained `transition().duration()` calls, demonstrating DOM manipulation. The code constructs the face from scratch using D3’s `select`, `append`, and `attr` methods, and computes the mouth’s shape with the `arc` helper, all rendered in an SVG canvas.

Ppcbt1125
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no
94% match