Ejercicio 1 LAB04 Mario

100%

Ejercicio 1 LAB04 Mario

✓ Published0🌍 Public

Last edited May 11, 2021

Created on May 6, 2021

This example uses D3 v4 to draw a simple cartoon face from static SVG shapes. A yellow circle serves as the head, with two ellipses for eyes and a thin rectangle for the mouth, all positioned relative to the SVG’s 500x400 dimensions. The code directly appends elements using `select` and `attr`, setting coordinates and styling properties such as fill and stroke. The accompanying `data.json` file is present but is not loaded or referenced in the visualization, and no axes or scales are used.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

Ppablocenfo

83% match

Loading thumbnail…

Lab04_MerceEscalante Ejercicio #1

This example displays a simple yellow smiley face drawn with SVG shapes, centered within a 500×400 canvas. The construction uses D3 v6 selection and attribute methods to position a yellow circle for the head, two black circles for the eyes, and a red rectangle for the mouth. The code calculates all coordinates relative to the SVG’s width and height, ensuring the face remains centered. It relies on D3’s append and attr functions exclusively for creating and styling the visual elements.

MMerceEscalante

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

78% match

Loading thumbnail…

Lets make a face with D3.js

VVarun Khanna

78% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a simple cartoon face entirely from SVG shapes. It draws a yellow circle for the head and two black circles for eyes, with positions calculated relative to the SVG’s width and height. The code imports `select` and `arc` from D3, though only `select` is used to append and style the elements. Eye spacing and vertical offset are defined as constants, demonstrating how D3’s attribute chaining builds static visuals with minimal data.

Jjbrauckman

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

78% match

Loading thumbnail…

Let's make a face with D3.js

This example constructs a cartoon face out of basic SVG shapes, including a yellow circle for the head, two eyes, eyebrows, and an arc-based mouth. It demonstrates how to build and position SVG elements using D3.js v5, selecting the `<svg>` element and appending groups and shapes with transformation attributes. The code uses the `arc` generator from D3 to create the mouth path, while circles and rectangles are placed manually via coordinate offsets. The dataset is a static, hardcoded set of shape definitions rather than external data, emphasizing SVG drawing techniques over data binding.

Jjeffko18

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

78% match