Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
RRayed12
Last edited Apr 5, 2022
Created on Apr 5, 2022

This visualization uses D3.js to build a smiling face from basic SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth path generated with the `d3.arc` function. The eyebrows animate upward and back down over four seconds using chained `transition.attr` calls, demonstrating DOM manipulation and data binding in D3 v5. The face is centered on a 960×500 SVG canvas, with all shapes positioned relative to a central group.

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

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

This example shows a yellow smiley face with two eyes, eyebrows, and a curved mouth, all rendered as SVG elements. The face is centered and drawn using D3 v5’s `select`, `arc`, and geometric shape methods. A transition animates the eyebrows by shifting them upward on load before returning them to their original position. The design mirrors a classic smiley icon, with the mouth created from an arc path and the eyes and head as circles.

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

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

This example builds a smiling face from basic SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and chained transitions: the eyebrows animate upward and back down over four seconds via `transition.attr` calls on a `g` element. Rendered in a 960×500 SVG, the face is centered using a translated group, with dimensions for features like eye spacing and eyebrow width defined as variables. No external data is used; the visualization relies solely on hardcoded geometry and D3’s selection and arc APIs.

Ccraig harbottle
95% match
Loading thumbnail…

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

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa
95% match
Loading thumbnail…

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

A smiling face built with SVG shapes demonstrates fundamental DOM manipulation using D3.js v5. The code constructs a yellow circle head, two eyes, and a mouth arc using the `d3.select`, `d3.arc`, and `d3.transition` APIs. The eyebrows, drawn as rectangles, animate vertically via chained `transition().duration()` calls, moving up and then back down over 2.8 seconds. All elements are positioned relative to the SVG's center using `transform` attributes.

BBobViz
95% match