Skip to main content
SimilarExport ZIP
100%

FaceMaker

✓ Published1🌍 Public
Jjr873
Last edited May 6, 2021
Created on May 6, 2021

FaceMaker draws a simple cartoon face composed of geometric primitives. An orange circle forms the head, with black-stroked circles for eyes and a rectangular mouth, all centered within an SVG canvas. The visualization uses D3.js version 6, leveraging its selection and attribute methods to append and position elements. The code directly specifies coordinates and dimensions for each shape, creating a static, non-interactive composition.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Face

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.

Nnagasai.mandalapu@gmail.com
84% match
Loading thumbnail…

Face Maker

A yellow SVG face with eyes, nostrils, and a line for a mouth is drawn using D3 v5. Eyebrows animate up and down, followed by an angry mouth that disappears before a smile fades in. The code uses `d3.select`, `d3.arc`, and `transition.attr` with `duration` and `delay` to coordinate the facial expressions.

Mmimatador
83% match
Loading thumbnail…

Let's Make A Face

A cartoon face is drawn entirely with SVG shapes, using a yellow circle for the head, black circles for eyes, and a curved path for the mouth created with the D3 `arc` generator. The code uses D3 v7 selections to append elements to an SVG canvas, with explicit attribute setters like `.attr('cx', ...)` and `.attr('d', ...)` to position the eyes and compute the mouth's arc geometry. Elements are grouped in a `<g>` element translated to the canvas center.

Mmuddcohd
83% match
Loading thumbnail…

Fork of Face with d3.js!

This example draws a stylized cartoon face directly onto an SVG canvas using D3.js v7. The code constructs the face from basic geometric shapes—circles for the head, eyes, and ears, rectangles for the eyebrows, and an elliptical arc for the mouth—all positioned relative to the canvas center. It relies on d3.select for DOM selection and d3.arc to generate the mouth’s path. The composition is organized by grouping elements with SVG transforms, demonstrating how to build complex graphics from primitives without any external data source.

Ssaiyogesh9911@gmail.com
83% match
Loading thumbnail…

Let's Make a Face with D3.js

This example demonstrates how to construct a cartoon face using SVG shapes and D3.js. The code initializes a basic SVG canvas and utilizes D3’s core selection and manipulation methods to draw features like eyes, a nose, and a mouth with simple geometric forms. The visualization relies on D3 v5 loaded from a CDN, with the page structure built in plain HTML and styled via CSS. The face appears as a static composition, showcasing how D3 can create playful, data-driven graphics beyond typical charts.

Nnkrpyate
83% match
Loading thumbnail…

let's make a face with d3.js

A yellow circle with black eyes and an arc-based mouth forms a simple cartoon face in an SVG canvas. The code uses d3-selection to append and position the circles, while the mouth is drawn with d3.arc() using inner and outer radii plus start and end angles. All shapes are rendered directly as SVG elements, with dimensions derived from the SVG attributes. The face is centered within a 680×500 viewport, demonstrating basic geometric composition without data binding or interaction.

RRoque Luís Pina
82% match
Loading thumbnail…

Let's make a face with D3.js!

A playful SVG visualization uses D3.js to construct a cartoon face from basic geometric shapes. The example relies on D3 v3's core selection and manipulation methods to append circles and paths directly to an SVG canvas, which is styled with a minimal embedded stylesheet. The code initializes an empty 960×500 SVG and logs the D3 object to the console, demonstrating the library's availability before any visual elements are drawn. No data is loaded; the face is purely declarative, awaiting additional shape definitions.

JJordan Arnold
82% match
Loading thumbnail…

Make face with d3

This example draws a simple cartoon face using D3 v5 in an SVG container. The code creates a yellow circular head, two black eyes with fixed spacing, and a mouth path built with the `d3.arc` generator. The face is positioned relative to the SVG’s width and height attributes, and basic styling is applied directly through attributes and CSS. The rendering approach uses basic SVG shapes and a path, with no data binding or interaction.

MMasoumeh Bakhtiariziabari
82% match