Fork of make a face d3js

100%

Fork of make a face d3js

✓ Published0🌍 Public

Last edited Mar 3, 2022

Created on Mar 3, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of make a face d3js

This example shows a cartoon face built entirely from basic SVG shapes, using D3 v7 to create a yellow circle head, two elliptical eyes with irises, and a wavy mouth path. The code leverages D3’s `select` and `arc` APIs to generate two crescent-shaped arcs, transformed and positioned to represent drunk, half-closed eye lids. Additional shapes like `circle` and `ellipse` are appended manually, while the mouth is a hand-written path string with stroke styling, all rendered at a fixed 960×500 SVG canvas size.

GGodspower Wodi

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

93% match

Loading thumbnail…

Fork of Fork of make a face d3js

This example draws a simple smiling face using D3.js, with a yellow circular head, white elliptical eyes with dark pupils, and a wide arc-shaped mouth. The face is rendered as SVG elements within a 960×500 viewport, with the head centered and the mouth positioned using D3’s `arc` generator to create a path. The code explicitly selects the SVG canvas and appends shapes using D3’s selection API, setting attributes like fill, stroke, and geometry directly.

GGodspower Wodi

93% 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 Let's make a face with d3.js

A cheerful yellow face is drawn in SVG and animated with D3.js v7. The face features a circular head, two eyes, and rectangular eyebrows that move up and down over two seconds. The mouth is rendered as an arc path using the `arc()` method, which defines its inner and outer radii and angular range. The code uses `select` to target the SVG element, `append` to build the grouped shapes, and `transition().duration()` to animate the eyebrow group’s transform, demonstrating basic D3 animation and SVG construction.

FFarhodXoliyarov

93% match

Loading thumbnail…

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

A smiling face is drawn with D3.js v5, featuring a yellow circle, two eyes, animated eyebrows that repeatedly move up and down, and a mouth shaped using an arc path. The SVG is centered using a translation, and the eyebrows animate via chained `transition().duration` calls that toggle their vertical offset. The code imports `select` and `arc` from D3, reads the SVG dimensions from attributes, and builds the face from primitive shapes. The example is rendered as a static SVG with animation triggered on load, using a React-friendly structure.

SSatyaVineeth

92% match

Loading thumbnail…

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

This example builds a smiling face in SVG using D3.js v5 and React, with a yellow circle for the head, two eyes, and an arc-based mouth. The code uses `d3.arc` to generate the mouth path and `d3.select` to append and style elements. An animated eyebrow movement is achieved with chained `transition` calls that shift a group containing two rectangles up and down over two-second durations. The face is centered via SVG transforms, with positions calculated from the viewport dimensions.

HHarishma Nallala

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

92% match