Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
VVenkata Rajashekar Reddy Chinthala
Last edited Feb 20, 2022
Created on Feb 20, 2022

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The face's eyes are simple circles, while the eyebrows are rectangles that animate vertically in a looping sequence via chained `transition` calls with a 2000-millisecond duration. The mouth is drawn using `d3.arc` with specified inner and outer radii and angular bounds. The entire figure is centered through a group translation, and the code directly selects and appends SVG elements using `select` and `append`.

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!

A smiley face rendered in SVG with D3 v5 demonstrates fundamental DOM manipulation. The face consists of a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth created using `d3.arc()`. The eyebrows animate upward and back downward over four seconds via chained `transition().duration()` calls, shifting the eyebrow group's `translate` transform. The code uses `d3.select` to append elements, reads the SVG dimensions for centering, and positions features with explicit x/y offsets and eye spacing constants.

Kkaruppuraja
96% match
Loading thumbnail…

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

A yellow smiley face is drawn in an SVG canvas, featuring two eyes and a mouth created with D3.js's `select` and `arc` functions. The face centers on a group, with circles for the eyes and a path for the smiling mouth. Eyebrows, rendered as rectangles, animate vertically over two seconds using chained `transition` calls, moving up and then back down. The SVG dimensions are read from the element, and all shapes are styled with fills and strokes.

Ggunasindhuja
96% match
Loading thumbnail…

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

A yellow smiley face is drawn in SVG with D3.js, featuring two eyes, a mouth, and rectangular eyebrows. The face is centered using a `<g>` transform, with circles and a path generated by the `d3.arc()` function composing the features. Animated eyebrows move up and down repeatedly via chained `transition()` calls that adjust their `attr('transform')` over two-second durations. The code demonstrates fundamental DOM manipulation and transitions using D3 v5 selections, specifically `select`, `append`, `attr`, and `transition`.

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

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

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

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

A yellow smiley face is rendered in SVG using D3.js, with circular eyes and an arc-based mouth. A group containing rectangular eyebrows animates vertically via chained `transition()` calls, moving up and then back down over two two-second intervals. The code uses D3 selections and the `arc` generator from `d3-shape`, with dimensions driven by the SVG's width and height attributes. This example demonstrates fundamental DOM manipulation and animation with D3 v5.

Ssrinivasaraosankula
96% match
Loading thumbnail…

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

This example shows a yellow smiley face with eyes, eyebrows, and a mouth, built using D3.js v5. The face elements are drawn as SVG shapes, with the mouth created using the `arc` function. The eyebrows, rendered as rectangles, animate vertically through chained `transition` calls, moving up and then returning to their original position over two seconds. The code uses D3 selections and attribute manipulation to construct and transform the visual components.

Ssabaliaqat786
96% match