Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Jjmeroth
Last edited Sep 12, 2018
Created on Sep 12, 2018

This example draws a cartoon face in an SVG canvas using D3.js v5. A yellow circle forms the head, with blue circles for eyes and a black-outlined path for a mouth, created via D3’s `arc` helper. The left eye animates downward over two seconds using the `.transition().duration(2000)` API. The face is centered by translating a group element, and the SVG dimensions are read dynamically from the markup.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a cartoon face from SVG primitives. A large yellow circle forms the head, with two black circles for eyes placed at fixed offsets and a yellow arc path generated via the `arc()` function for the mouth. Rectangular eyebrows are animated with chained `.transition()` calls, moving downward and back over two seconds each. The SVG canvas is set to 960 by 500 pixels with a red background, and all shapes are positioned relative to the center using D3's selection and attribute methods.

Sstelson
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple cartoon face as an SVG, comprising a yellow circle head, two eyes, rectangular eyebrows, and an arc-based mouth. The face is centered within a 960×500 viewport using an SVG group transform. The eyebrows animate upward and back down over two seconds each way using chained `transition().duration()` calls. The mouth is generated with D3’s `arc()` geometry, while static shapes are created via `select`, `append`, and attribute setters.

DD2552
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, black circles for eyes, and an arc-based path for the mouth. The animation shows the eyebrows moving up and down repeatedly through chained `transition()` calls, each lasting 2000 milliseconds. The code uses D3's `select` and `arc` APIs, with coordinates centered via an SVG group transformation. The face is built programmatically in JavaScript, positioning shapes relative to the center of a 960 by 500 viewport.

Mmuxiaofan
95% match
Loading thumbnail…

Let's Make a Face with D3.js!

This example demonstrates how to construct a simple cartoon face using SVG primitives created with D3.js v5. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and a path generated by the `arc` function for the mouth. The code leverages D3’s selection and creation API, including `select`, `append`, and attribute setting, while a chained `transition().duration(2000)` animation repeatedly moves the eyebrows up and down. The face is centered within an SVG canvas, with styling provided by an external CSS file.

Iimmanentdomain
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a simple animated face. A yellow circle forms the head, with two black circles for eyes and a pair of rectangular eyebrows that move up and down in a looping transition. A mouth is rendered using the `d3.arc` function to create a curved path. The entire face is centered within an SVG canvas using a translated group element, with all shapes and animations defined declaratively.

Lleandermaerkisch
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow cartoon face from SVG shapes using D3.js v5. The face is centered via a group transform, with circles for the eyes and an arc-generated path for the mouth. D3 transitions animate the eyebrows upward and back over two seconds, while the static shapes render in a 960×500 SVG canvas. The code imports `select`, `arc`, and `rect` from the D3 library.

Jjahnueldorelus
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face as a yellow circle with eyes, eyebrows, and a mouth, all rendered in SVG. The eyes and eyebrows are positioned using D3 selections and attributes, while the mouth is drawn with the `d3.arc` shape generator. The eyebrows animate upward and back down over two 2-second transitions, demonstrating `transition.attr`. The face is centered via a translation and styled with CSS on the `body`.

Ffra-alaimo
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a cartoon face from SVG primitives. A yellow circle forms the head, with positioned circles for eyes and arcs for a mouth, all centered via a group transform. The code constructs these shapes using `select`, `arc`, and attribute setters, while a `transition().duration()` sequence animates the eyebrows upward and back down over several seconds, creating a simple facial expression.

AAravind Subramaniam
95% match