Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Jan 9, 2020

Created on Jan 9, 2020

Forked from Let's make a face with D3.js!

This example demonstrates how to construct a smiley face using D3.js version 5, focusing on fundamental DOM manipulation with SVG elements. The code explicitly appends a group and a circle element to the SVG canvas, positioning them at the center of a 960×500 viewport. It uses the `select` and `append` methods from the `d3` namespace to build the geometric face outline, with a transparent fill and black stroke. The visualization is purely programmatic, with no external data source, and includes a static smile path defined directly in the HTML markup.

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 primitives. A single circle is appended to the SVG canvas and positioned at the center with a radius of 225 pixels, though its fill is left undefined. The code uses the D3 v5 selection and append methods (`select`, `append`) to build the shape step-by-step, revealing how D3’s API interacts with SVG elements. The static face serves as a starting point for interactive features shown in an accompanying video.

FFred Kellner

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

94% 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 an SVG circle. Using the `select`, `append`, and `attr` methods from d3-selection, it sets the circle’s radius to half the SVG height and centers it via the `cx` and `cy` attributes. The code reads the SVG’s `height` and `width` attributes directly from the DOM, and runs against d3.v5 in a minimal HTML page with external styles defining the body margin and overflow. The face is static, with no interactive or animated features beyond the initial rendering.

Gghsueh01

94% 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 basic SVG shapes. The code selects the SVG element and appends a circle with a radius of 200 pixels, while the accompanying stylesheet hides body margins and overflow. Using D3 v5’s `select` and `append` methods, the visualization shows how to programmatically create and style SVG elements, with related video content explaining animated eyebrow movement.

DDiavek

94% 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 in an SVG canvas. The code selects the `<svg>` element, retrieves its width and height attributes, and positions a circle at the center using those dimensions. It uses D3’s `select` method and chained attribute setters like `attr(‘r’)`, `attr(‘cx’)`, and `attr(‘cy’)` to control the face’s radius and coordinates. The rendering relies on D3 v5 with SVG output, and the accompanying video highlights interactive eyebrow movement.

Mmerha-g-selassie

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face in SVG using D3.js v5, constructing the head, eyes, eyebrows, and mouth from geometric primitives like `circle`, `rect`, and `d3.arc`. The face is centered via SVG transforms, with the eyebrows animated upward and back down using chained `transition().duration(2000)` calls on a group element. No external data is loaded; the visualization focuses on programmatic DOM manipulation and declarative animation within an SVG canvas.

SSun-XH

94% match

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

94% 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, including a gold circle face, two black eyes with lightblue outlines, and a brown-stroked mouth drawn using the d3.arc() path generator. The face is centered within a 960×500 SVG canvas, with eye positions calculated relative to the canvas dimensions. The code uses d3.select() and chained .attr() methods to create and style each element, while a group element with a transform attribute aligns the mouth correctly.

SSnapika

94% match