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

100%

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

✓ Published0🌍 Public

Last edited Feb 23, 2023

Created on Feb 23, 2023

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

A smiling face, drawn with green and orange SVG shapes, demonstrates D3.js v5's DOM manipulation and animation capabilities. The face's eyebrows repeatedly shift upward and back down using chained `transition().duration()` calls, while the mouth is rendered using the `arc()` geometry function. The code builds the illustration by selecting an SVG element, appending grouped circles and rectangles, and positioning them relative to the viewport center.

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

A D3.js smiley face, built from SVG primitives, demonstrates fundamental DOM manipulation and transitions. A green circle forms the head, with two dark circles for eyes and an orange arc for the mouth, all positioned using geometric constants. The animation shows both rectangular eyebrows moving up and down together via chained `transition().duration()` calls that modify their container's `transform` attribute. The code uses D3 v5 selections and the `arc` generator to construct the mouth path, with all elements grouped and translated to the SVG center for easy positioning.

NNavaneeth-Ragi

96% match

Loading thumbnail…

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

A smiling face built with D3.js demonstrates fundamental DOM manipulation through SVG elements, including a circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate upward and back down using chained `transition` and `.duration()` calls, creating a subtle waggle effect. The example imports `select` and `arc` from D3 v5, reads the SVG's width and height attributes, and positions everything via a centered `g` group. All geometry, including eye spacing, eyebrow offsets, and the mouth's inner/outer radii and angles, is hardcoded.

NNavaneeth-Ragi

95% match

Loading thumbnail…

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

A D3.js animation builds a simple face from SVG primitives, with two green and orange concentric circles for the head, two circles for the eyes, and two rectangles as eyebrows. The eyebrows bounce vertically over four seconds via chained `transition().attr()` calls, while a path created with the `arc` generator forms a static mouth. The example demonstrates fundamental DOM manipulation through `select` and `append`, using D3 v5 to target an SVG element defined in the HTML.

NNavaneeth-Ragi

95% match

Loading thumbnail…

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

A smiling face is drawn on an SVG canvas using D3.js v5, with a fixed orange head and two circular eyes. The left eyebrow is notably absent, while the right eyebrow animates vertically through a chained `transition().duration(2000)` sequence, moving up and then back down. A mouth is rendered using the `d3.arc()` shape generator to create two curved paths. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending groups, circles, rectangles, and paths with absolute positioning.

SSANEEM MOHAMMAD

95% match

Loading thumbnail…

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

A smiling face is drawn with SVG shapes, with a yellow circle for the head, two eyes, and a mouth formed using the d3.arc path generator. The animated eyebrows, rendered as rectangles, repeatedly transition upward and back down over two-second intervals using D3's transition method. The example demonstrates fundamental DOM selection and manipulation through d3.select, attribute setting, and chained transitions, operating entirely within a 960×500 SVG canvas.

Ddheeraj1509

94% match

Loading thumbnail…

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

A playful SVG face built with D3.js v5 shows a green circle with movable eyebrows, red ears, white teeth, and a frowning mouth. The code demonstrates fundamental DOM manipulation using `d3.select` and `d3.append` to construct shapes, while `transition()` animates the eyebrows upward and back down over four seconds. An `arc()` generator creates the mouth path, and rectangular teeth are bound to data via `selectAll().data().enter()`.

Bbhanuprasadk19

94% match

Loading thumbnail…

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

This visualization demonstrates basic D3.js DOM manipulation by rendering a smiling face with animated eyebrows that move up and down. The face includes a skyblue circular head, eyes, nose, and an arc-based mouth, all drawn as SVG elements. The code uses D3 v5 selections, `transition()` with a 2000-millisecond duration to animate the eyebrow group, and the `arc()` generator to create the mouth path.

Nnsatyaprakash22

94% match

Loading thumbnail…

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

This example demonstrates basic D3.js DOM manipulation by constructing a yellow smiley face with green eyes, red arc mouth, and grey eyebrows that animate upward and back down in a looping transition. The code builds SVG shapes—circles, rectangles, and a path using the `d3.arc` helper—inside a centered group, then applies chained `transition().duration(2000)` calls to move the eyebrow group along the y-axis. The face is rendered in an SVG canvas with dimensions set from the HTML attributes, and all styling is applied directly via D3 attribute methods.

55577Satvik

94% match