Skip to main content
SimilarExport ZIP
100%

lets make a face with d3

✓ Published0🌍 Public
Aanimro
Last edited Apr 9, 2020
Created on Apr 9, 2020
Forked from Untitled

This example demonstrates a simple face constructed from two yellow circles with orange strokes on a red background within an SVG canvas. It shows how to set SVG attributes directly using D3's `select` method to append and style circles based on the existing `width` and `height` attributes. The code reads those dimensions using `attr` and positions the outer circle at the center while the inner circle is placed at fixed coordinates, highlighting basic D3 v5 selection and attribute manipulation.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

Lets make a face

This example shows a yellow circle face created with SVG, built using D3 v5 selection and attribute methods. The code appends circles to an SVG canvas, setting radius, position, fill color, and stroke properties directly through `.attr()`. It uses `d3.select` to target the SVG and reads its width and height attributes to center the face. The partially completed code includes a commented placeholder for a left eye, and the page loads D3 from a CDN with a separate stylesheet that hides overflow.

DDaniel Piqué
92% match
Loading thumbnail…

Lets make a face with d3

This example uses d3 v5 to construct a simple, stylized face entirely from SVG primitives. It draws a yellow circle for the head, two smaller circles for eyes with circular pupils, rectangular eyebrows, and a semi-circular mouth created with an arc path. The face is centered within an SVG canvas using a transform, with facial feature positions calculated relative to the center. The code relies on d3's `select` and `arc` functions, and demonstrates how to programmatically generate SVG shapes and coordinate them for a recognizable composition.

Ffaquora
92% match
Loading thumbnail…

Lets make a face

This example shows a simple face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes, positioned on a blank canvas. Using D3 v5, the code selects the root SVG element and appends each circle via `select` and `append`, setting attributes like `r`, `cx`, `cy`, `fill`, and `stroke` directly. The rendering happens entirely in SVG, with static positioning rather than any data-driven or interactive behavior. The example demonstrates basic D3 selection and shape creation within a React project setup.

Jjanine-loureiro
92% 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
92% 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
92% match
Loading thumbnail…

make a face with d3.js

A simple face built from SVG shapes using D3 v5. The code creates a yellow circle with a red stroke for the head, two eyes with white pupils, and a mouth drawn as an arc path. It uses `d3.select` and `d3.arc` to position elements at fixed coordinates on a 960×500 SVG canvas. The example demonstrates basic D3 shape generation and attribute manipulation without data binding.

DDominika Modzelewska
91% match
Loading thumbnail…

make a face with d3.js

A simple face built from SVG shapes using D3 v5. The code creates a yellow circle with a red stroke for the head, two eyes with white pupils, and a mouth drawn as an arc path. It uses `d3.select` and `d3.arc` to position elements at fixed coordinates on a 960×500 SVG canvas. The example demonstrates basic D3 shape generation and attribute manipulation without data binding.

DDominika Modzelewska
91% match