Skip to main content
SimilarExport ZIP
100%

Lets make a face with with D3.JS

✓ Published0🌍 Public
Yyvesponcon
Last edited Nov 13, 2020
Created on Nov 10, 2020

A yellow circle face rendered in SVG uses D3.js v6 to assemble eyes, eyebrows, and a smiling arc mouth from basic shapes. The code imports `select` and `arc` from D3, positioning features relative to the SVG’s width and height through translation. It draws two black eye circles with fixed spacing, rotated rectangles as eyebrows, and a mouth path generated by D3’s `arc` generator with specified inner and outer radii. The example demonstrates composing a recognizable figure from primitive geometric elements.

AI-generated description

va niquer ta mère

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face is drawn in SVG using D3.js v7, with two eyes, eyebrows, and an arc-based mouth centered in the viewport. The code builds the face by appending SVG elements—a circle for the head, circles for eyes, rectangles for eyebrows—and uses D3’s `arc` generator to create the mouth path. All shapes are positioned relative to a translated group, with the face filling the 960×500 canvas.

Ffkukcha
94% match
Loading thumbnail…

Let's make a face with D3

A smiling face is drawn entirely with SVG shapes, rendered as a yellow circle with a black stroke, two eyes, and an arc-based mouth. The code uses D3 v5 selections to append elements to an SVG canvas, importing `select` and `arc` from the D3 module. The `arc` generator creates the mouth with specified inner and outer radii and start/end angles. All shapes are centered using a group translation, with eye positions calculated from fixed offsets.

Hhairibung
94% match
Loading thumbnail…

Lets make a face with D3.js

A yellow circle forms a face with black eyes, rectangular eyebrows, and a semicircular arc mouth rendered as SVG shapes. The right eyebrow animates between two vertical positions using `transition().duration()`, while the mouth uses the `arc()` generator from d3-shape with specified inner and outer radii. The code imports `select` and `arc` from D3 v5, appends elements to an SVG canvas sized 960 by 500, and centers the face using fixed pixel coordinates. No external data is loaded; all shapes are directly defined in the script.

Llamiyaa
94% match
Loading thumbnail…

Lets make a face with D3.js!

A yellow circle forms a cartoon face on an SVG canvas using D3.js v6. The code draws two black eye circles and a mouth path via the `arc()` generator, which creates a half-circle with specified inner and outer radii and angle ranges. The face is centered using a transformed group element, with eye spacing and vertical offset defined as constants. This example demonstrates fundamental D3 selections and shape generators for assembling simple geometric compositions.

Nnajeebgdds
94% match
Loading thumbnail…

Let´s make a face with D3.js!

A yellow circle with a black outline forms a face, two black circles serve as eyes, and an arc-shaped path creates a mouth. The SVG elements are centered using a translation transform, with eyes positioned at fixed offsets and the mouth drawn via D3's `arc` generator with specified inner and outer radii. The example uses D3 v7’s `select` and `append` methods to build the static composition.

JJpcofre
94% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a cartoon face using SVG shapes composed with D3 v5. A yellow circle forms the head, while two smaller circles create the eyes and rectangles serve as eyebrows, all positioned relative to a centered group. The mouth is a path generated with the `d3.arc` helper, using specific inner and outer radii and angle values. The code relies on D3’s `select` and `attr` methods to build and style the static SVG elements, with no data binding.

VVarun Khanna
94% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a cartoon face using SVG shapes composed with D3 v5. A yellow circle forms the head, while two smaller circles create the eyes and rectangles serve as eyebrows, all positioned relative to a centered group. The mouth is a path generated with the `d3.arc` helper, using specific inner and outer radii and angle values. The code relies on D3’s `select` and `attr` methods to build and style the static SVG elements, with no data binding.

VVarun Khanna
94% match
Loading thumbnail…

Lets make a face with d3.js

This example shows a simple yellow face constructed entirely with SVG shapes, using D3.js to generate a circular head, two eyes, and an arc-based mouth centered on the canvas. The code imports `select` and `arc` from the d3 module, manipulates SVG attributes directly, and positions elements based on the viewport height and width. The mouth uses the `arc` generator with specified inner and outer radii and angular ranges, while circles are appended for the face and eyes. The example demonstrates basic D3 selection, attribute setting, and generator usage without any data binding.

MMonisha Gopinath
94% match