Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
Bbenben1996
Last edited Jan 4, 2019
Created on Jan 4, 2019

This example demonstrates fundamental DOM manipulation and animation with D3.js by constructing an interactive smiley face with yellow circular head, eyes, and animated eyebrows. The visualization uses D3.js v5 to create SVG elements including circles, rectangles, and a path for the mouth via the `d3.arc` API. The eyebrows undergo a looping transition animation using chained `transition().duration(2000)` calls to move up and down. The code shows basic selection, appending, and attribute setting through the `select` and `append` methods.

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!

This example demonstrates fundamental DOM manipulation with D3.js v5 by constructing a smiley face out of basic SVG shapes. The code uses `d3.select`, `d3.append`, and chained `.attr()` calls to create a yellow circle, two eye circles, a mouth path drawn with `d3.arc()`, and a rectangular eyebrow that animates vertically via a pair of `transition().duration()` calls, moving down and back up repeatedly. No external data is used; the visualization relies purely on hardcoded geometry and SVG rendering.

Aaidanoconnor1
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation and animation with D3.js by constructing a smiley face from SVG shapes and animating its eyebrows. A yellow circle forms the head, with eyes, rectangular eyebrows, and an arc-based mouth positioned using D3 selections and attribute setters. The code uses d3.select, d3.arc, and chained transitions with .transition().duration() to move the eyebrow group up and down over two 2-second cycles. All elements are appended to an SVG container, with positioning handled via transform attributes.

Ssslee8778960
92% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face. The visualization shows a yellow circle with eyes, eyebrows, and a mouth, where the eyebrows perform a continuous up-and-down movement. The code uses D3’s `select` and `append` to construct SVG elements, and `transition().duration()` to animate the eyebrow group’s `transform` attribute over 2000-millisecond intervals. The mouth is drawn with a `d3.arc` path generator, while hardcoded constants control facial feature positioning and spacing. The rendering is entirely SVG-based, with static input values defining the geometry.

OOrangTang
92% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js tutorial demonstrates basic DOM manipulation by constructing a yellow smiley face with animated eyebrows. The code appends SVG circles for eyes, rectangles for brows, and an arc-generated path for the mouth using `d3.arc`. A `transition` with a 2000-millisecond duration moves the eyebrows up and down repeatedly, showing chained state changes. The example relies on D3 v5 selections, `attr`, and `append` to build the face, with no external data source.

BBen Daniel
92% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building an animated smiley face with moving eyebrows. It renders an SVG scene with a yellow circular head, eyes, and a mouth created using the `d3.arc` path generator. The eyebrows are rectangles that animate upward and downward via chained `transition.attr` calls, moving over two seconds each way. The code uses D3 v5 selections and attributes to construct and position all elements relative to a centered group.

Ppizzaonline
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation in D3.js v5. The code uses d3.select and d3.append to build SVG circles, rectangles, and an arc-generated mouth, then applies d3.transition to move the eyebrows up and down over two one-second cycles. The example imports the select and arc helpers from the d3 module and positions elements by translating a central group, showcasing method chaining and coordinate transforms.

Yyktan89
92% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face from SVG shapes. A yellow circle forms the head, with eyes, eyebrows, and a mouth added as separate elements. The code uses d3.select and append to construct the face, then applies chained transitions to move the eyebrows up and down repeatedly. The mouth is drawn using d3.arc with specified inner and outer radii and angles. All shapes are positioned relative to a centered group, with animation running for two seconds per eyebrow movement cycle.

Wwhyamn
92% 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
92% match