Skip to main content
SimilarExport ZIP
100%

Ejercicio 1.2 Let’s draw a face in with D3.js!

✓ Published2🌍 Public
Ppablocenfo
Last edited May 4, 2020
Created on May 4, 2020

This example draws a simple cartoon face in an SVG canvas using D3.js v5. It shows a yellow circle for the head, two black ellipses for eyes, and a black rectangle for the mouth. The code uses D3 selections and the `.attr()` method to position these shapes, calculating coordinates from the SVG’s width and height attributes. The face is centered, with eye spacing and offsets hardcoded for a symmetric layout. No data is loaded; all elements are created programmatically. Styles are applied via CSS for stroke properties.

AI-generated description
MIT Licensed

Similar vizzes

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

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple cartoon face in an SVG canvas, assembling circles and an arc path with basic shape attributes. The face is constructed with a yellow head circle, black eye circles spaced symmetrically, and a mouth created using the `d3.arc` generator with specified inner and outer radii and angular bounds. The code imports `select` and `arc` from D3, sets dimensions dynamically from the SVG, and positions elements relative to the viewport center. The rendering approach is purely SVG-based, with static styling applied via attributes and a minimal CSS file.

Aadelgrosso
86% match
Loading thumbnail…

Lets Make a Face!

This example draws a simple cartoon face using D3.js version 5 and SVG. It renders a yellow circle for the head, two black ellipses for eyes, and an empty path for the mouth. The code uses D3’s `select` and `attr` methods to position each shape based on the SVG’s fixed width of 960 and height of 500. All elements are placed with relative coordinates, such as `width/2.5` for the left eye, demonstrating basic geometric composition through SVG primitives.

Vvpruden1
86% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a simple cartoon face in an SVG canvas. It first creates a large yellow circle for the head, then positions two smaller circles as eyes, and finally adds a line for the mouth. The code relies on D3.js version 5 and directly appends SVG shapes using methods like `svg.append('circle')` and `svg.append('line')`, with attributes set via `.attr()`. Dimensions are derived from the SVG element's width and height attributes.

Pphpedro
86% match
Loading thumbnail…

Lets make a face with d3.js

This example uses D3.js (v5) to construct a simple cartoon face directly in an SVG canvas. The code draws a yellow circle for the head, two black circles for eyes, and a path for the mouth, with the mouth generated using D3’s arc generator with specified inner and outer radii and angle ranges. All shapes are positioned relative to the SVG’s width and height, and the styles are defined in a separate CSS file. The example demonstrates basic SVG shape creation and attribute manipulation with D3’s selection and append methods.

Ddktaylor916
86% 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
85% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a cartoon face using SVG shapes composed with D3 v5. A yellow circle forms the head, while two smaller circles create the eyes and rectangles serve as eyebrows, all positioned relative to a centered group. The mouth is a path generated with the `d3.arc` helper, using specific inner and outer radii and angle values. The code relies on D3’s `select` and `attr` methods to build and style the static SVG elements, with no data binding.

VVarun Khanna
85% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a cartoon face using SVG shapes composed with D3 v5. A yellow circle forms the head, while two smaller circles create the eyes and rectangles serve as eyebrows, all positioned relative to a centered group. The mouth is a path generated with the `d3.arc` helper, using specific inner and outer radii and angle values. The code relies on D3’s `select` and `attr` methods to build and style the static SVG elements, with no data binding.

VVarun Khanna
85% match