Let's make a face with D3

100%

Let's make a face with D3

✓ Published0🌍 Public

Last edited Nov 24, 2019

Created on Nov 24, 2019

Forked from Untitled

A smiley face rendered in SVG responds to mouse movement by shifting its eyebrows. The example demonstrates fundamental D3.js DOM manipulation using `d3.select` and `d3.append` to build the face from circles and paths, with the `transform` attribute controlling its position. Eyebrow movement is driven by event handlers that update the `cy` attribute of SVG elements. All drawing uses SVG primitives within a single `<svg>` element, with no 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 smiley face rendered in SVG responds to mouse movement by shifting its eyebrows, demonstrating fundamental DOM manipulation with D3.js. The example uses D3 v5’s `select` method to target the SVG element and the `arc` generator to draw the face’s curved features, such as the mouth. The visualization shows how D3 binds data to existing DOM nodes without requiring `.enter()` or `.append()`, focusing instead on updating attributes in response to user interaction. The face is built entirely through SVG shapes, with styling handled by an external CSS file.

Wwen787

95% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG reacts to mouse movement by shifting its eyebrows, demonstrating basic DOM manipulation with D3.js. The example uses `d3.select` to target the SVG element and `d3.arc` to construct the facial shapes, with interactive behavior driven by event listeners. The code is structured as an ES module importing from D3 v5, and the rendering relies purely on SVG elements styled with CSS. The face is the sole visual element, and no external data source is used.

TTheRoadSign

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built from SVG shapes, with eyebrows that animate in response to the viewer’s actions. The code demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` and `d3.append` to create the face’s elements. It relies on the `d3.arc` generator for the mouth and applies simple transitions to move the eyebrows. The page reads the client’s viewport dimensions to size the SVG canvas, and styling is handled via an external stylesheet.

DDifan Gu

94% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG demonstrates basic D3.js DOM manipulation, with animated eyebrows that move to change the expression. The example uses D3 v5's `select` and `arc` functions to construct the facial features, building circles and arcs for the eyes, mouth, and brows within an SVG canvas. The code shows how D3 can directly create and update SVG elements through its data-binding and selection APIs, while the accompanying stylesheet hides page overflow for a clean, focused presentation.

MMarian

93% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows in a looping motion. The example demonstrates fundamental D3.js DOM manipulation by using `select` to target SVG elements and `append` to build circles, rectangles, and a path arc for the mouth. A chained `transition().duration()` sequence moves the eyebrow group up and down over two-second intervals. The face is centered on a 960-by-500 viewport, with all coordinates offset from the middle via a translation transform.

CCameron

93% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face is drawn as an SVG graphic, with animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation with D3.js by selecting an `svg` element and using the `arc` generator from the `d3` module to create the face’s shapes. The code reads the SVG’s height and width attributes via `attr` and parseFloat, and browses over a simple dataset to bind elements. Rendering uses SVG paths, with styles applied through an external stylesheet that hides page overflow.

PPatrickHennessey

93% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates basic DOM manipulation. The SVG face has blue circular head, green eyes, and an arc-based mouth, with rectangular eyebrows that animate up and down using chained `transition` calls. The code uses d3.select to target the SVG, d3.arc to generate the mouth path, and attribute methods like `.attr` to position elements. Eyebrow movement is achieved through sequential `.transition().duration()` operations that translate the eyebrow group vertically.

DDaniel Piqué

93% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows in a looping motion. The example demonstrates basic DOM manipulation and transitions in D3.js v5, using `d3.select` to append circles, rectangles, and an arc-generated path for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that shift the group's `transform` attribute up and down. The face is centered via an SVG group with translated coordinates, and all styling is handled through inline attributes and a linked stylesheet.

Iidwann-eng

93% match