Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
YYan Yan
Last edited Jan 17, 2023
Created on Jan 17, 2023

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`.

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 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!

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 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!

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
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 yellow smiley face whose eyebrows animate up and down. The code uses d3.select, d3.append, and d3.attr to construct SVG shapes including circles, rectangles, and an arc-based mouth. A d3.transition with a 2000-millisecond duration cycles the eyebrow group’s translate transform between two vertical positions, creating a looping motion. The page loads d3.v5 from a CDN and renders entirely in SVG with no external data source.

Nnshedd
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 static smiley face in SVG and animating its eyebrows. The face is built from primitive shapes—circles for the eyes, rectangles for the eyebrows and hair, and a path generated with the `arc()` function for the mouth—all positioned within a centered `<g>` element. Using `transition.attr`, the eyebrows move upward and then return to their original position over repeated two-second intervals. The code relies on `d3.select`, `d3.arc`, and chained transitions to create the looped motion.

BBenoit Estrade
94% 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 looping vertical motion, demonstrating fundamental DOM manipulation. The visualization constructs the face using SVG shapes—a circle for the head, circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` for the mouth. Coordinates are centered via a translated `<g>` element, and the eyebrow movement is driven by chained `transition` calls that shift the group’s `transform` attribute over 2-second intervals. The code relies on D3 v5’s `select`, `attr`, and `transition` APIs, with a fixed viewport defined in the HTML.

NNeil Chen
94% match
Loading thumbnail…

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

This visualization demonstrates fundamental D3.js DOM manipulation by rendering a smiley face with animated eyebrows. The code uses D3 v5 to select an SVG element and append geometric shapes—circles for the face and eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. A chained `transition` with a two-second duration repeatedly moves the eyebrows upward and back down, creating a subtle expressive animation. The example relies entirely on D3’s selection, attribute, and transition APIs, with no external data sources.

Jjasondmelloprogrammer
94% match