Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Nov 6, 2019

Created on Nov 6, 2019

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

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

95% match

Loading thumbnail…

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.

TTheRoadSign

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

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

烽烽火戏猪猴

93% 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 on an SVG canvas. It draws a yellow circle at a specified coordinate using the `d3.select` and `svg.append` APIs, while setting attributes like `cx`, `cy`, and `fill` to position and style the shape. The code also defines the SVG dimensions (960x500) and starts to set the circle's radius, though the sketch is incomplete. It shows how D3’s selection and attribute methods directly create and modify SVG elements, offering a hands-on introduction to building graphics programmatically.

LLucian-jw

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

93% match