Fork of Viz

100%

✓ Published0🌍 Public

Last edited Feb 25, 2023

Created on Feb 25, 2023

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

A cartoon face rendered with D3.js v5 in SVG animates its eyebrows with chained transitions. The code builds a yellow circular head, two eyes, and a mouth shaped by an arc generator with defined inner and outer radii. Eyebrow rectangles transition vertically up and down over two seconds each, using `selection.transition()` to create a looping bounce. The visualization runs in a React framework on a fixed 960×500 canvas, demonstrating basic SVG shape construction and timed attribute interpolation without external data.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Viz

A fork of an existing D3.js visualization renders an animated smiley face using SVG primitives, with a yellow head, purple fill, and white eyes. The code uses fundamental DOM manipulation methods like `select`, `append`, and `attr` from D3 v5 to build the face, while `transition().duration()` animates the eyebrows moving up and down over two seconds. The face is constructed from circles, rectangles, and arc paths, drawn on a 960×500 SVG canvas. This example demonstrates basic D3.js shape creation and animation without any external data source.

Ggunasindhuja

90% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple animated SVG face built with D3.js v5 and the VizHub framework. The code uses `d3.select`, `d3.arc`, and SVG shape elements like `circle`, `rect`, and `path` to construct a yellow face with red eyes, eyebrows, and a mouth. The `transition().duration(2000)` chain animates the right eyebrow's vertical position over two seconds. The visualization renders entirely in SVG, using a local ES6 module for a message and loading D3 from UNPKG.

YYanxxx447

88% match

Loading thumbnail…

Fork of Lets make a face with D3 js!

This example animates a simple cartoon face made of SVG shapes, including a yellow circle head, eyes, eyebrows, and a mouth drawn with an arc. The eyebrows move up and down repeatedly using chained D3 transitions that modify their transform attribute over two-second intervals. The visualization uses D3 v6 selection methods like `select` and `append`, along with the `arc` generator for the mouth path, all rendered inside a React project on a 960×500 SVG canvas.

KK V VINITHA

87% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple, animated emoticon drawn with SVG shapes, including a yellow circle, eyes, and eyebrows. It shows how to use D3.js version 5 to select and append SVG elements, set their attributes, and apply basic transitions. The code uses `select`, `append`, `attr`, and the `arc` generator from D3, along with the `transition().duration()` API to animate the eyebrows' vertical position. The view consists of a static face with moving eyebrows, rendered directly in the browser.

SSaurabh Gupta

87% match

Loading thumbnail…

ForkFaceReact

A cartoon face rendered in SVG animates its eyebrows in a looping sequence. The example builds the face from D3 shape primitives, including circles for the head and eyes, and an arc for the mouth, all positioned with a central translation. Using D3 v5's `select` and `arc`, it demonstrates chained `transition` calls to repeatedly move the eyebrow group up and down over two-second intervals. The code imports these D3 features via ES6 modules, with the library loaded from UNPKG and the visualization drawn to an SVG element.

WWilliam Gitta

87% match

Loading thumbnail…

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

This example animates a cartoon face built from basic SVG shapes, with eyebrows that move up and down over time to create a playful expression. The face consists of a yellow circle for the head, two black-outlined eyes, and a mouth drawn as a curved arc. The code uses D3.js v5 to construct and manipulate the SVG elements, and leverages D3's `transition()` method to animate the vertical position of the eyebrows. The static parts of the face (head, eyes, mouth) are defined with D3's `select` and `append` APIs, while the mouth is generated with `d3.arc`. The animation runs in a continuous loop, making the face appear to raise and lower its brows indefinitely.

DDINESH SAI BOPPANA

86% match

Loading thumbnail…

Fork of Fork of d3js

A yellow circle face with eyes, eyebrows, and a mouth rendered in SVG animates as the eyebrows move upward and then back down. Built with d3.js v5, the example uses `select` and `arc` to construct the facial features, while `transition().duration()` drives the eyebrow motion. The SVG canvas is 960 by 500 pixels, with elements positioned via transform attributes and styled through a linked CSS file.

FFarhodXoliyarov

86% match

Loading thumbnail…

Fork of Intro D3

This example shows a cartoon face built from SVG shapes—a yellow circle head, eyes, eyebrows, and an arc-based mouth—centered and animated with D3 transitions. The code uses d3.arc to generate the mouth path, while d3.select and d3.transition animate the eyebrow group’s vertical offset over two alternating two-second phases, creating a blinking or winking effect. Rendered via d3.v6 in a React-free HTML page, it demonstrates basic shape composition and chained transition.attr methods.

MMar-99

85% match