Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published1🌍 Public
PPiotrekW2
Last edited Feb 19, 2019
Created on Feb 19, 2019

This example uses D3.js v5 and SVG to draw a simple, stylized face on a 960×500 pixel canvas. The code creates a single yellow circle with a black outline, centered both horizontally and vertically, by setting the radius to half the SVG height. It demonstrates basic SVG shape construction and attribute manipulation through D3's `select` and `append` methods, using the `attr` function to position and style the circle. No data source is involved; the visualization is purely programmatic.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple face on an SVG canvas. It creates a single yellow circle with a black stroke, positioned at the center of a 960-by-500 pixel SVG element. The code retrieves the SVG’s dimensions via `attr` calls and uses `svg.append('circle')` to place the shape, setting its radius to half the canvas height. The visualization demonstrates basic SVG shape construction with D3’s selection and attribute methods.

PPiotrekW2
97% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle is drawn in the center of an SVG canvas to form the base of a face. The example demonstrates how to select an SVG element and append a circle using D3 v5, setting its radius and position with the `attr` method. The circle's coordinates are computed from the SVG's width and height, though the horizontal position uses 968 instead of the actual 960, creating a slight offset. Styling is handled through a linked CSS file that sets the body margin and defines classes for future path elements.

EEntropy314
93% match
Loading thumbnail…

Let's make a face with D3.js

This example draws a simple cartoon face using D3.js and SVG. It shows a yellow circle for the head with two smaller black circles as eyes, positioned symmetrically using predefined spacing offsets. The code uses D3’s `select` and `append` methods to create and configure SVG elements, reading the width and height attributes directly from the HTML. Styling is handled with CSS classes for stroke properties, though the face itself relies on inline attributes.

Bblueglasses1995
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with a black outline forms a simple face in the center of an SVG canvas, demonstrating basic D3.js shape creation. The code uses `d3.select` to target the SVG element, reads its width and height attributes, and appends a circle with `svg.append('circle')`, setting its radius, center coordinates, fill color, and stroke. The example shows how D3 v5 manipulates SVG attributes directly to render a single geometric shape without data binding or interactivity, serving as an introductory exercise in the library’s core selection and append methods.

DD2552
93% match
Loading thumbnail…

Let's make a face

This example uses D3.js (v6) to draw a simple, stylized face on an SVG canvas. A yellow circle forms the head, with two black eyes and rectangular eyebrows positioned symmetrically, and a mouth created using the `d3.arc` path generator. The face is centered within the 960x500 viewport via a translated group element. All shapes are appended directly using D3 selection methods, with hardcoded pixel values for spacing and dimensions.

OOnur
93% match
Loading thumbnail…

Let's make a face with D3.js!

A face is drawn using simple SVG shapes: a large yellow circle for the head, with two smaller black circles for eyes positioned symmetrically around the center. The D3.js v5 library is used to select the SVG element and append these circles, with coordinates calculated from the SVG's width and height attributes. The example demonstrates basic D3 shape creation and attribute manipulation, with the rendering handled entirely by SVG in an HTML document.

Sshallowater
93% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to construct a simple cartoon face using SVG shapes. The code builds a yellow circle for the head and two black circles for the eyes, all positioned relative to the SVG's width and height. It uses D3.js version 5's selection and attribute methods—`select`, `append`, and `attr`—to create and style the shapes dynamically. The styling is handled through inline attributes for stroke and fill, with the SVG canvas set to 960 by 500 pixels.

Kkenneth
93% match
Loading thumbnail…

Let's make a face with D3.js!

A single yellow circle with a black outline is drawn at the center of an SVG, forming a simple face. The circle’s radius is set to half the SVG height, with its center positioned using the width and height attributes. Using D3.js v5, the `select` method targets the SVG, and `append` creates the circle, setting its fill and stroke. The example demonstrates basic SVG shape creation and attribute manipulation with D3’s declarative chaining.

Mmisferswift
93% match