Skip to main content
SimilarExport ZIP
100%

Fork of Visualization

✓ Published0🌍 Public
Ggunasindhuja
Last edited Feb 25, 2023
Created on Feb 25, 2023

A smiley face drawn with SVG elements animates its eyebrows in a continuous up-and-down motion. Built with D3.js v5, the code constructs the face using circles for the eyes, rectangles for the eyebrows, and a path created with the `d3.arc` function for the mouth. The animation relies on D3's `.transition().duration(2000)` method, sequentially shifting the eyebrow group's transform attribute to create the repetitive movement. The SVG canvas is 960 by 500 pixels, with the face centered via a transform.

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 visualization presents a smiling face constructed from SVG shapes: a circular head, two eyes, animated eyebrows, and a curved mouth. The eyebrows move up and down repeatedly in a continuous cycle, demonstrating basic DOM manipulation through D3.js’s selection and transition APIs. The code relies on D3 v5, using `select`, `append`, and `transition` to animate rectangle eyebrow elements, while a static path built with `arc()` forms the smile. The example runs as a self-contained HTML page with an embedded SVG canvas.

AAISWARYAMARAPATLA1999
92% match
Loading thumbnail…

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

A smiling face built from SVG shapes animates its eyebrows in a loop. The visualization uses D3.js (v5) to construct and manipulate the face: circles form the head, eyes, and mouth, while rectangles form the eyebrows. The code joins transitions on the eyebrow group to create a repeating up-and-down motion. The rendering is pure SVG, with no external data source, focusing on fundamental DOM manipulation with D3's selection and transition APIs.

AAISWARYAMARAPATLA1999
92% match
Loading thumbnail…

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

This visualization demonstrates how to build a simple smiley face using D3.js v5, with animated eyebrows that move up and down. The code uses d3-selection to append SVG elements including circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. A chained transition with a two-second duration moves the eyebrows upward, then returns them to their original position, creating a blinking expression. The face is centered on a 960×500 SVG canvas using a group transform, with all shapes drawn using fundamental SVG attributes.

Ppangaotata
92% match
Loading thumbnail…

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

This smiley face, built with D3.js v5, animates by moving its eyebrows up and down. The SVG face is composed of circles, rectangles, ellipses, and an arc path. The code uses D3's `select`, `append`, and attribute setters to construct the face, and a chained `transition()` with a 2000-millisecond duration to animate the eyebrow group's transform. The visualization demonstrates fundamental DOM manipulation through D3's selection and modification of SVG elements.

Aavvarijayakrishna99@gmail.com
91% match
Loading thumbnail…

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

A smiley face drawn with SVG elements animates its eyebrows upward and downward in a repeating two-second cycle. The code builds the face by appending circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth using D3.js v5. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on a group element, which alternately shifts its `transform` attribute. The example demonstrates fundamental DOM manipulation and selection with `d3.select` and `d3.append`.

PPriya Tiwari
91% match
Loading thumbnail…

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

This visualization demonstrates a smiley face with animated eyebrows, moving up and down in a repeating two-second cycle. The face is built using fundamental D3.js DOM manipulation, appending SVG shapes like circles, rectangles, and a path-based mouth. The eyebrows move via chained `transition()` and `duration()` calls, which shift their vertical position. The code specifically utilizes D3 v5’s `select`, `arc`, and transition methods to create the static face and its simple dynamic expression.

IIsigned
91% match
Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a repeating up-and-down motion, created by transitioning the group element that contains both eyebrow rectangles. The face is built entirely with SVG shapes, including circles for the eyes and an arc for the mouth, using D3 selections and the `d3.arc` function. The animation runs via chained `transition().duration(2000)` calls, which move the eyebrows up and then back to their original position.

VVaishnavi6199
91% match
Loading thumbnail…

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

A smiley face rendered with SVG animates its eyebrows upward and downward in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG element, appending groups, circles, rectangles, and a path for the mouth using `d3.select` and `d3.arc()`. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group’s `transform` attribute. The code uses D3 v6, with dimensions defined by the SVG’s width and height attributes.

Kkosakase
91% match