Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
NNita
Last edited Jan 3, 2024
Created on Jan 3, 2024

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.

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 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
96% 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
96% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows animate up and down. The face is built using SVG circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. D3 transitions animate the eyebrow group’s `transform` attribute over two sequential two-second intervals. The code selects the SVG element, appends a centered group, and uses D3’s `select` and `arc` imports to construct the static and dynamic elements.

NNiharika-Guthikonda
95% 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
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 Let's make a face with D3.js!

A smiley face drawn with D3.js animates its eyebrows in a repeated rise-and-fall motion. The example demonstrates fundamental DOM manipulation by building the face from SVG elements—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` helper for the mouth. Eyebrow movement uses chained `transition().duration()` calls to shift the group’s `transform` attribute, alternating between raised and lowered positions. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG on a 960×500 canvas.

Ppavakpatel
95% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows move. The face is drawn as SVG elements, and the eyebrows are animated using D3’s `transition.attrTween` to shift their vertical position. The code uses `d3.select` and `d3.append` to build the shapes, while `d3.interval` drives the continuous motion. The page loads D3 v5 from a CDN and applies styling from an external stylesheet, with all script logic contained in `bundle.js`.

YYan Yan
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
95% match