Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSomu1433
Last edited Feb 24, 2023
Created on Feb 24, 2023

This example demonstrates fundamental DOM manipulation with D3.js by constructing a cartoon smiley face from SVG elements, including a circle for the face, white eyes, colored eyebrows, a nose, mouth, ears, hair, and teeth. The code uses d3.select to append and style each shape with class-based CSS transformations. It relies on D3 v5 via a CDN link, rendering entirely in SVG without data binding, instead showcasing direct element creation and attribute assignment as a beginner-friendly exercise.

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from basic SVG shapes. The face consists of a blue circle, two eyes, rectangular eyebrows, and a curved mouth created using the `d3.arc` function. Animated eyebrow movements are achieved through chained `transition().duration().attr()` calls on SVG groups, while the mouth rotates 180 degrees using a similar transition. The code uses the `d3.select` API to access the SVG canvas and relies on version 5.9.2 of the library.

Nneffer77
93% match
Loading thumbnail…

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

This example demonstrates a simple smiley face constructed entirely through D3.js v5 DOM manipulation. It uses `d3.select` and `.append` to create SVG circles and paths that form the face’s shape, eyes, pupils, tears, eyebrows, and mouth, with fixed coordinates and attributes set via `.attr`. The page loads D3 from a CDN and renders the face in a 960×500 SVG canvas, with static styling from a linked CSS file.

Ssiddu7147
93% match
Loading thumbnail…

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

This example demonstrates DOM manipulation with D3.js by constructing a smiley face from SVG shapes, complete with a sky-blue head, eyes, nose, mouth, and ears. The most notable behavior is the animated movement of the eyebrows, which shift upward and then return to their original position over a two-second cycle. The code uses D3 v5 and the `select` and `append` functions to build the SVG structure, and it leverages chained `transition` calls to animate the eyebrows' transform attribute. The SVG canvas is 960 by 500 pixels, and the face is centered within it.

Nnsatyaprakash22
93% match
Loading thumbnail…

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

This example uses D3.js to construct a simple, animated smiley face entirely from SVG shapes. A circle forms the face, with smaller circles for eyes and cheeks, rectangles for eyebrows, nose, and mouth, all positioned relative to the center. The code demonstrates fundamental DOM manipulation with `d3.select` and `append`, while `setInterval` triggers D3 transitions that move the eyebrows and enlarge the cheeks in a looping animation.

Ssatishnarne99@gmail.com
93% match
Loading thumbnail…

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

A smiley face built with D3.js animates by raising and lowering its eyebrows. The code selects an SVG canvas and constructs the face from basic shapes, including circles for eyes and a path for the mouth using `d3.arc`. Eyebrow movement is achieved with chained `transition().duration()` calls that shift the rectangle positions over two seconds. The example uses D3 v5, imported via `d3.select` and `d3.arc`.

SSomu1433
93% match
Loading thumbnail…

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

Built with D3 v5, this example demonstrates fundamental DOM manipulation and animation by constructing a smiley face from SVG shapes. The code uses `d3.select` to append a circle, eyes, rectangular eyebrows, and an arc-based mouth. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down in a looping motion. All elements are centered within an SVG using a translated group, with dimensions pulled from the SVG attributes. The example highlights basic selections, attribute setting, and transition tweening without external data.

VVenu
93% match
Loading thumbnail…

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

This example uses D3.js to construct a simple, animated smiley face in an SVG canvas. It demonstrates fundamental DOM manipulation by appending and positioning geometric elements—a green circle for the head, two eye circles, rectangular eyebrows, and a mouth created with a path. The animation runs a continuous two-second cycle that moves the eyebrow group vertically, creating a subtle bobbing effect. The code relies on D3's `select`, `append`, and `transition` APIs to manage the structure and its temporal behavior.

Sskambhore04
93% match
Loading thumbnail…

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

This example demonstrates how to build a static smiley face using D3.js v3, combining basic SVG shapes to construct the head, eyes, ears, mustache, and mouth. It shows fundamental DOM manipulation by appending and styling SVG elements like circles, ellipses, lines, and polygons through D3’s selection methods. The code explicitly uses `d3.select`, `d3.append`, and `d3.arc` from the `d3` and `d3-shape` libraries, with the face centered in an SVG canvas via a translation transform. The rendering approach is purely SVG-based, with all geometry defined manually in the JavaScript source rather than loaded from external data.

Rranjithkmr598@gmail.com
93% match