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 Aug 24, 2021

Created on Aug 24, 2021

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

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

SShengHao-Shi

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

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

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

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

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

94% match

Loading thumbnail…

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

This example shows a static smiley face built entirely with SVG primitives, including a yellow head, eyes, eyebrows, ears, nose, mouth, beard, and mustache. The code constructs the face using D3.js `select` and `append` methods to create and position circles, rectangles, paths, and lines. It uses `d3.arc` to generate the curved shapes for the nose, mouth, and beard. The face is centered within the canvas using a `transform` attribute, demonstrating fundamental DOM manipulation in D3.

Ggeethanjalikotaru

94% match

Loading thumbnail…

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

This example demonstrates how to construct a simple smiley face using D3.js, starting with a yellow circle for the head and two smaller black circles for the eyes. A quadratic Bézier path, defined using the `d` attribute with values like `M70,120 Q100,145 130,120`, draws the mouth. The code relies on D3’s `select` and `append` methods to manipulate the SVG elements directly, setting attributes for position, radius, fill, and stroke. It shows fundamental DOM manipulation with D3’s v5 API, using a blank SVG canvas with 960 by 500 pixels as the rendering surface.

Nnpk2001

94% match