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 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.

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 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.

烽烽火戏猪猴
97% 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
96% 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
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiley face with a yellow head, black eyes, and an arc-shaped mouth. The face is centered using an SVG group with a translate transform, with eye positions defined by fixed spacing offsets. The code uses D3 selections like `select` and `append`, plus the `d3.arc` API to generate the mouth path. All elements are rendered as static SVG shapes without animations or interactivity.

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

Let's make a face with D3.js!

This example demonstrates how to build a smiley face with D3.js, using SVG elements for rendering. It shows a yellow circle with eyes, eyebrows, and a mouth, where the eyebrows are positioned as rectangles. The code uses `d3.select`, `d3.append`, and `d3.arc` to construct the shapes, with attributes set manually for placement. The face is centered via a translation on a group element, and the mouth is drawn as an arc path. The example highlights fundamental DOM manipulation and SVG shape creation in D3.

Mminimartzz
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 fundamental DOM manipulation with D3.js by constructing a yellow smiley face from SVG shapes, including a fixed circular head, eyes, and an arc-based mouth. The face’s eyebrows are not animated, but the code shows how to position elements using SVG transforms and attributes. It uses d3.select to bind the SVG element, d3.arc for the mouth path, and imports select and arc from the D3 v5 library. The visual output is a static, centered face rendered entirely in SVG, with dimensions taken directly from the HTML attributes.

PPierre_T
95% match