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

100%

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

✓ Published0🌍 Public

Last edited Dec 7, 2021

Created on Dec 7, 2021

Forked from Let's make a face with D3.js!

This example shows a simple smiley face drawn on an SVG canvas, with yellow circular head and black outline. The code demonstrates fundamental DOM manipulation with D3.js by appending a circle element to an existing SVG. Using d3.select and append, the example sets the circle’s radius, center coordinates, fill, and stroke attributes. The face is static; the title mentions moving eyebrows, but the JavaScript only renders the circle, leaving facial features absent. The implementation relies on D3 v5 and SVG rendering, with no data binding or animation.

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 the basics of DOM manipulation with D3.js by building a static smiley face in an SVG canvas. The face consists of a yellow circle with a black stroke, positioned using the `cx` and `cy` attributes on a 960-by-500-pixel SVG element created in the HTML. The JavaScript code uses D3’s selection API (`d3.select`) to target the SVG and chain `.append()` and `.attr()` methods to construct the shape. The rendering relies on vector graphics, with styling defined in an external stylesheet.

Cchenghengchao

96% match

Loading thumbnail…

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

A smiley face rendered with SVG circles in D3.js demonstrates basic DOM manipulation by drawing a yellow head with two black eyes. The example uses D3 v5 to select SVG elements and bind data, with the page structure defined in HTML and styled through CSS. Although the code includes the potential for moving eyebrows, the current implementation only presents a static face with fixed eye positions. The visualization serves as a simple introduction to D3.js for creating and controlling graphical elements within an SVG canvas.

NNeenu514

96% 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

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

95% match

Loading thumbnail…

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

A smiley face drawn with SVG elements demonstrates fundamental DOM manipulation and animation with D3.js v5. The face features a yellow circle, two eyes, and a mouth created using the `arc` generator, while the eyebrows animate upward and downward via chained `transition` calls. The code uses `select` and `append` to build the SVG structure, and CSS hover and active states change the face's fill color. The example focuses on showing how D3 can construct and transform visual elements through data-independent selection methods.

XXenos Panagiotis

94% match

Loading thumbnail…

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

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa

94% 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

94% 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, including a yellow circle head, eyes, a line nose, and an arc mouth. The code animates the eyebrows using chained `transition().duration()` calls, moving them upward and back down over two seconds. It uses D3 v5’s `select` to target the SVG element and `arc` to generate the mouth path, with all elements appended to a centered group. The rendering relies entirely on SVG and animation, with no external data source.

Mmivan000

94% match