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 May 3, 2021

Created on May 3, 2021

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

This example demonstrates a pair of smiley faces whose eyes follow the mouse cursor across the screen. It shows two circular faces with white eyes and black pupils, while the mouth changes shape when hovered over. The interaction is built with vanilla JavaScript event listeners, specifically `document.querySelector("body").addEventListener("mousemove", eyeball)`, and uses `getBoundingClientRect` and `Math.atan2` to calculate the rotation angle for each `.eye` element. The faces are styled entirely with CSS, using properties like `border-radius` and `transform: rotate()`, and the page renders through an SVG element alongside the HTML structure.

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!

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

90% match

Loading thumbnail…

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

A dynamic smiley face rendered in SVG responds to mouse movement by shifting its eyebrows. The example demonstrates fundamental D3.js DOM manipulation, using `d3.select` and `d3.event` to track the cursor and update the eyebrow positions through attribute changes. The face itself is constructed from basic SVG shapes—circles for the head and eyes, and paths for the mouth and eyebrows—all styled via a linked CSS file. The code relies on D3 v5 and runs entirely in the browser, with no external data source.

BBeihaiTianming

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

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

88% 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 constructing a smiley face from basic SVG shapes. The face consists of a blue circle, two eyes, rectangular eyebrows, and a curved mouth created using the `d3.arc` function. Animated eyebrow movements are achieved through chained `transition().duration().attr()` calls on SVG groups, while the mouth rotates 180 degrees using a similar transition. The code uses the `d3.select` API to access the SVG canvas and relies on version 5.9.2 of the library.

Nneffer77

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

88% match

Loading thumbnail…

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

This example uses D3.js to construct a simple, animated smiley face in an SVG canvas. It demonstrates fundamental DOM manipulation by appending and positioning geometric elements—a green circle for the head, two eye circles, rectangular eyebrows, and a mouth created with a path. The animation runs a continuous two-second cycle that moves the eyebrow group vertically, creating a subtle bobbing effect. The code relies on D3's `select`, `append`, and `transition` APIs to manage the structure and its temporal behavior.

Sskambhore04

88% match

Loading thumbnail…

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

This interactive D3.js example builds a stylized smiley face entirely from SVG shapes, including circular eyes, a path-based mouth, and rectangular teeth. An animated sequence moves the eyebrows up and down by chaining two `transition().duration(2000)` calls, demonstrating how to create simple motion via DOM attribute transforms. The code uses `d3.select` and `d3.arc` from the D3 v5 API to construct the face's components, with all geometry centered through a single transformed group. The result shows how D3's declarative SVG manipulation can produce playful, character-driven visualizations.

BBrian Gilmore

88% match