Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ssolarmic2015
Last edited Jun 29, 2022
Created on Jun 29, 2022

This example builds a simple smiling face using D3.js v5 within a React-free HTML page, rendering to SVG. The face is composed of a yellow circle, two eyes, eyebrows, and a mouth drawn with `d3.arc()`. The eyebrows animate up and down using chained `transition().duration()` calls, shifting their group’s `transform` attribute. Static positioning relies on absolute pixel values from the SVG’s width and height, and all shapes are appended to a central `<g>` element.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
98% 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
96% match
Loading thumbnail…

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

This example shows a static smiley face built with React and D3.js v5, rendered as SVG. The face consists of a yellow background circle, two black eyes positioned symmetrically, and a smile created using the D3 `arc()` generator with specified inner and outer radii. All shapes are defined as React components that receive numeric props for dimensions and positioning. The drawing is centered within an SVG viewport using a group transform, with the face’s radius derived from the viewport height minus stroke width.

AAdaman32
95% match
Loading thumbnail…

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

This example renders a simple, stylized face using D3.js v5 within a React framework. It constructs a yellow circle for the head, two eyes with eyebrows, and a mouth path. The eyebrows animate by moving down and up over two seconds using D3 transitions. The code leverages `d3.select`, `d3.arc` for the mouth shape, and SVG attributes for positioning, with the entire scene drawn inside an SVG element.

Fflufficornn
95% match
Loading thumbnail…

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

This example builds a smiling face out of geometric SVG shapes using D3.js v5 within a React starter scaffold. It draws a yellow circle for the head, two smaller circles for eyes, rectangles for eyebrows, and an arc-generated mouth. The `select` and `arc` helpers from the D3 module construct the elements, while chained `transition().duration(2000)` calls animate the eyebrow group vertically up and down, demonstrating simple keyframe-style motion.

Aanandbabu-k
95% match
Loading thumbnail…

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

A smiling face is drawn on a yellow SVG circle, with eyes, animated eyebrows that rise and fall over two seconds, and a mouth created as an arc path. The visualization uses D3.js v5 to select and manipulate SVG elements, with JavaScript handling the layout and the `d3.arc` API for the mouth’s shape. The `transition` method animates the eyebrow movement.

DDemisTheo
94% match
Loading thumbnail…

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

This example renders a stylized face using D3.js v5 within a React framework, displayed as scalable vector graphics with animated eyebrows. A yellow circle forms the head, with two smaller circles for eyes and a path-based arc for the mouth. The code uses D3’s `select` and `append` to build the SVG structure, `arc()` to generate the mouth path, and chained `.transition().duration()` calls to animate the eyebrow rectangles vertically over two seconds each, creating a subtle bobbing motion. The animation runs in an HTML page that loads D3 from a CDN.

DDINESH SAI BOPPANA
94% match
Loading thumbnail…

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

This example renders a stylized face using D3.js v5 within a React framework, displayed as scalable vector graphics with animated eyebrows. A yellow circle forms the head, with two smaller circles for eyes and a path-based arc for the mouth. The code uses D3’s `select` and `append` to build the SVG structure, `arc()` to generate the mouth path, and chained `.transition().duration()` calls to animate the eyebrow rectangles vertically over two seconds each, creating a subtle bobbing motion. The animation runs in an HTML page that loads D3 from a CDN.

DDINESH SAI BOPPANA
94% match