Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Vvinothsm
Last edited Sep 8, 2019
Created on Sep 8, 2019

This example creates a yellow smiley face in an SVG canvas using D3.js, with two eyes and black rectangular eyebrows that appear above them. The face is centered by translating a group element, and all facial features are appended as SVG circles and rects. The code uses d3.select, attr, and append methods to build the static face, while the eyebrows are positioned with fixed dimensions and offsets, though the code does not animate them despite the README’s mention of movement. The visualization demonstrates fundamental DOM manipulation with D3’s declarative data-joining style.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in an SVG canvas using D3.js. The code demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth path through method chaining. It uses D3’s `select`, `attr`, and `append` APIs, with a `transition` and duration to move the eyebrow group up and down repeatedly. The face is centered via a translated `<g>` element, and dimensions are parsed from the SVG attributes. Static shapes initialize the face, then the eyebrow transition adds motion.

VVinh H. Le
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple yellow smiley face using D3.js, starting with basic SVG shapes like circles for the face and eyes. The code uses D3’s `select` and `append` methods to create and style elements within an SVG canvas, setting attributes such as radius, position, and fill color step by step. While the README mentions moving eyebrows, the provided code only renders the static face, relying on D3 v5’s core selection and attribute manipulation APIs to construct the visual directly from JavaScript.

AArthur Welf
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face from SVG shapes, including eyes, eyebrows, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and `transition.attr` to animate the eyebrows moving up and down over a two-second cycle. Rendered in an SVG canvas, it highlights how D3 v5 binds data and updates attributes directly, with all elements positioned relative to a centered group.

Aabreudude
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with a black outline and three eyes is drawn using D3.js. The shape is assembled from SVG circles, rectangles, and arc-generated paths for the nose and mouth. The code uses d3.select, d3.arc, and chained transitions to animate the eyebrows, which move upward and then back down over a two-second duration. The example demonstrates basic DOM manipulation and SVG rendering with D3 v5.

DDimitarDraganov
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, including eyes, a mouth, and animated eyebrows. The code demonstrates basic DOM manipulation by selecting an SVG element and appending shapes like circles, rectangles, and an arc-based mouth path. D3 v5’s `transition()` method moves the eyebrows up and down over repeated two-second intervals. The face is centered using an SVG group with a translated transform, and all geometry is defined by explicit pixel constants.

Vvoiletymr
95% match
Loading thumbnail…

Let's make a face with D3.js!

The example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face out of SVG shapes, including a yellow circle for the head and animated eyebrows that move up and down. It uses D3’s `select`, `append`, and `attr` methods to build and style the face elements directly within the SVG canvas. The rendering relies on D3 v5’s core API, with the face drawn entirely through programmatic SVG element creation rather than data mapping.

Ttonestar
95% match
Loading thumbnail…

Let's make a face with D3.js!

D3.js draws a yellow smiley face as a scalable SVG, centered in a 960×500 canvas. The face’s circular head, eyes, eyebrows, and arcing mouth are built by appending SVG primitives—`circle`, `rect`, and `path`—to a group. The example demonstrates core DOM manipulation with `d3.select` and `append`, while a chained `transition().duration(2000)` sequence animates the eyebrows, moving them up and down over four seconds. The mouth uses the `d3.arc` shape generator with specified inner and outer radii and angle ranges.

CChetan Hebsur
95% match