Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Jul 28, 2020

Created on Jul 28, 2020

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

This example demonstrates how to build a smiley face whose eyebrows move using fundamental D3.js DOM manipulation. The code selects SVG elements and binds data to them with `d3.select` and `data()`, then applies updates via `enter` and `merge` selections. It uses `d3.interval` to drive the animation, adjusting eyebrow positions through `attr` calls on the `cx` and `cy` properties. Rendering occurs in an SVG container created in the HTML, with styles defined in an external stylesheet. The face itself is composed of circles and ellipse shapes, while the script runs a continuous loop to shift the eyebrows in and out.

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 how D3.js can animate a smiley face by manipulating SVG shapes, specifically moving its eyebrows up and down over a four-second loop. The code builds the face using `d3.select` to append SVG elements like circles, rectangles, and a path for the mouth, with an arc generator defining the mouth’s curve. The eyebrows use chained `transition().duration(2000)` calls to shift their vertical position, creating the facial animation. The entire face is centered within an SVG canvas using a `<g>` element, with hardcoded layout constants for eye spacing and dimensions.

Vveagy

95% 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. The example shows an SVG face whose eyebrows move dynamically, illustrating how D3 selects and modifies elements. The code uses `d3.select`, `append`, and `attr` to construct the face from SVG circles and paths, then applies transitions to adjust eyebrow positions. It relies on D3 v5, rendering everything as SVG within a 960x500 viewport, with accompanying CSS for styling and layout. The dataset is implicit—the face geometry is hardcoded rather than loaded from external data.

Wwen787

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic D3.js DOM manipulation by building a smiley face with animated eyebrows. The SVG circle face, eyes, and rectangular eyebrows are appended to a centered group element, while the mouth is drawn using the `d3.arc` path generator. Eyebrow movement is achieved through chained `transition` and `.attr` calls that shift the group’s transform over two-second intervals. The code relies on D3 v5 selections and transitions, rendering entirely as animated SVG without external data sources.

FFelipe Menegossi

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build an animated smiley face using D3.js, with eyebrows that move up and down over time. It shows fundamental DOM manipulation by selecting SVG elements and appending shapes like circles, rectangles, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and chained `transition.attr` calls to animate the eyebrow group’s vertical position. The face is drawn entirely with SVG, centered in a 960×500 viewport, and the animation runs continuously without external data.

Lliunaiming

95% match

Loading thumbnail…

Let's make a face with D3.js!

Lliunaiming

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a smiley face whose eyebrows animate. The code selects an SVG element, sizes it to the full browser window, and appends a rounded rectangle as the background. It demonstrates fundamental DOM manipulation by chaining D3 methods like `select` and `append` to create the face’s parts, with the eyebrow movement driven by simple data-driven updates in the same SVG structure. The project relies on D3 v5 and renders entirely as SVG.

Ggcappadaniel

95% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with D3.js animates its eyebrows in a looping vertical motion. The example demonstrates fundamental DOM manipulation by selecting an SVG canvas and appending circles, rectangles, and a mouth path using `d3.select` and `d3.arc`. Eyebrow movement relies on chained `transition().duration(2000)` calls that alternately shift the eyebrow group’s `transform` attribute up and down. The face is centered via a translated `<g>` element, with static geometry defined by numeric constants for eye spacing, radius, and eyebrow dimensions.

AAXE

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

95% match