Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Mmatthewtang89@gmail.com
Last edited Jun 24, 2024
Created on Jun 24, 2024

A smiling face with yellow circular head, black-outlined eyes, and a curved mouth is rendered as SVG using D3 selections. The code builds the face by appending circles, rectangles, and an arc path to a centered group element. Eyebrows animate upward and back down via chained `transition.attr` calls over two-second intervals. The example uses `d3.select`, `d3.arc`, and SVG attribute manipulation to demonstrate fundamental DOM binding and transitions in D3 v5.

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 smiling face built with SVG renders a yellow circle, two eyes, and an arc-based mouth. D3.js v5 transitions animate the eyebrows, moving a group containing two rectangles upward and back down over a four-second loop. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to manipulate DOM elements directly, with static attributes for spacing and dimensions defined in JavaScript.

SSaip Can Hasbay
97% match
Loading thumbnail…

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

A smiling face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The code selects an SVG element, appends a yellow circle for the face, and adds eyes, eyebrows, and a mouth using D3’s `arc()` generator. Two transitions animate the eyebrow group’s vertical position over two seconds each, moving them up and down. The example relies on D3’s `select` and `transition` methods to build and animate the static SVG structure.

PPiotr Paszek
97% match
Loading thumbnail…

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

A smiling face is rendered as a yellow circle with two eyes, animated eyebrows, and an arched mouth, all drawn in SVG. The eyebrows move up and down repeatedly using chained D3 transitions. The code builds the face by appending SVG elements to a group, using D3 v5's `select`, `attr`, and `arc` for the mouth path, with an implicit data-join-free DOM construction.

Ssohum42
97% match
Loading thumbnail…

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

A smiling yellow face is drawn entirely in SVG, with its features initially arranged in a neutral expression before an animated sequence runs once on load. The eyes overlay white pupils, while the black eyebrows and mouth rotate into angled positions over two seconds. The example demonstrates core D3.js v5 DOM manipulation and transitions using `d3.select`, `append`, and `transition.attr`, constructing the mouth with the `d3.arc` path generator. All shapes are positioned via SVG transform attributes and transitions, with no external data source.

Aaidatabaeva
96% match
Loading thumbnail…

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

This example builds a smiling face from basic SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and chained transitions: the eyebrows animate upward and back down over four seconds via `transition.attr` calls on a `g` element. Rendered in a 960×500 SVG, the face is centered using a translated group, with dimensions for features like eye spacing and eyebrow width defined as variables. No external data is used; the visualization relies solely on hardcoded geometry and D3’s selection and arc APIs.

Ccraig harbottle
96% match
Loading thumbnail…

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

This example builds a smiling yellow face using D3.js v5, drawing the head, eyes, and mouth as SVG shapes positioned with a centered group transform. The code uses `d3.select`, `d3.arc` for the mouth path, and property setters like `attr` for circles and rectangles. A chained `transition` with a 2-second duration animates the eyebrows upward and back down, creating a repeated eyebrow-raising motion. The face is rendered entirely with SVG elements, with no external data source, and uses a fixed 960×500 viewport.

VVishakha Routra
96% match
Loading thumbnail…

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

A smiling face built with SVG shapes demonstrates fundamental DOM manipulation using D3.js v5. The code constructs a yellow circle head, two eyes, and a mouth arc using the `d3.select`, `d3.arc`, and `d3.transition` APIs. The eyebrows, drawn as rectangles, animate vertically via chained `transition().duration()` calls, moving up and then back down over 2.8 seconds. All elements are positioned relative to the SVG's center using `transform` attributes.

BBobViz
96% match
Loading thumbnail…

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

A smiling face built from SVG shapes demonstrates fundamental D3.js DOM manipulation and animation. The yellow head, eyes, and eyebrows are drawn with circles and rectangles, while the mouth uses an arc path generator. The code imports `select` and `arc` from D3, chains two 2000-millisecond `transition` calls to animate the eyebrow group vertically, and positions elements using SVG attribute manipulation. No external data is loaded; the visualization relies entirely on hardcoded values and D3’s selection and transition APIs.

JJoshua
96% match