Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
烽烽火戏猪猴
Last edited Mar 15, 2019
Created on Mar 15, 2019

This example uses D3.js v5 to construct a smiley face entirely through SVG elements in the DOM. It draws a yellow circle for the face, black circles for the eyes, and a path generated with the `d3.arc` function to form the mouth. The code demonstrates fundamental selections, attribute setting, and shape generation using APIs like `select` and `arc`. The resulting static face is rendered in an SVG container.

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 building a smiley face from SVG shapes: a yellow circle for the head, two black circles for eyes, and an arc-generated mouth. The code uses D3 selections, `svg.append`, and the `arc` generator from the d3-shape module to construct the face. The face is static, with no interactive behavior or animations, and the rendering approach relies on SVG elements within a 960-by-500 viewport.

烽烽火戏猪猴
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in an SVG using D3.js v5, with eyes, eyebrows, and a mouth created via `circle`, `rect`, and `path` elements. The face is centered using a translated group, and the mouth is generated with the `d3.arc` helper. Eyebrows are positioned as rectangles, while the code demonstrates fundamental DOM manipulation through selections and attribute chaining. The example relies on static shapes without interaction, showcasing basic SVG rendering with D3’s `select` and `append` methods.

Vviolet-chaeyoonkim
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a smiley face using fundamental D3.js DOM manipulation, with a yellow circle for the head, black circles for the eyes, and an arc path for the mouth. The code uses D3’s `select` and `arc` APIs to append SVG elements to an `svg` container, positioning them based on the SVG’s width and height attributes. It renders entirely as SVG in the browser, importing D3 v5 from a CDN. The example highlights basic shape creation and attribute setting without data binding or interaction.

RRadhika Ganapathy
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, including a face circle, two eyes, and animated eyebrows that move continuously. It demonstrates fundamental D3.js DOM manipulation using method chaining with `d3.select` and `svg.append`, setting attributes like `r`, `cx`, `cy`, `fill`, and `stroke` on circle elements. The code uses D3 v5 from the `d3` module, importing `select` and `arc` (though `arc` is not used in the visible code). The face is rendered in a fixed 960x500 SVG canvas, with eye positions calculated from the width and height.

SShuai Shao
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple smiley face using D3.js, with a yellow circle for the head, black circles for the eyes, and an arc for the mouth. The code uses D3’s `select` and `arc` APIs to create and position SVG elements, relying on the `attr` method to set coordinates and dimensions based on the SVG’s width and height. The face is rendered entirely in SVG, with no external data source, and serves as a basic introduction to DOM manipulation with D3.

FfizzleRaider7645
95% match
Loading thumbnail…

Let's make a face with D3

This example uses D3 v5 to render a simple yellow smiley face in SVG, with black circular eyes and a mouth drawn as an arc. The code demonstrates core D3 selection and joining through `select`, chained `.attr()` methods for styling, and the `arc()` generator to create the mouth path. It sets up a group element (`g`) translated to the center of a 960×500 SVG canvas, positions elements with explicit pixel coordinates, and relies on `d3.min.js` from unpkg. The face is static, showing SVG primitives without data binding or interactivity.

AAnuj Saboo
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built with basic SVG shapes in D3.js, including a yellow circle for the head, two eyes, and an arc-based mouth. The eyebrows animate vertically in a looping transition using `transition()` and `attr()` to move a rectangle group, demonstrating fundamental DOM manipulation with `d3.select` and `d3.arc`. The code uses D3 v5 and renders entirely in SVG, with the face centered using SVG transform attributes.

Nnvelden
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic DOM manipulation with D3.js by building a static smiley face from SVG shapes. It draws a yellow circle for the head, two black circles for the eyes, and an arc-generated mouth using the `d3.arc` API with specified inner and outer radii. The code highlights fundamental selection and attribute-setting patterns, such as `select`, `append`, and `.attr`. Although the title suggests eyebrows that move, the provided code only renders the face without any animated or interactive behavior.

Mmaber77
94% match