Face

100%

✓ Published1🌍 Public

Last edited Feb 28, 2024

Created on Feb 28, 2024

Forked from Fork of Create a face with d3.js!

A smiling face built entirely from SVG primitives is drawn in the center of a light-blue circular head. The code uses D3 v7 to append a face group, two elliptical eyes, rectangular eyebrows, and a red arc for the mouth, with all positions computed relative to the viewport dimensions. The example demonstrates D3’s selection and arc APIs for constructing a simple, scalable vector graphic without any external data.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face

A smiling face is drawn inside an SVG canvas through D3.js v5. The visualization uses a static, stylized face composed of simple geometric shapes—eyes, nose, and a curved mouth—positioned within a 960×500 viewport. The rendering relies on D3’s selection and attribute-setting methods to generate the SVG elements directly, with styling controlled by an external CSS file. No data source appears; the face is a purely decorative vector graphic, with the blank `<svg>` element populated programmatically via D3.

PPrzemysław Orechwa

89% match

Loading thumbnail…

FACE

A smiling face is drawn using SVG shapes, with a light blue circle for the head, two dark eyes, and a mouth formed by a D3 arc path. The left eyebrow animates upward and downward through chained D3 transitions, while the right eyebrow remains fixed. The example uses D3 v5 selection methods and the `arc` generator, with a React framework and SVG rendering, to create a simple interactive-style visual.

Ccocktaildata

89% match

Loading thumbnail…

Face

A smiling face drawn with orange SVG circles and arcs animates its eyebrows and mouth. The code uses D3 v5’s `select`, `arc`, and chained `transition` calls to raise and lower rectangular eyebrows and to expand and contract the mouth’s outer radius over two-second intervals. Static features include circular eyes and a fixed head outline, all centered within a 960 by 500 SVG canvas.

Aabcz1234

88% match

Loading thumbnail…

Face

This example shows a simple, stylized face rendered in SVG. A yellow circle forms the head, two black circles serve as eyes, and a black arc creates a smiling mouth. The code uses D3’s `select` and `arc` functions to construct the shapes, setting coordinates and radii relative to the SVG’s width and height. The rendering uses D3 v5 and outputs to SVG, with the mouth path created using the `arc` function’s parameters for inner and outer radius and start and end angles.

Ddvyachkil

88% match

Loading thumbnail…

Face

This example uses D3.js (v5) to draw a simple yellow face as an SVG graphic. It constructs the face from basic shapes: a circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc path for the mouth. The code uses D3 selections, the `arc()` generator with `innerRadius`, `outerRadius`, and angle values, and applies SVG attributes like `cx`, `cy`, and `transform` to position elements. The visualization demonstrates how D3 can create static, non-data-driven graphics through geometric primitives.

HHassan Abdullah

88% match

Loading thumbnail…

Lets make a face

A smiling face is drawn inside a rounded green rectangle, with a single black circle placed above the center to suggest an eye. The code uses D3 v5’s selection and `arc` API, though only basic shape elements like `rect` and `circle` are rendered. The SVG canvas is 960 by 500 pixels, and a group is translated to the center to position the face. The current code creates one eye and a blank expression, leaving the rest of the face unfinished.

Uumihito

88% match

Loading thumbnail…

Face

A stylized face composed of SVG shapes is centered on a canvas, with a sky-blue circular head outlined in black. The face features two dark eyes with white highlights, eyebrows drawn as arcs, and a curved mouth, all constructed using D3's `arc()` generator. Built with React and D3 v6, the code uses `ReactDOM.render` to render the SVG elements, employing `ellipse`, `circle`, and `path` components with explicit coordinates and stroke widths.

RRajeevMukhesh

87% match

Loading thumbnail…

let's make a face with d3

A smiling face is drawn entirely with SVG shapes: a gold circular head, two black eyes, and a mouth created as an arc path. The code uses D3 v7’s `select` to append elements to an SVG canvas, and the `arc` generator to compute the mouth’s path with specified inner and outer radii and start/end angles. All shapes are centered via a translated group, with fixed pixel dimensions for the 960 by 500 canvas.

Ccguibourg

87% match