Skip to main content
SimilarExport ZIP
100%

Lets make a face with D3.js!

✓ Published0🌍 Public
FFridayk7
Last edited Jul 2, 2020
Created on Jul 2, 2020
Forked from HTML Starter

A yellow circle becomes a cartoon face with black-outlined features, built using D3.js selections and SVG primitives. The example constructs the face from a central `circle` for the head, two smaller circles for eyes, and a `path` generated with the `arc()` generator to form a half-circle mouth. Two white rectangles serve as teeth, with the right tooth animating downward via a chained `transition().duration(2000)` that changes its `y` attribute. The code utilizes D3 v5’s `select`, `arc`, and transition APIs within a React framework, rendering to an SVG canvas.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face with D3 js!

This example builds a simple cartoon face from SVG primitives using D3.js. Yellow circles form the head and eyes, while rectangles serve as eyebrows and an arc generator creates a mouth. The eyebrows animate through a chained `transition().duration()` sequence, moving up and down repeatedly. The code uses `select`, `arc`, and `attr` to position shapes on an SVG canvas within a React framework.

Nnsadath
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!

A yellow circle with a smiling mouth and two eyes forms a cartoon face, rendered as an animated SVG. The code builds the face using D3.js v5 selections, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows moving in a sequence of positions. The face is centered within a 960×500 SVG canvas, with circles, rectangles, and a path grouped together.

Ccathykan
94% match
Loading thumbnail…

Let's make a face with D3.js!

A simple cartoon face built from SVG primitives appears on a yellow circular head with black outlines, featuring two eyes, movable eyebrows, and a mouth drawn as an arc path. D3 selections and transitions animate the eyebrow group’s vertical position over two seconds, first lowering and then raising it. The code imports `select` and `arc` from D3 v5, uses SVG circles, rectangles, and paths, and runs within a React-created bundle on a bare HTML page.

Iidwann-eng
94% 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, two eyes, and a mouth drawn with the `arc` function. Eyebrows are animated using chained `transition` calls, moving them down and back over two seconds each. The code arranges all parts within an SVG, using React for scaffolding and numeric attributes for positioning.

DDavid Trye
94% match
Loading thumbnail…

Let's Make a Face with D3,js!

This example uses D3.js version 5 to build an animated face from basic SVG shapes. A yellow circle forms the head, with two smaller circles for eyes, and a custom arc path renders the mouth. The eyebrows, drawn as rectangles, perform a repeated vertical transition to simulate a winking or expressive motion. The code leverages D3’s `select`, `arc`, and chained `transition().duration()` methods, while React and a bundled `bundle.js` handle the application structure. All coordinates and sizes are derived from the SVG’s width and height attributes.

Sslipperyd
94% match
Loading thumbnail…

Let's make a face with D3 and SVG

This example demonstrates how to build an animated cartoon face using D3 and SVG, with a yellow circle for the head, black-outlined eyes, and an arc-based mouth centered on a 960x500 canvas. The eyebrows are rectangles that bounce up and down using chained `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5 and uses React for the framework. SVG elements are constructed programmatically, with the mouth path generated via the `arc()` API using inner and outer radii and angular ranges.

Pp4pravin
94% 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: a yellow circle for the head, black circles for eyes, and a mouth drawn with the `d3.arc` path generator. The eyebrows are rectangles that animate their vertical position using chained `transition` calls with `attr` tweens, giving the face a blinking or winking effect over time. The code selects the SVG element and appends shapes with explicit `attr` settings for coordinates, sizes, and fill colors, while the `<script>` tag loads D3 from a CDN. The rendering approach is purely declarative SVG construction with animated transitions.

Ookleinlux
94% match