Smiley face with D3.js!

100%

Smiley face with D3.js!

✓ Published0🌍 Public

Last edited Jan 28, 2021

Created on Jan 28, 2021

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

A smiley face rendered in blue SVG responds to interaction as its eyebrows move. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` to target the SVG element and apply styling directly. It imports specific D3 methods rather than the full object, showcasing modular usage. The face is built entirely through SVG elements, with no external data source, relying on D3’s selection and attribute methods to update the eyebrows 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…

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

90% 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

90% 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é

90% match

Loading thumbnail…

Smiley face using D3

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation, with animated eyebrows that move up and down. The code draws yellow circles for the face and eyes, rectangles for eyebrows, and an arc-generated mouth, all positioned via D3 selections and transforms. A transition chain animates the eyebrow group’s vertical position over four one-second intervals, showcasing repeated attribute updates. The example relies on D3 v5’s `select`, `arc`, and `transition` APIs within a static SVG container.

AAyush Gupta

90% match

Loading thumbnail…

smile.js!

A smiley face with animated eyebrows demonstrates basic DOM manipulation and SVG rendering in D3.js v5. The visualization constructs a red circle with a blue stroke, two eyes, rectangular eyebrows, and an arc-based mouth using D3 selection and shape-generating functions. The eyebrows move up and down via chained `transition` calls over five-second durations, showcasing D3's ability to animate SVG attributes. The code directly selects the SVG element, appends groups, and applies transforms to position facial features.

AAbhinav-Mullapudi

90% match

Loading thumbnail…

Let's make a face with D3.js!

A red D3.js smiley face is rendered in an SVG, with animated eyebrows that move to change its expression. The example demonstrates fundamental DOM manipulation by using `d3.select` to style the SVG background and dynamically update facial features. Built with D3 v5, the code relies on standard selection and attribute methods to drive the interactive animation, showing how to bind data to visual elements and create a playful, state-based face.

TTheRoadSign

90% 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

90% 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 SVG shapes, with animated eyebrows that move upward and downward. The face is drawn entirely through D3 selections and attribute assignments, using `d3.select` to target the SVG element and chain methods like `.append` and `.attr` to build the circles and lines. The eyebrows animate via a recurring `setInterval` that toggles their vertical position, showcasing how D3 can update existing elements. Rendering is purely SVG-based, with styling handled by an external stylesheet that hides overflow for a clean presentation.

Ssathesujit

90% match