Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Kkatebacon32
Last edited May 14, 2021
Created on May 14, 2021

This example uses D3.js to draw a simple, animated smiley face in an SVG canvas. The code constructs the face from basic shapes—a yellow circle for the head, two circles for the eyes, rectangles for the eyebrows, and a path for the mouth—using `select` and `append` for DOM manipulation. The animation runs continuously, moving the eyebrows up and down via chained `transition().duration()` calls that alter the group’s `transform` attribute over two-second intervals. The data is entirely hardcoded, with no external dataset.

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 demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with an animated expression. It shows a static face whose eyebrows smoothly move up and down over two-second intervals, using SVG shapes composed of circles, rectangles, and a path-based mouth. The code leverages D3 v5’s `select` and `append` methods for element creation, `arc()` for the mouth’s geometry, and chained `transition().duration()` calls to animate the eyebrow group’s transform attribute. The animation runs automatically, cycling the eyebrows between raised and neutral positions.

Kkatebacon32
97% match
Loading thumbnail…

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

This example displays a yellow smiley face with eyes, eyebrows, and a mouth drawn as SVG shapes. The code uses D3.js to select the SVG element, append groups for facial features, and apply geometric attributes like radius and positioning. An animated sequence moves the eyebrows up and down by chaining two d3 `transition` calls, each with a 2000-millisecond duration. The mouth is created with D3's `arc` function, defining inner and outer radii and angle parameters.

Kkatebacon32
96% match
Loading thumbnail…

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

This example renders a yellow smiley face with animated eyebrows using D3.js. It builds the face with SVG primitives—circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth—centered via a translated group. The code applies chained `transition().duration(2000)` calls to move the eyebrows up and down repeatedly. It uses `select` to access the SVG element and `arc` from the `d3` module to generate the mouth’s path, with dimensions and positions hardcoded. The animation runs on a 960×500 canvas.

Ppaul4952233@gmail.com
95% 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
94% match
Loading thumbnail…

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

This example creates a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth centered within an SVG canvas. D3.js selections append SVG shapes and apply a two-second `transition` that moves the eyebrow group upward by 50 pixels and then back down, producing a repetitive animation. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition.attr` calls to alter the `transform` attribute, demonstrating fundamental DOM manipulation with version 5 of the library.

Ccharliemok
94% match
Loading thumbnail…

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

This example uses D3.js v5 to build a simple animated smiley face from basic SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and downward through chained `transition` calls, each lasting 2 seconds. It demonstrates fundamental DOM manipulation with `select` and `append`, and uses SVG attributes like `cx`, `r`, and `transform` to position elements relative to a centered group.

Rradhadevarapu
94% match
Loading thumbnail…

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

A smiley face drawn in SVG animates its rectangular eyebrows upward and downward in a repeating two-second cycle using chained `selection.transition()` calls. The face consists of a yellow circle, two black eye circles, and a mouth path created with the `d3.arc` shape generator. D3 v5 selects the SVG element, sets up a centered group, and applies transforms for facial features. The code demonstrates fundamental DOM manipulation and data-driven styling in D3 without external datasets.

Mmk03985
94% match
Loading thumbnail…

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

A D3.js smiley face animates its eyebrows in a looping vertical motion, shifting up and down every two seconds. The face is drawn entirely with SVG primitives: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path created with the `arc` generator for the mouth. The code uses `d3.select` to manipulate the SVG canvas, handles mouse events implicitly through transitions, and relies on D3 v5's `transition().duration()` method to animate the eyebrow group's transform attribute. The layout is centered via a translation transform based on the viewport dimensions.

BBKirst3
94% match