Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
AAbdouEnsaj
Last edited Jul 26, 2022
Created on Jul 26, 2022

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.

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 rendering a yellow smiley face with eyes, eyebrows, and a mouth as SVG shapes. The code uses `d3.select` to access the SVG element and `d3.arc` to define the mouth's path. Eyebrows and the right eyebrow animate upward using chained `transition().duration(2000)` calls, moving via `attr('transform', ...)`. The face is centered using a `translate` transform, with static parameters like `eyeSpacing`, `eyeRadius`, and `eyebrowHeight` controlling the layout. All shapes are drawn directly without external data sources.

AAbdoulaye DIOP
96% match
Loading thumbnail…

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

This fork of the “Let's make a face with D3.js!” tutorial demonstrates fundamental DOM manipulation by rendering a static yellow smiley face with eyes, eyebrows, and a curved mouth in an SVG canvas. The code uses D3 v5 selections, `append` and `attr`, along with the `arc` generator to shape the mouth path. All facial elements are positioned using translated coordinates and fixed numeric offsets. The example serves as a clear introduction to building SVG graphics programmatically with D3's declarative approach.

AAbdouEnsaj
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 Let's make a face with D3.js!

This example uses D3.js to construct a smiley face entirely from SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth drawn with an arc path. The code demonstrates fundamental DOM manipulation by selecting an SVG element, appending groups and shapes, and applying transforms. The eyebrows animate by chaining two `transition().duration(2000)` calls that shift their vertical position up and then back down, cycling through a curious expression. All shape attributes, such as radii and spacing, are defined as constants, and the face is centered using a translation based on the SVG's height and width.

AAbdulazizfh
96% match
Loading thumbnail…

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

A static smiley face rendered as SVG via D3.js uses a yellow circle for the head, two circles for eyes, rectangular eyebrows, and an arc-based path for the mouth. The drawing is centered using group transformations and absolute pixel coordinates from the viewport. The code directly manipulates the DOM with `select`, `append`, and `attr` calls from D3 v5, while the mouth’s shape is generated with the `arc` generator. No interactivity or animation is present, despite the title’s mention of moving eyebrows.

AAbdouEnsaj
96% match
Loading thumbnail…

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

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.

YYashwanth0311
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 smiley face from SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth. The eyebrows animate by moving upward and then returning to their original position using chained `transition().duration(2000)` calls on a group element. The code uses D3 v5’s `select`, `append`, `attr`, and `transition` methods, along with the `arc` generator for the mouth path. All rendering occurs in an SVG canvas, with dimensions set to 960 by 500 pixels.

Cczhang746
95% 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 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
95% match