Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
ZzKhaled305
Last edited May 15, 2022
Created on May 15, 2022

A yellow smiley face rendered with SVG in D3.js demonstrates fundamental DOM manipulation. The face is centered within a 960x500 viewport, with its eyes, eyebrows, and a mouth built from circles, rectangles, and an arc path. The code uses the `d3.select`, `append`, `attr`, and `transition` methods to construct the shapes and animate the eyebrows, which move upward and return over four seconds. This fork of a tutorial example shows basic data-visualization primitives without external data, focusing on creating and transforming SVG elements dynamically.

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!

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
96% match
Loading thumbnail…

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

A yellow smiley face is drawn in an SVG canvas, with animated eyebrows that move up and down repeatedly. The example demonstrates fundamental DOM manipulation with D3.js, using a simple data-free composition of SVG shapes: circles for the face and eyes, rectangles for eyebrows, and a path created with the `d3.arc` generator for the mouth. D3's `transition` method triggers the eyebrow animation, while the `select` and `append` APIs build the hierarchical SVG structure centered on the canvas.

AAsimali39
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
96% match
Loading thumbnail…

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

A yellow smiley face drawn with SVG shows off basic D3.js DOM manipulation: the code appends circles for eyes and a mouth, uses a path with `d3.arc` for the smile, and animates the eyebrows with repeated `transition.attr` calls that shift their vertical position over two seconds. The face is centered by translating a grouping element, with fixed numeric constants for eye spacing, radius, and eyebrow sizing. The animation loops once, lifting the eyebrows upward then returning them, demonstrating chained transitions on the same selection.

DDimas Sudjito
95% match
Loading thumbnail…

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

A yellow smiley face built with SVG and animated with D3 v5 demonstrates fundamental DOM manipulation. The code uses `d3.select`, `append`, and `attr` to construct circles for the face and eyes, rectangles for the eyebrows, and a `d3.arc` path for the mouth. A chained `transition().duration(2000)` moves the eyebrow group up and down in a looping motion, while the iris and additional features remain static. The example relies on SVG attributes and D3’s enter/update/exit-free imperative style, with no external data source.

SSANEEM MOHAMMAD
95% match
Loading thumbnail…

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

A yellow smiley face drawn with SVG shows a subtle animation as its eyebrows rise and fall in a repeating two-second loop. Built entirely with D3.js v5, the example uses `d3.select` and `d3.append` to construct circles, rectangles, and a mouth path via `d3.arc`, while chained `transition().duration()` calls drive the eyebrow movement. The code reads the SVG's width and height attributes to center the face within a 960×500 canvas, demonstrating fundamental DOM manipulation and data-driven styling without external data.

RRayed12
95% match
Loading thumbnail…

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

A yellow smiley face drawn with SVG shows a subtle animation as its eyebrows rise and fall in a repeating two-second loop. Built entirely with D3.js v5, the example uses `d3.select` and `d3.append` to construct circles, rectangles, and a mouth path via `d3.arc`, while chained `transition().duration()` calls drive the eyebrow movement. The code reads the SVG's width and height attributes to center the face within a 960×500 canvas, demonstrating fundamental DOM manipulation and data-driven styling without external data.

RRayed12
95% match
Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas using D3.js, with its eyebrows animating up and down in a repeating two-second transition. The code builds the face with D3’s `select`, `arc`, and `transition` APIs, using SVG circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows shift vertically via chained `transition().duration()` calls, while the face itself remains static. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

Ssnehareddygurram
95% match