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 Nov 3, 2022

Created on Nov 3, 2022

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

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!

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

96% match

Loading thumbnail…

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

This example shows a smiley face whose eyebrows periodically move up and down, demonstrating basic DOM manipulation with D3.js. The face is drawn using SVG shapes including circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered within an SVG canvas. The animation uses D3's `transition()` method to shift the eyebrow group’s transform attribute back and forth, creating a looping motion. The code imports `select` and `arc` from the D3 v5 library and relies on SVG for rendering.

BBrickDust

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

A D3.js smiley face demonstrates basic DOM manipulation with animated eyebrows. Built with d3.v5, the example uses D3 selections to append SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth—into a centered group. A two-stage `transition()` chain moves the eyebrow group up and back down over four seconds, illustrating D3's animation timing. The code imports `select` and `arc` from the 'd3' package, with dimensions read directly from the SVG attributes.

SSayan Chatterjee

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

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

95% match