Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Sep 22, 2019

Created on Sep 22, 2019

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

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 shows a static smiley face built with SVG shapes: a yellow circle for the head, black circles for the eyes, and a curved line for the mouth. The code demonstrates fundamental DOM manipulation by using D3.js v5 selection and append methods to create and position each shape. It draws directly from the index.js file, which uses `select` and `append` to construct elements on an SVG canvas, with coordinates derived from the `width` and `height` attributes. The project is minimal, focusing on basic shape creation rather than interactive or animated behavior.

Mmirna981

96% 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 simple smiley face from basic SVG shapes. A yellow circle forms the face, centered within an SVG canvas using the `width` and `height` attributes. The code uses `d3.select` and `d3.append` to add the circle, setting its radius, position, fill, and stroke via `.attr()`. Though the README mentions moving eyebrows, the visible code only renders the static face. Data comes from hardcoded attribute values rather than an external dataset, showcasing D3’s core selection and chaining methods with d3.v6.

Ddanieldh206

96% 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

96% match

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.

烽烽火戏猪猴

96% 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

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing a smiley face from SVG shapes, with a gentle animation of its eyebrows. The code builds a yellow circle head, eyes, and a mouth using D3’s `select`, `attr`, and an `arc` generator for the path. The eyebrow rectangles transition vertically via chained `transition().duration(2000)` calls, moving them down and back up. It uses D3 v5, rendering to a static SVG canvas with no external data, focusing purely on programmatic element creation and animation.

Nnshedd

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face constructed entirely with D3.js demonstrates fundamental SVG DOM manipulation. The static yellow circle, eyes, and arc-based mouth are created using d3.select, d3.append, and the d3.arc shape generator. The eyebrows, rendered as rectangles within a translated group, animate upward and back down over two seconds using chained transition().duration() calls. The example highlights basic data-binding-free element creation and attribute setting within an SVG canvas.

RRoyCsuka

96% match