New Start towards js by making a face

100%

New Start towards js by making a face

✓ Published1🌍 Public

Last edited Oct 1, 2020

Created on Sep 30, 2020

This example shows a simple face built from two SVG circles using D3.js version 6. The first circle is centered in an 960x500 SVG and has a radius of 20. A second, chained circle is positioned using the height and width attributes, styled with a yellow fill and black stroke. The code demonstrates basic D3 selection and attribute chaining with `svg.append('circle')` and `.attr()`, while converting SVG attributes to numbers using the unary plus operator. A highlighted text banner below the title indicates a new beginning with D3.js.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

84% match

Loading thumbnail…

HTML Starter

A minimal SVG face rendered from basic geometric shapes. D3.js v5 is used to select the root SVG element, center a group at the canvas midpoint, and append a yellow circle with a black stroke as the head. Two small circles form the eyes, each positioned via a translation transformation, while a red arc path, created with `d3.arc` using specified inner and outer radii and angle bounds, serves as the mouth. The example demonstrates foundational D3 selection, attribute setting, and shape construction within a bare HTML page using React as the framework.

AAnimesh Nautiyal

83% match

Loading thumbnail…

lets make a face with d3

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.

Aanimro

83% match

Loading thumbnail…

Lets make a face

This example creates a simple face-like shape using D3.js version 5. It selects an SVG element and appends a single circle, setting its radius to half the SVG height and centering it at the midpoint of the 960 by 500 canvas. The code uses d3.select and d3-selection's append and attr methods to position the circle without any data or interactive features. The rendering is done through SVG, with the circle drawn statically at load time.

MMilan Panchal

82% match

Loading thumbnail…

face_d3_start

This example shows a simple cartoon face drawn with SVG, featuring a yellow circular head, two black eyes, and a curved mouth. The face is centered within a 960×500 SVG canvas. The code uses D3 v6’s `select` and `arc` APIs to construct the shapes, with the mouth built via an arc generator specifying inner and outer radii and angular extents. Colored fills and strokes are applied through SVG attributes, while a CSS rule removes page margins for full-bleed rendering.

Jjyotigpt790

82% match

Loading thumbnail…

face making with D3.js

A face composed of basic SVG shapes appears on a yellow circle with black outlined strokes, including two circular eyes and an arc-shaped mouth. The code uses D3.js v6 to select the SVG element, append circles with fixed radius and center coordinates, and construct a mouth path using the `d3.arc()` function. The rendering occurs entirely through SVG attributes, with the face centered within a 960 by 500 viewport.

Nnexus1058

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

82% match

Loading thumbnail…

Let's make a face with D3.js!

This example creates a simple cartoon face out of SVG shapes. Three circles—two small ones for eyes and a larger one for the face—are drawn on a grey background. The face is rendered using D3.js version 5’s selection and styling methods, with the `d3.select` API applying a background color to the SVG element. The code relies on standard SVG circle elements with fill and stroke attributes to construct the visual.

Jjcintolo

82% match