Skip to main content
SimilarExport ZIP
100%

MAP make a with D3.js!

✓ Published0🌍 Public
KKyleHincz
Last edited Sep 26, 2021
Created on Sep 26, 2021

A yellow smiley face rendered in SVG animates its eyebrows upward and back down in a looping two-second transition. Built with D3.js v5, the example uses `d3.select`, `d3.arc` for the mouth, and SVG circles and rectangles for facial features. The eyebrow movement is driven by sequential `transition().duration()` calls that modify the group’s `transform` attribute.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

MAP make D3.js!

A D3.js example demonstrates fundamental DOM manipulation by rendering a yellow smiley face with animated eyebrows. The SVG circle forms the face, while `d3.arc()` creates the mouth path. The code uses D3 selections and transitions to move rectangular eyebrows vertically over two seconds, then back. It imports `select` and `arc` from d3.v5, builds the graphic in an SVG container, and animates the eyebrow group's transform attribute.

KKyleHincz
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Ddtdenver
89% match
Loading thumbnail…

Let's make a face with D3.js!

This example creates a yellow smiley face from SVG primitives, then animates its eyebrows with a chained transition. Using D3.js v5, it selects the SVG, appends a centered group, and draws the face with circles, rectangles, and an arc-generated mouth. The `transition().duration()` calls move the eyebrow group upward and back, while `d3.arc` builds the mouth path from radius and angle parameters.

PPatrickHennessey
89% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is built entirely with D3.js v5 selections and SVG elements. The code uses `d3.select` to target an SVG container, `d3.arc` to draw the mouth as a path, and chained `transition.attr` calls to repeatedly move the eyebrows up and down over 2-second intervals. Circles and rectangles form the eyes and brows, with positions calculated relative to the SVG center.

Mmartvdmarel
89% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The face is drawn using SVG shapes: a circle for the head, circles for eyes, a path with `d3.arc()` for the mouth, and rectangles for eyebrows. D3’s `transition()` method moves the eyebrow group vertically over 2000 milliseconds, creating a continuous up-and-down motion. The code selects the SVG element, appends groups with `translate` transforms, and positions all facial features relative to the canvas center using fixed pixel offsets.

JJiachen Xu
89% 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
89% 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
89% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that move up and down using D3.js transitions. The example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth to a group, with the eyebrow movement created through chained `transition().duration()` calls that alter the group’s transform.

Ffiona187412
89% match