Fork of D3 Face

100%

Fork of D3 Face

✓ Published0🌍 Public

Last edited Feb 23, 2023

Created on Feb 23, 2023

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

AI-generated description

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

Similar vizzes

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

95% match

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

94% match

Loading thumbnail…

Fork of D3-1: Making a face

A yellow circle with black outlines forms a face, including two blue eyes, a mouth drawn as an arc, and two rectangular eyebrows. The face is rendered as SVG using D3 v3, with elements appended via `d3.select` and styled through chained `.attr` calls. The mouth uses the `d3.arc` API to generate its path. Both eyebrows animate with `transition().duration(2000)`, moving upward then returning to their original position, all within a 900×500 SVG canvas.

AAbishekprabakaran

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

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

92% match

Loading thumbnail…

Fork of D3-1: Making a face

A yellow face with blue eyes, eyebrows, and a curved mouth is drawn in an SVG canvas using D3 v7. The visualization constructs the face from primitive shapes—circles for the eyes, an arc-generated path for the mouth, and rectangles for the eyebrows. The eyebrows animate vertically over four seconds using D3's `transition` and `duration` methods, shifting them up and then back down. The code explicitly sets dimensions and positions based on the SVG's width and height attributes.

HHarish.G

92% match

Loading thumbnail…

Fork of Create a face with d3.js!

A yellow face rendered in SVG centers a circular head, two eyes, raised eyebrows, and a smile. Built with D3 v7, the code uses `d3.select` and `d3.arc` to construct the shapes. The eyebrows animate upward and back down over two seconds via chained `transition().duration()` calls. Static data values define positions and sizes for facial features.

44charan4

92% match

Loading thumbnail…

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

A yellow smiley face is rendered in SVG with D3.js, featuring circular eyes, a mouth shaped with the `d3.arc` generator, and rectangular eyebrows that animate upward and back via chained `transition` calls. Built with D3 v5, the code selects the SVG element, sets its dimensions, and uses `select` and `arc` imports to construct the face, while the eyebrows' positions are manipulated through `attr` transitions over two-second intervals.

AAkhilaSiripurapu

92% match