Skip to main content
SimilarExport ZIP
100%

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

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

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.

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

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
96% 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 yellow smiley face whose eyebrows animate upward and downward in a continuous loop. The SVG face is constructed using D3’s `select` and `append` methods to create circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows’ motion is achieved through chained `transition().duration(2000)` calls, which toggle the `transform` attribute between two vertical offsets. The code relies on D3 v5 and uses raw SVG attributes for positioning and styling.

Jjlspangl
96% match
Loading thumbnail…

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

This example shows a yellow smiley face built with D3.js, featuring animated eyebrows and a static mouth. The face is constructed using SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows move up and down via chained `transition().duration()` calls, demonstrating fundamental DOM selection and manipulation with d3.select and d3.append. The code imports specific functions like `select` and `arc` from the D3 v5 module, and positions all elements within a centered SVG group.

YYUTONG FENG
96% match
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 animated eyebrows. The code uses D3 v5 selections to append SVG circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered via a transformed group. The eyebrows transition vertically over two 2-second intervals using chained `transition().duration()` calls, moving up and then back down. The visualization showcases how D3 can create and animate geometric shapes through declarative SVG attribute setting.

AApril Fangzhu Guo
96% 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 yellow smiley face whose eyebrows move up and down in a looping animation. The visualization uses SVG elements—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—centered within a 960×500 viewport. The code leverages D3 v5 selections, the `arc` generator for the mouth shape, and chained `transition().duration(2000)` calls to animate the eyebrow group’s vertical position. The face is static except for the eyebrows, showcasing how D3 binds data to visual properties.

Jjunior-armando
96% 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 rendering a yellow smiley face in SVG. The face includes two eyes, a mouth drawn using the `d3.arc` path generator, and rectangular eyebrows that animate vertically via chained `transition` calls with a 2-second duration each. The animation toggles the eyebrows up and down repeatedly, showing how D3’s selection methods and attribute updates, such as `attr` and `transition`, modify SVG elements over time. The code uses D3 v5 and imports `select` and `arc` from the library.

KKonstantinos Kotsiaridis
96% match