Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Create a face with d3.js!

✓ Published0🌍 Public
Ppavan vasamsetti
Last edited Apr 4, 2024
Created on Feb 28, 2024

A monkey figure made with CSS and JavaScript jumps vertically in a loop, positioned at the bottom center of the viewport. The animation is driven by a CSS `@keyframes` rule that translates the monkey upward and back. The page uses an HTML div with a background image, paired with a simple JavaScript file and external stylesheet. The movement relies entirely on CSS transforms rather than D3.js or other visualization libraries, despite the title referencing D3.

AI-generated description

An

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Monkey.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a monkey SVG from scratch. It shows a static smiley-faced monkey with a tail, hands, ears, and a yellow banana, all created using raw SVG elements such as `circle`, `ellipse`, `path`, and `rect`. The code uses `document.createElementNS` and `setAttribute` to construct each shape, then appends them to an SVG canvas selected via `getElementById`. No data source is involved; the visualization focuses purely on programmatic SVG composition without D3 selections or transitions.

Hharichandanamone21@gmail.com
79% match
Loading thumbnail…

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

A D3.js animation builds a simple face from SVG primitives, with two green and orange concentric circles for the head, two circles for the eyes, and two rectangles as eyebrows. The eyebrows bounce vertically over four seconds via chained `transition().attr()` calls, while a path created with the `arc` generator forms a static mouth. The example demonstrates fundamental DOM manipulation through `select` and `append`, using D3 v5 to target an SVG element defined in the HTML.

NNavaneeth-Ragi
78% match
Loading thumbnail…

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

A smiling face built from basic SVG shapes animates its eyebrows up and down in a continuous loop. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` and `append` to create circles, rectangles, and an arc path for the mouth. Two chained `transition().duration()` calls move the eyebrow group between two vertical positions. The face is centered within an SVG canvas using an affine transform, with all geometry defined by explicit numeric constants.

PPoojithaPothini123
78% match
Loading thumbnail…

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

A smiling face built from basic SVG shapes animates its eyebrows up and down in a continuous loop. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` and `append` to create circles, rectangles, and an arc path for the mouth. Two chained `transition().duration()` calls move the eyebrow group between two vertical positions. The face is centered within an SVG canvas using an affine transform, with all geometry defined by explicit numeric constants.

PPoojithaPothini123
78% match
Loading thumbnail…

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

This animated D3.js visualization demonstrates fundamental DOM manipulation by constructing a smiley face with yellow circular face, black-outlined features, and animated eyebrows. Using SVG selections and transitions, the eyebrows move up and down in a repeating two-second cycle, while the face is built from basic geometric shapes—circles for eyes, rectangles for brows, and an arc for the mouth. The code showcases D3's data-agnostic DOM methods, including `select`, `append`, `attr`, and `transition`, all centered around a fixed coordinate system. The result is a clean, playful example of how D3 can create simple yet expressive animations entirely through code.

Ppavan vasamsetti
77% match
Loading thumbnail…

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

This animated SVG face uses D3.js v5 to demonstrate fundamental DOM manipulation. A yellow circle forms the head, with black-outlined eyes and a path drawn mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition()` calls with 2000-millisecond durations. The example shows how to build and move SVG elements dynamically, with a black page background set via D3’s selection style method, and relies on basic attribute setting for positioning.

SSANEEM MOHAMMAD
77% match
Loading thumbnail…

Fork of Fork of Fork of Create a face with d3.js!

A friendly yellow face with black-outlined features appears in the center of an SVG canvas. Built directly with D3 v7, the visualization constructs the face from basic geometric primitives: a circle for the head, two circles for eyes, rectangular eyebrows, and a path for the mouth. The code demonstrates D3's select, append, and arc APIs, alongside a D3 transition that animates the eyebrows downward and back over four seconds, creating a subtle blinking or eyebrow-raising effect. The example showcases importing local modules and loading D3 via UNPKG.

SSilverOwl1112
77% match
Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This face visualization created with D3.js v7 renders a stylized cartoon face using SVG shapes, including a radial gradient-filled circle for the face, black eyes with white reflection highlights, a curved nose path, and an arc-based mouth. Interactive hover transitions scale the face radius via `transition().duration()`, while the mouth is drawn using `d3.arc()` with specified inner and outer radii. The code appends all elements to an SVG canvas, using basic SVG attributes and event listeners for mouse interactions.

Sshailajat1998@gmail.com
77% match