Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
YYashwanth0311
Last edited Feb 27, 2024
Created on Feb 27, 2024

This example creates a smiley face with movable eyebrows using D3.js, demonstrating fundamental DOM manipulation with SVG. The face is drawn with a yellow circle for the head, black eyes, and a mouth shaped as an arc via the `arc` generator. The code uses D3 selections and attribute setters to position elements relative to the center of the SVG canvas, with dimensions defined in the HTML. The visualization shows a static face without interaction, as the code only sets initial positions and styles, relying on D3 v5’s `select` and `arc` APIs to construct the SVG 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!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows, rendered as rectangles, animate upward and then back down through chained `transition().duration()` calls. The code imports `select` and `arc` from D3 v5, uses SVG elements for rendering, and relies on data-driven attributes to position features relative to the viewport dimensions.

RRadhika Ganapathy
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 with animated eyebrows. The face is drawn using SVG shapes—circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc()` for the mouth—all positioned within a group centered on an SVG canvas. The eyebrows move via chained `transition()` calls with specified durations, shifting their vertical position to create a raising effect. The code imports `select` and `arc` directly from the d3 module and uses attribute chaining to build the visualization.

SSravaniPosina
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 building a smiley face from SVG primitives—a yellow circle, two eyes, animated eyebrows, and an arc-shaped mouth. The eyebrows transition upward and downward over two two-second intervals using D3’s `transition()` and `attr()` methods. The code imports `select` and `arc` from D3, sets explicit constants for eye spacing and eyebrow dimensions, and renders everything on an SVG canvas with a centered group transform.

Mmanjushayarreddu
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 constructing a yellow smiley face from SVG shapes, including two eyes, movable eyebrows, and an arc-based mouth. The face is centered within an 960×500 SVG canvas, with all elements grouped and positioned using D3’s `select`, `append`, and `attr` methods. The code uses D3’s `arc` generator to draw the mouth and manually sets coordinates for circles and rectangles to form the eyes and eyebrows. Static SVG rendering emphasizes programmatic shape creation rather than data binding or interaction.

AAbdouEnsaj
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 DOM manipulation with D3.js by constructing a yellow smiley face with animated eyebrows. The face is built using SVG shapes, including circles for the eyes and a path generated with the `d3.arc` function for the mouth. Eyebrows are rendered as rectangles and animated using chained `transition` calls with `duration` to move them up and back down. The code imports `select` and `arc` from the D3 v5 library, and positions elements relative to the SVG’s center using attribute setters and transform strings.

CColten Appleby
96% match
Loading thumbnail…

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

A smiley face built with SVG and animated with D3.js demonstrates fundamental DOM manipulation. Yellow circular head, two eyes, rectangular eyebrows, and a curved mouth are created using D3 selections and the `d3.arc` path generator. The eyebrows repeatedly move up and down via chained `transition` calls, each lasting two seconds. The code uses D3 v5, imports `select` and `arc` from the library, and renders entirely in SVG without external data.

Vvram80
95% match
Loading thumbnail…

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

This example shows a yellow smiley face drawn as SVG, with black eyes and an arc-shaped mouth, while the eyebrows are not yet implemented. The code uses D3.js v5 selections to append and position the face elements, including `circle` for the head and eyes and a `path` generated with the `d3.arc` shape generator. The SVG canvas is 960 by 500 pixels, and the layout centers the face using fixed pixel offsets for the eyes and mouth. The example demonstrates fundamental DOM manipulation through D3’s declarative chaining of `.attr()` calls.

GGuilherme Caeiro
95% match