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

100%

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

✓ Published1🌍 Public

Last edited May 9, 2021

Created on May 9, 2021

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

This fork of Mike Bostock’s D3.js face tutorial demonstrates basic SVG construction and animation by building a smiley face with moving eyebrows. The code selects an empty `svg` element and applies a red background via `svg.style`. It relies on vanilla D3 v5 methods, including `select` and likely `append` and `transition` to manipulate shapes, though only the initial selection is visible in the provided snippet. The example uses SVG markup inside a 960×500 viewport, with styles defined in a separate CSS file.

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

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

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

92% match

Loading thumbnail…

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

A smiley face rendered in green on an SVG canvas demonstrates basic DOM manipulation with D3.js v7. The face’s eyebrows move, though no animation logic is visible in the provided code. The example uses `select` from D3 to target the `<svg>` element and apply a background color, while the face itself is likely drawn through standard SVG shapes. It serves as a fork of a tutorial exercise focused on fundamental D3 selection and styling methods.

Ddok0086m

92% match

Loading thumbnail…

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

This example demonstrates DOM manipulation with D3.js by rendering a smiley face in an SVG canvas on a red background. The code uses D3 v5’s `d3.select` to target the SVG element and apply styling, while the eyebrows move via animated transitions triggered through the bundled JavaScript. Although the index.js file only applies a background color, the associated README and video show the full interactive face, which updates facial features using D3’s data-binding and attribute methods. Rendering is entirely SVG-based, with no external data sources beyond the D3 library loaded from unpkg.

FFahad Bin Emran

92% match

Loading thumbnail…

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

A smiley face rendered as an SVG reacts to mouse movement by shifting its eyebrows. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` and `append` to create and style the face’s circles and paths. The code loads D3 from a CDN and applies CSS rules for full-bleed layout. The interaction is driven by pointer events, though the specific eyebrow movement logic is not detailed in the files shown.

Ddok0086m

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

91% match

Loading thumbnail…

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

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.

Jjlspangl

91% match