Make a face with D3.js

100%

Make a face with D3.js

✓ Published1🌍 Public

Last edited Dec 29, 2021

Created on Dec 29, 2021

A smiley face is rendered in an SVG canvas using D3.js v7, with a yellow circle for the head and two black circles for the eyes. The code appends each circle to the selected `svg` element, setting its radius and horizontal/vertical position via `attr` in relation to the SVG’s `width` and `height`. The styling is handled by an external CSS file that removes page margins. This example demonstrates basic D3 shape creation and attribute manipulation for static visual output.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a face with D3.js

A yellow smiley face is centered in an SVG canvas, with two eyes and a curved mouth built from basic SVG shapes. D3.js v7 selections and the `arc` generator draw the mouth path, while `circle` elements create the head and eyes. The body is rendered entirely in SVG, with the face assembled from primitives positioned relative to the canvas center.

AAustin0524

94% match

Loading thumbnail…

Make a face with d3.js

This example uses d3.js to draw a smiling face directly in SVG. A yellow circle forms the head, with two smaller black circles for eyes and an arc-generated path for the mouth. The code positions elements by translating to the center of an SVG canvas and uses d3’s `select` and `arc` API to create shapes, all rendered with fixed pixel coordinates.

Vvietiscool

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with two black eyes and an arc-based mouth positioned relative to the center of the 960x500 viewport. The code explicitly sets circle radii, coordinates, and fill/stroke attributes, while the mouth uses the d3.arc() helper to generate a path with defined inner and outer radii and angle ranges. Static geometric values define the face’s proportions, with no dynamic data or interaction involved.

Jjediknight956

92% match

Loading thumbnail…

Let's make a smiley face with D3.js

This example creates a smiley face from basic SVG shapes using D3.js, drawn on a 960×500 canvas. The face consists of a yellow circle with a black stroke, two eyes, rectangular eyebrows, and a mouth created with D3’s `arc` function. The eyebrows animate by chaining two `transition().duration(2000)` calls, moving them down and then back up over four seconds. The code uses D3 v5 selections (`select`, `append`) and attribute setters to position elements via transforms.

DDifan Gu

92% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes: a yellow circle for the head, two black circles for eyes, and a mouth drawn as a path. The code uses d3.select, d3.arc, and SVG attribute setters like .attr() to position elements on a 960x500 canvas. Static in this version, it serves as an introduction to D3’s data-driven approach, laying groundwork for an animated version where eyebrows move (per the README). The project runs on D3 v5 with SVG rendering.

RRiley Jamel Green

92% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The code builds the face from primitive shapes—a yellow circle for the head, black circles for the eyes, a path for the mouth—and positions them via group transforms. Two animated eyebrows, implemented as rectangles, shift vertically using chained `transition() .duration(2000)` calls. The example reads SVG dimensions with `parseFloat`, uses helper methods like `select`, `append`, and `attr`, and draws the mouth with the `arc()` shape generator from D3's shape module.

Sssd4

92% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face is rendered as SVG shapes within a 960×500 viewport. Yellow circles form the head and eyes, while an arc path creates the mouth. The eyebrows, drawn as rectangles, animate automatically, moving upward and returning to their original position over a two-second cycle. The code demonstrates fundamental DOM manipulation using D3’s `select`, `append`, `attr`, and `transition` APIs.

SSagar Malviya

92% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a simple smiley face drawn using D3.js v5 in an SVG container. The face consists of a large yellow circle for the head and two smaller black circles for the eyes, positioned with fixed pixel offsets. The code selects the SVG element and appends circles using D3’s `select` and `append` methods, setting attributes like `cx`, `cy`, `r`, and `fill` directly. The face’s dimensions derive from the SVG’s width and height attributes, with the head radius calculated relative to the height. No data source is used; the visualization is purely procedural.

AAbrar Kh.

92% match