Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js!

✓ Published0🌍 Public
Jjlspangl
Last edited May 20, 2021
Created on May 20, 2021

This fork of “Let’s make a face with D3.js!” displays a smiling face whose eyebrows animate with a subtle upward motion. The example uses basic D3.js v5 selections and attribute manipulation to build SVG shapes directly in the browser. It binds the computed dimensions from the surrounding `svg` element and applies transformations to the eyebrow elements, demonstrating fundamental DOM operations without complex data binding. A linked YouTube tutorial accompanies the code, which relies on `d3.select` and `attr` 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…

Fork of Let's make a face with D3.js!

This fork of “Let’s make a face with D3.js!” demonstrates fundamental DOM manipulation by rendering a smiley face with moving eyebrows on a red SVG background. The code selects the `svg` element with `d3.select`, sets its background via `style`, and relies on D3 v5 for all updates. It shows how D3 can bind data to SVG shapes and modify their attributes, making the eyebrows animate as part of the interaction. The example is implemented entirely with D3’s selection and transition APIs, without external data sources.

Jjakfie
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This fork of “Let's make a face with D3.js!” demonstrates fundamental DOM manipulation by rendering a smiley face with animated eyebrows. Using D3 v5, it selects an SVG element and applies data joins to create circles and paths, with eyebrow positions driven by `d3.interval` to simulate movement. The face itself is drawn via SVG shapes, while the script uses `d3.select` and `.attr` methods to update coordinates. The result is a lightweight, code-driven illustration of how D3 binds data to visual elements and responds to timed updates.

Vvasanthvasu
94% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates a smiley face whose eyebrows animate using fundamental D3.js DOM manipulation. The SVG is selected via `d3.select` and styled with a red background. The code uses D3 v5 and renders the face as SVG elements, with the eyebrows moving through dynamic attribute updates. The fork builds on a tutorial approach, showing how D3 can bind and modify visual properties directly in the DOM without complex data joins or scales.

SShengHao-Shi
94% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A D3.js animation demonstrates fundamental DOM manipulation by drawing a smiling face whose eyebrows move. The code uses D3 selections to append SVG shapes—a yellow circle, two eye circles, and rectangular eyebrows—onto a 960×500 viewport. Eyebrows animate by chaining `transition().duration(2000)` calls that translate their group element upward and back. A mouth is rendered as an arc path using the `arc()` generator. The example is a fork of a tutorial, built with D3 v5 and SVG rendering.

Yyesheysamdrup
94% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation by creating a smiley face whose eyebrows animate. Built with D3.js v5, the SVG face is constructed through methods like `d3.select`, `d3.attr`, and `d3.append` to draw circles, paths, and lines. The animation of the eyebrows relies on timed updates to their `y` attributes, showcasing how D3 binds data to visual properties. The code includes a linked tutorial video and renders entirely in an SVG canvas.

NNita
94% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This is a smiley face whose eyebrows move, demonstrating core DOM manipulation with D3.js. The page uses an SVG canvas and manipulates its elements directly through D3 selections. The code employs `d3.select` to target the SVG, while the dynamic eyebrow movement is driven by D3’s data-binding and attribute updates, though the specific animation logic is not shown in the provided files. The example relies on D3 v5 loaded from a CDN, with styling handled by a separate CSS file.

KKitti Kovacs
93% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example creates a smiley face in an SVG canvas, with animated eyebrows that move to express different emotions. It demonstrates fundamental DOM manipulation and data binding using D3.js v5, specifically leveraging the `select` method to target SVG elements and update their attributes. The face is constructed entirely in code rather than from external data, and the animation is achieved by repeatedly setting position attributes on the eyebrow shapes.

Ggabcee
93% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This fork of “Let's make a face with D3.js!” builds an SVG smiley face with animated eyebrows using fundamental DOM manipulation. The face includes yellow circular head, two eyes, a nose, and a mouth, all positioned via SVG attributes and transforms within a centered group. The code uses D3 v5’s `select` and `arc` functions to create the facial features, with eyebrows drawn as arc paths that can shift position. A YouTube tutorial in the README supports learning the underlying D3 concepts.

MMeghanaArepalli
93% match