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

100%

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

✓ Published1🌍 Public

Last edited Feb 12, 2025

Created on Feb 12, 2025

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

This example shows a smiley face drawn with SVG primitives in D3.js v5, featuring a randomly colored face, fixed eyes, and a curved mouth. It demonstrates fundamental DOM manipulation by appending circles and a path directly to an SVG container. A button triggers a color change, using `transition().duration(500).attr('fill', ...)` to animate the face’s fill to a new random HSL value generated by `getRandomColor()`. The code relies on D3’s selection and transition APIs without any external data source.

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!

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

91% match

Loading thumbnail…

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

An animated smiley face rendered in SVG demonstrates core DOM manipulation with D3.js v5. The face, built from circles, rectangles, and a path, features eyebrows that animate by chaining `transition().duration()` calls to shift their vertical position over time. The code constructs the facial features using D3’s `select` and `append` methods, with the mouth drawn via the `arc` function to generate a curved path. The example highlights basic D3 transitions and coordinate transformations within a fixed 960×500 SVG canvas.

Mmomopng

91% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation in D3.js by constructing a static smiley face and animating its facial features. The face is composed of SVG shapes, including circles for the head and eyes, arc-based paths for eyebrows and mouth, rectangles for the nose and teeth, all colored with pink, black, red, and white fills. The animation uses D3’s `.transition()` method to move the eyebrows vertically over two-second intervals, while the code employs `d3.select`, `d3.arc`, and SVG attribute setters to position every element relative to the canvas center.

SSharmaAshwini

91% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face from SVG shapes, including a red circle head, two eyes, and a mouth drawn with the `d3.arc` helper. The eyebrows, rendered as rectangles, animate upward and back down using D3’s `transition` method with a duration of 1000 and 2000 milliseconds. The code structures the scene by appending elements to a central `<g>` group, using constants for spacing and offsets to position facial features symmetrically. Built with d3.v5, it renders in an SVG container and relies on simple attribute chaining for styling and movement.

Ssmchaaritha@gmail.com

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

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

91% match

Loading thumbnail…

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

This example shows a stylized smiley face built with D3.js v5, rendered as SVG with animated eyebrows that move up and down repeatedly. It demonstrates fundamental DOM manipulation by selecting an SVG element and appending groups, circles, rectangles, and a path for the mouth. The code uses D3’s `select` and `arc` APIs, along with chained `transition().duration()` calls to animate the eyebrow positions. The face is centered with a magenta circle background, and the animation loops via transition chaining without external data, relying purely on hardcoded geometric constants.

TTarun Kumar Bosupally

91% match

Loading thumbnail…

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

A smiling face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The face, composed of circles, ellipses, and a path-based mouth, is assembled through chained `append` calls and coordinate transformations. The most prominent behavior is the animated eyebrows, which move up and down using a `transition().duration(2000)` sequence. This example showcases D3’s core API for selecting elements, applying transforms, and creating simple timeline-based animations without any external datasets.

Ssaiyogesh9911@gmail.com

91% match