Fork of Face with d3.js!

100%

Fork of Face with d3.js!

✓ Published1🌍 Public

Last edited Feb 28, 2024

Created on Feb 28, 2024

This example shows three green robots with yellow heads and pink caps moving horizontally across a patterned light-gray SVG background. Each robot bounces back and forth independently, reversing direction when it reaches the edge of the 600x400 viewport. The code builds the robots using D3 v7 selections and SVG shapes, including circles for eyes, polygons for antennae, and paths for bodies. Animation is driven by `requestAnimationFrame`, updating each group's `transform` attribute every frame based on a per-robot direction state.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

78% match

Loading thumbnail…

Let's make a face with d3.js!

A cheerful robot face built with SVG elements appears on a yellow circular head with black eyes and a curved mouth. The animation shows the eyebrows moving up and down repeatedly using chained `transition()` calls with two-second durations in D3 v5. The visualization uses `d3.select` and the `arc()` generator to create the mouth path, while React handles the component structure and SVG rendering in the browser.

Ssreeanthrds

77% match

Loading thumbnail…

Fork of Fork of d3js

A cheerful yellow face with black-outlined features is rendered as an SVG in D3 v5. The animation lifts the rectangular eyebrows upward and then returns them to their original position over a four-second cycle, using chained `transition()` calls on a grouped element. The face is composed of circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered within a fixed 960x500 SVG viewport.

HHeisenberg

77% 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

77% match

Loading thumbnail…

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

This example displays a simple cartoon face composed of SVG shapes, centered on a yellow circle with two eyes and an arc-based mouth. The face group is positioned using a transform, and the right eye animates downward over two seconds via a D3 transition. The code uses d3.arc to generate the mouth path and d3 selection/transition methods (transition.attr) to modify attributes, with the SVG drawn directly in the browser. It forks an existing "Let's make a face" example, adapting it for D3 v5.

Hhuizrh

76% match

Loading thumbnail…

Forking with this Face for Fun.js!

Two cartoon faces rendered side-by-side in SVG each animate their eyebrows upward and downward in a repeating two-second transition. Built with D3 v5, the example constructs each face from circles, rectangles, and arc paths, positioning elements via `svg.append` and `g.attr` transforms. Duplicated code blocks define a red face with a hat and collar, and a blue face with asymmetric pupils, showing fundamental DOM manipulation through D3 selections, `transition.duration`, and the `arc` generator for the nose and mouth shapes.

Ddldowning

76% match

Loading thumbnail…

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

This example creates a stylized, cartoon-like face using D3.js v5, drawing features like hair, eyes, ears, nose, and teeth as SVG shapes. The primary animation shows the eyebrows moving upward and then back down over two seconds each way, using chained `transition` calls on the group containing them. The code directly manipulates SVG elements via `d3.select` and `append`, positioning features with explicit `attr` values, and uses the `arc` generator to form the mouth path. The visualization demonstrates fundamental DOM manipulation and animation within a 960 by 500 pixel SVG canvas from `index.html`.

JJustin Roberts

76% match

Loading thumbnail…

Fork of D3 Face

A yellow face with black outlines, two eyes, and a frown is rendered in SVG and animated. The eyebrows move up and down through repeated transitions, while the mouth is drawn using an arc path. The code uses D3 v7’s `select`, `arc`, and chained `transition().duration()` methods, with React as the framework. All shapes are positioned via SVG attributes and transforms, centered in a 960×500 viewport.

NNikitha123171

76% match