Skip to main content
SimilarExport ZIP
100%

make a face

✓ Published3🌍 Public
Mmanishabehera
Last edited Apr 5, 2021
Created on Apr 3, 2021
Forked from Hello VizHub

This example illustrates a simple face constructed from basic SVG shapes using D3 version 6. A yellow circle forms the head, with two smaller black circles serving as eyes, all positioned using absolute pixel coordinates. The mouth is created with D3's `arc` generator, which defines a path using inner and outer radii along with start and end angles. The visualization loads D3 via UNPKG and uses the `select` and `append` methods to build the SVG scene, showcasing D3's utility for creating primitive graphics through its DOM manipulation interface.

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…

make a face with d3.js

A simple face built from SVG shapes using D3 v5. The code creates a yellow circle with a red stroke for the head, two eyes with white pupils, and a mouth drawn as an arc path. It uses `d3.select` and `d3.arc` to position elements at fixed coordinates on a 960×500 SVG canvas. The example demonstrates basic D3 shape generation and attribute manipulation without data binding.

DDominika Modzelewska
93% match
Loading thumbnail…

make a face with d3.js

A simple face built from SVG shapes using D3 v5. The code creates a yellow circle with a red stroke for the head, two eyes with white pupils, and a mouth drawn as an arc path. It uses `d3.select` and `d3.arc` to position elements at fixed coordinates on a 960×500 SVG canvas. The example demonstrates basic D3 shape generation and attribute manipulation without data binding.

DDominika Modzelewska
93% match
Loading thumbnail…

making a face

This example shows a simple, static face built from vector shapes: a yellow circular head, two black eyes, and an arc-shaped mouth on a 960-by-500 SVG canvas. The drawing is constructed programmatically with D3 v5, using `d3.select` to target the SVG element and appending SVG `circle` and `path` elements. The mouth is generated via `d3.arc`, which creates a path based on inner and outer radii and start and end angles, while eye positions are calculated from the canvas center. The page relies on a separate `bundle.js` script and a minimal stylesheet.

AAndrew Fletcher
91% match
Loading thumbnail…

make a face

This example draws a simple cartoon face using D3.js v5 and SVG. A yellow circle forms the head, two black-outlined circles serve as eyes, and an arc path creates a smiling mouth. The code uses d3.arc to generate the mouth’s path with specified inner and outer radii and angles, while d3.select appends circles and a group element to the SVG. The face is positioned using fixed coordinates and the viewBox dimensions are read from the SVG attributes.

Jjiayuansun
91% match
Loading thumbnail…

Make a face with D3.js

This example builds a cartoon face entirely with D3.js shapes in an SVG. It uses `select` to target the SVG element and appends a yellow circle for the head, two black circles for eyes, and rectangles for eyebrows, all positioned with explicit pixel offsets. A mouth is created using the `arc` generator, which defines an annular sector with inner and outer radii and start/end angles. The face is centered by translating a group element to the middle of the 960 by 500 SVG canvas, demonstrating basic SVG shape construction and transformations in D3 v6.

ZZachery2008
91% match
Loading thumbnail…

Lets make a face with D3

This example uses D3 v5 to draw a simple smiling face entirely in SVG. It appends a yellow circle for the head, two black circles for eyes, and a mouth path created with the `d3.arc` generator, using inner and outer radii with specified start and end angles. The `select` function targets the SVG element, and attribute values like height and width are read directly from the markup. No external data is loaded; all shapes are positioned based on the SVG’s dimensions and fixed pixel offsets.

Rrpadron8
91% match
Loading thumbnail…

Let's make a face

A yellow circle face with black-outlined eyes, rectangular eyebrows, and an arc-shaped mouth is drawn using D3 v5 selections and SVG primitives. The visualization centers the face within an SVG canvas using a translated group, positioning features relative to shared constants for spacing and offsets. The mouth is generated with the `d3.arc` path generator, configured with inner and outer radii and explicit start and end angles. All shapes are appended directly to the SVG via D3's `select` and `append` methods, with no external data source beyond the hardcoded dimensions.

FFloridaPlates
91% match
Loading thumbnail…

Let's make a face

A yellow circle forms a face with two black eyes and a wide arc-based mouth, all rendered as SVG elements. The example demonstrates basic D3.js v5 selection and shape generation, using `d3.select` to append circles and set positional attributes, and `d3.arc` to create a mouth path from inner and outer radii plus start and end angles. All geometry is computed from the SVG’s width and height attributes, with no external data.

KKwadwo 'Que' Amankwa
91% match