D3 Course: Face Part 1

100%

D3 Course: Face Part 1

✓ Published1🌍 Public

Last edited Jan 29, 2023

Created on Jan 29, 2023

This example demonstrates the first step of building a face using basic SVG shapes with D3.js. It displays a yellow circle as the head, two smaller black circles as eyes, and a thick black outline. The rendering uses static SVG elements within an HTML page, with dimensions hard-coded in the markup rather than computed in JavaScript. The code relies on standard SVG circle elements and CSS styling to define the visual appearance, serving as the foundation for a D3-based drawing course.

AI-generated description

Face part 1 with HTML, CSS ans SVG

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Course: Face Part 3

This example shows a stylized face built from SVG shapes using React and D3.js. It renders a yellow circle for the head, two black circles for eyes, and a curved path for a mouth, all positioned relative to a central point. The code uses ReactDOM to render the SVG element and the D3 `arc` function to generate the mouth’s path geometry with specified radii and angles. The face composition relies on fixed pixel coordinates and stroke widths, demonstrating a simple, programmatic illustration technique.

MMarta

90% match

Loading thumbnail…

D3 Course: Face Part 2

This example shows a yellow cartoon face made of three SVG circles—one for the head and two for the eyes—rendered inside a React application. The head’s position and radius are calculated from the viewport dimensions, with the eye offset and radius defined as constants. The code uses React and ReactDOM to render the SVG elements, which are drawn using standard SVG circle tags, not D3 APIs. The face is centered on a 960 by 500 pixel canvas, with the stroke width subtracted from the radius to keep the outline visible.

MMarta

89% match

Loading thumbnail…

Face D3.js

This example renders a simple face using SVG circles. A large yellow circle forms the head, with a smaller black circle serving as the left eye, positioned at the center of the canvas. The code uses D3.js version 5's selection and append methods to create and style the shapes, reading the SVG’s width and height attributes to center elements. The styling is supplemented by an external CSS file that defines stroke and color properties for the shapes.

Iimoutidi

87% match

Loading thumbnail…

D3 Intro. Making a face.

This example builds a stylized face using D3.js’ DOM manipulation and SVG elements. It creates a yellow circle as the head, then adds eyes, eyebrows, and a mouth as separate SVG shapes—circles, rectangles, and a path generated with the `arc()` generator. All features are positioned relative to the SVG center using a `<g>` group with a translation transform. The code uses D3 v5 selections (`d3.select`, `append`, `attr`) to construct the scene entirely in code, with no external data source.

Rross-fisher

86% match

Loading thumbnail…

D3js practice

This example draws a simple face using D3 version 7. A yellow circle serves as the head, with two black circles for eyes, and a path created with the `d3.arc` function forms a smile. The SVG canvas is 960 by 500 pixels, and all shapes are positioned and scaled relative to these dimensions. The code demonstrates basic SVG rendering and shape manipulation with D3's selection and attribute methods.

Sshuksbhoney

86% match

Loading thumbnail…

Intro to D3JS - Face

This example demonstrates a simple cartoon face built entirely with SVG shapes using D3.js v6, displaying a yellow circular head, black eyes, rectangular eyebrows, and a curved mouth. The code uses D3 selection methods to append and manipulate SVG elements, including `circle`, `rect`, and `path` nodes, within a centered group. The mouth is created using D3's `arc` generator with specified inner and outer radii and angles. Dimensions are read directly from the SVG attributes and converted to numbers for positioning the face components.

FFedor Sharygin

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

86% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a simple face using basic SVG shapes with D3.js. It creates a yellow circle as the head, positioned in the center of the canvas, and adds two black circles for eyes, placed symmetrically around the center. The code uses D3’s `select` and `append` APIs to manipulate the SVG elements, setting attributes like radius and fill directly. The rendering relies on D3 v6 through a bundled JavaScript file, with the SVG canvas defined at 960 by 500 pixels.

Zzhangweihua1

86% match