Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
RRC
Last edited Sep 26, 2019
Created on Sep 25, 2019

A simple SVG face made with D3.js v5, drawn entirely from primitive shapes: yellow circle for the head, small black circles for eyes, rectangles for eyebrows, and an arc-generated mouth. The code uses `d3.select` and `d3.arc` to construct the geometry, with a fixed `innerRadius` and `outerRadius` for the smile. All elements are centered via a translated `<g>` group, and faces render directly on a 960×500 SVG canvas with no external data.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from basic SVG shapes shows how D3.js v5 can assemble a figure from primitives. The code uses `d3.select` to append a yellow circle for the head, black circles for eyes, and a mouth drawn with the `d3.arc` path generator using specified inner and outer radii plus start and end angles. Positioning relies on the SVG width and height attributes read from the DOM, with the mouth placed inside a transformed `<g>` group. The example demonstrates simple attribute chaining and coordinate math for a playful default output.

Ddbidwai
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, eyebrows, and a smile is drawn entirely with D3.js v5 SVG primitives, including `circle`, `rect`, and an `arc()` path for the mouth. The face is centered within an SVG using a translated `g` group, and the eyebrows animate upward and back down via chained `transition().duration()` calls. The geometry uses constants for spacing and offsets, and the code demonstrates selection, attribute setting, and the `arc` generator from the `d3` module.

GGPOAdmin
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a simple, smiling face entirely from SVG primitives. A yellow circle forms the head, two smaller black circles serve as eyes, and two rectangles act as eyebrows. The mouth is created using D3's `arc` generator, which defines a path with a specified inner and outer radius and angular range. The code positions all elements relative to a central `g` group, using D3’s `select` and `append` methods to build the SVG structure.

Hhrvoje26
94% match
Loading thumbnail…

Let's make a face with D3.js!

A face built from basic geometric shapes appears on a yellow circular head with two black eyes, created entirely with D3.js v5 SVG elements. The code uses `d3.select` to append circles for the head and eyes, while the mouth is drawn with the `d3.arc` shape generator using an inner and outer radius with specified start and end angles. All elements are positioned relative to the SVG's width and height, demonstrating simple compositing of primitive shapes in a static visualization.

DDemi Johnson
94% match
Loading thumbnail…

Let's make a face with d3.js!

A smiling face is drawn on an SVG canvas using D3.js primitives. The code constructs a yellow circular head with black circular eyes and a mouth shaped as an arc path. The visualization is built from explicit coordinate calculations for positioning the face elements. It uses D3's `select` to access the SVG, `append` to create shapes, and `arc` to generate the mouth's path data, with a static, hand-coded layout rather than a data-driven approach.

Cccheung9595
94% match
Loading thumbnail…

let's make a face with D3.js!

A smiling face built entirely from D3.js SVG shapes. The code draws a yellow circle for the head, adds two smaller circles for eyes, and uses the `d3.arc` API to create an arc-based mouth with specified inner and outer radii and angles. The example demonstrates basic SVG attribute manipulation with `select`, `append`, and `attr`, and positions elements using a centered `<g>` group with translate transforms. All geometry is hardcoded, with no external data source.

YYongbobloomington
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…

Let's make a face with D3.js

A face built from basic SVG shapes—a yellow circle for the head, circles for eyes, and an arc-generated path for the mouth—is centered on a 960×500 canvas. The code uses D3.js v5’s `select` and `arc` APIs to append and position elements, with `transition()` animating the eyebrows up and down over two-second intervals. The rendering is entirely SVG, with all coordinates computed relative to the svg’s center using its width and height attributes.

BBen Daniel
94% match