Make a MAP with D3.js!

100%

Make a MAP with D3.js!

✓ Published0🌍 Public

Last edited Sep 26, 2021

Created on Sep 26, 2021

Forked from Let's make a face with D3.js!

A step-by-step tutorial demonstrates fundamental D3.js DOM manipulation by constructing an animated smiley face. The example uses SVG primitives—circles, rectangles, and paths—to render the face, while a chained `transition` animates the eyebrows up and down over two-second intervals. The mouth is created using D3's `arc` function to generate a donut-shaped path. The code relies on D3 v5's `select`, `append`, and `attr` methods to build and modify the SVG structure dynamically.

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

90% match

Loading thumbnail…

Let's make a map with D3.js!

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.

Bbenben1996

89% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js tutorial demonstrates fundamental DOM manipulation by building a smiley face with animated eyebrows in an SVG canvas. Using D3's `select` and `append` methods, the code creates and styles SVG circles and other elements dynamically. The example relies on D3 v5's modular imports and shows how to set attributes like radius and position through chained method calls. The accompanying video explains the step-by-step process, while the working code is rendered directly in the browser using standard SVG elements within a 960×500 viewport.

HHonza Cahlík

89% 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 out of SVG shapes. The code uses `d3.select` to append a circle for the head, two circles for eyes, rectangles for eyebrows, and an `d3.arc()` path for the mouth. D3 transitions animate the eyebrows upward and back over four seconds. The example uses D3 v5 and relies on simple attribute setters like `.attr()` to position each element.

Ssethips

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic DOM manipulation with D3.js by building an animated smiley face from SVG shapes. It shows how to append and style circles for the face and eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows use chained `transition` calls to move up and down over two-second intervals, while the face is centered using a `g` element with a `translate` transform. The code imports `select` and `arc` from D3 and renders entirely in SVG.

DDimitarDraganov

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from basic SVG shapes, including a red circle head, eyes, and a mouth. The visualization showcases animated eyebrows that move up and down using D3 transitions, with the `select` and `append` APIs building the SVG hierarchy. The code uses `d3.select` to target the SVG element, `attr` to set properties like coordinates and dimensions, and `arc` to generate the mouth path. The animation runs through chained `transition()` calls with specified durations, highlighting D3's ability to animate SVG attributes over time.

Vvunturi

89% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates core DOM manipulation through SVG elements, including circles for the eyes, rectangles for eyebrows, and an arc-generated mouth. Animated transitions move the eyebrows upward and back down over two-second intervals, showing how `transition().duration()` sequences chained animations. The face is centered using SVG group transforms, while D3 v5’s `select` and `arc` APIs handle element selection and path generation. The example highlights fundamental D3 concepts like attribute setting, coordinate positioning, and timed state changes within a static SVG canvas.

MMMoronto

88% match

Loading thumbnail…

MAP make a with D3.js!

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.

KKyleHincz

88% match