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

100%

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

✓ Published0🌍 Public

Last edited Apr 27, 2023

Created on Apr 27, 2023

Forked from 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.

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

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

95% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face whose eyebrows animate. It shows how D3’s selection and mutation methods create and update SVG shapes directly. The code uses `d3.select`, `d3.arc`, and attribute getters to size elements from the SVG element, rendering the face entirely with vector graphics. The face’s eyebrows move, but the specific motion pattern is not detailed in the provided source. The implementation relies on D3 v5 and operates on a blank SVG canvas with no external data source.

Eeypkllas@gmail.com

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

95% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face from SVG shapes, including a red circle head, two eyes, and a mouth drawn with the `d3.arc` helper. The eyebrows, rendered as rectangles, animate upward and back down using D3’s `transition` method with a duration of 1000 and 2000 milliseconds. The code structures the scene by appending elements to a central `<g>` group, using constants for spacing and offsets to position facial features symmetrically. Built with d3.v5, it renders in an SVG container and relies on simple attribute chaining for styling and movement.

Ssmchaaritha@gmail.com

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

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

95% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building an interactive smiley face whose eyebrows move. It uses d3.select to bind SVG elements and d3.arc to generate curved facial features. The face is rendered as static SVG shapes, with animated eyebrow movement driven by D3’s data-join and update patterns. The code imports select and arc directly from the d3 module, using a v5 bundle, and structures the visualization as a clean, modular JavaScript file separated from the HTML and CSS. The data is purely synthetic, defined inline within the script.

Eeypkllas@gmail.com

94% match