Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Nnagasai-gummadi
Last edited Feb 23, 2023
Created on Feb 23, 2023

A smiley face built with D3.js animates its eyebrows in a looping upward-and-downward motion. The face is composed of SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The code uses D3 selections and the `arc` generator from `d3-shape`, along with chained `transition` calls to move the eyebrow group over repeated two-second intervals.

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 drawn with D3.js animates its eyebrows in a continuous up-and-down motion, using a yellow circle for the face, two circles for eyes, and an arc for the mouth. The code selects the SVG element, appends groups and shapes with `select` and `append`, and drives the eyebrow movement with chained `transition` calls that alternate between two vertical positions over two-second durations. The face is centered via a transform, and all dimensions are computed from the SVG's width and height attributes.

MManideepChakilam
96% match
Loading thumbnail…

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

A smiley face built with D3.js animates its eyebrows upward and downward in a looping transition. The code uses `d3.select`, `d3.append`, and `d3.arc` to construct SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth—within a centered group. The eyebrows move via chained `transition` and `.attr` calls over a two-second duration, demonstrating fundamental DOM manipulation in D3 v5.

EErikaLozada
96% match
Loading thumbnail…

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

A smiley face built with D3.js animates its eyebrows up and down in a looping transition. The SVG face consists of circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` function for the mouth. Code uses D3 selections, `transition().duration()`, and attribute manipulation to shift the eyebrow group’s vertical position. The yellow head and black outlines are rendered directly via SVG attributes, with no external data source.

KKCharoenkwan
96% match
Loading thumbnail…

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

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating up and down repeatedly. The face is drawn using D3.js v5, building circles, rectangles, and a mouth path through basic DOM selection and appending. Eyebrow movement is achieved with chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports `select` and `arc` from D3, computes layout from the SVG’s dimensions, and uses inline attribute settings for styling and positioning.

117761A04F1
96% match
Loading thumbnail…

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

A D3.js smiley face animates its eyebrows in a looping vertical motion, shifting up and down every two seconds. The face is drawn entirely with SVG primitives: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path created with the `arc` generator for the mouth. The code uses `d3.select` to manipulate the SVG canvas, handles mouse events implicitly through transitions, and relies on D3 v5's `transition().duration()` method to animate the eyebrow group's transform attribute. The layout is centered via a translation transform based on the viewport dimensions.

BBKirst3
96% match
Loading thumbnail…

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

This example shows a yellow smiley face built from basic D3.js shapes, with animated eyebrows that move upward and then return to their original position. The face is constructed using SVG circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The code uses D3 v5 selections, attribute manipulation, and chained `transition` calls with explicit durations to drive the eyebrow animation on a fixed 960×500 canvas.

Nnamesh singh
96% match
Loading thumbnail…

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

This example shows a D3.js smiley face with animated eyebrows that move up and down in a looping transition. Built with SVG, the face consists of a yellow circle, two eye circles, two rectangular eyebrows, and an arc-based mouth. Using D3 v5’s `select` and `arc` APIs, the code appends shape elements to an SVG canvas and animates the eyebrow group with chained `transition().duration()` calls, toggling its vertical offset every two seconds.

EEbenizerR
96% match
Loading thumbnail…

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

This example demonstrates a smiley face drawn with D3.js, featuring animated eyebrows that move up and down in a looping transition. The face is constructed using SVG primitives, with a yellow circle for the head, two eye circles, and a mouth path generated with the `arc` function. The code imports `select` and `arc` from D3 v5, explicitly setting dimensions from the SVG attributes and centering a group element. The eyebrows are rectangular shapes within a nested group, animated via chained `transition` calls that adjust their vertical position over two-second intervals.

HHarshavardhan
95% match