Fork of D3 Face

100%

Fork of D3 Face

✓ Published0🌍 Public

Last edited Feb 24, 2023

Created on Feb 24, 2023

Forked from 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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of D3 Face

A stylized yellow face rendered in SVG, built with React and D3 v7, features animated eyebrows and a frowning mouth. The code uses `d3.select`, `d3.arc`, and chained `.transition().duration()` calls to move eyebrow rectangles vertically over two seconds, while static circles form the eyes and a path from `arc()` creates the mouth. The face is centered using SVG `g` transforms, with all shapes drawn directly in an HTML page.

RReyden Harris

95% match

Loading thumbnail…

Fork of D3 Face

A yellow circular face with black features, including eyes, eyebrows, and a frown, is rendered in SVG. The eyebrows animate upward and then return to their original position using a chained `transition.attr` in D3 v7. The code builds the face using `select`, `arc`, and `append`, with a `g` element centered via a transform. Static constants define the eye spacing, offsets, and mouth arc, all drawn within a 960 by 500 SVG canvas.

AAkhilaSiripurapu

95% match

Loading thumbnail…

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

A yellow circle face with black-outlined eyes, animated eyebrows, and a curved mouth is rendered in an SVG. The eyebrows transition up and down repeatedly using D3 `.transition().duration()`. The code constructs the face with d3-selection and d3-arc, positioning elements via SVG transforms. The mouth path is generated using `arc()` with inner and outer radii, while eye and brow shapes are drawn as SVG circles and rectangles on a 960x500 canvas.

DDINESHSAIBOPPANA7

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

93% match

Loading thumbnail…

Fork of make a face d3js

This animated SVG face uses D3.js v7 to build a cheerful character from basic geometric shapes. It draws a yellow circle head with elliptical eyes, circular irises, rectangular brows, and a mouth shaped using the `arc` function. The eyebrows are the only animated elements, moving via chained `transition` calls on their transform attributes. The markup is generated imperatively through `select` and `append`, with coordinates calculated from the SVG’s width and height attributes.

GGodspower Wodi

92% match

Loading thumbnail…

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

This example shows a stylized yellow face built from SVG shapes—a circle for the head, circles for eyes, rectangles for eyebrows, and a half-annulus arc for the mouth. The eyebrows animate up and down in a repeating two-second transition using D3’s `transition().duration()`. The code uses `d3.select` with `d3.arc` to generate the mouth path, and positions elements via SVG attribute methods and template literals. Rendered in a React-free HTML page with D3 v5, the face scales relative to the SVG’s 960×500 dimensions.

Aavinashchinta99

91% match

Loading thumbnail…

Fork of D3 Face Making

A smiling yellow face is drawn in SVG with D3 v5, featuring circular eyes and a curved mouth built from an arc path. Brows animate by moving downward and upward over two successive two-second transitions, each triggered via `transition.duration` on a group. The code constructs the face using `d3.select`, `d3.arc`, and positioned groups, with coordinates calculated from the SVG’s height and width. A static yellow background circle with a black stroke forms the head, while all shapes are appended directly to the SVG.

SShishiraRudrabhatla

91% match

Loading thumbnail…

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

This example shows a yellow face built with D3.js v5, rendered as animated SVG elements. A circle forms the head, two circles create the eyes, and an arc generates the mouth. The eyebrows, drawn as rectangles, animate upward and then back down using chained `transition` calls with a two-second duration. All shapes are positioned within a centered group using SVG transformations. The code imports `select` and `arc` from D3, and reads the SVG dimensions from the DOM attributes to set the layout dynamically.

EEeshwarReddy

91% match