Skip to main content
SimilarExport ZIP
100%

Lab04_MerceEscalante Ejercicio #1

✓ Published0🌍 Public
MMerceEscalante
Last edited May 14, 2021
Created on May 9, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Exercise 1

A simple yellow smiley face rendered as an SVG, with black outlined circular head, two eyes, an elliptical nose, and a curved mouth arc. The visualization is built using React for component structure and D3 v7’s `arc` generator to define the mouth path. The SVG is centered on a 960×500 canvas, with all shapes positioned relative to the center point, and the mouth arc spans a half-circle using specified inner and outer radii.

AAhmed Fathi
84% match
Loading thumbnail…

Lets make a face with with D3.JS

This example shows how to draw a simple smiley face using D3.js and SVG. It renders a yellow circular head with two black eyes and a curved mouth, all positioned within an SVG canvas that is 960 pixels wide and 500 pixels tall. The code uses D3 selections and the `arc` generator from `d3` to create the mouth shape, while other elements are drawn with basic SVG `circle` primitives. The example demonstrates coordinate manipulation with hardcoded offsets and demonstrates D3’s ability to generate complex paths with relative ease.

MMthandazo Ndhlovu
84% match
Loading thumbnail…

drawing with d3

This example shows a yellow smiley face drawn with D3.js, centered in an SVG canvas with a black outline. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending a group for centering, and adding a circle with fixed attributes. Using d3.select and d3.arc from the v5 module, it sets the circle’s radius to half the SVG’s height. The rendering relies on SVG primitives, with styles defined in an external stylesheet that removes margins and hides overflow. No interactive features or animated eyebrows are implemented in the provided files.

王王神鐸
83% match
Loading thumbnail…

MAKE A SMILEY FACE

This example displays a yellow smiley face with black-outlined circular eyes and a mouth, drawn as an SVG graphic. The face is centered on a 1000 by 600 pixel canvas, with the head and features positioned using computed coordinates rather than hard-coded values. The visualization uses React to render the SVG elements, while D3’s `arc` function defines the mouth as a full circular path. Eye size, offset, and stroke width are all specified as named constants, demonstrating a modular approach to constructing a static vector illustration.

Rrayhanu23
83% match
Loading thumbnail…

Smiling Face

This example displays a classic yellow smiley face centered within an SVG canvas. The face is constructed from a large yellow circle with a black stroke, two smaller circles for eyes, and two rectangles as eyelids. The mouth is created using D3's arc API with defined inner and outer radii and specific angles. The React-based code leverages D3 v5’s select function to manipulate the SVG elements directly.

Llrakla
83% match
Loading thumbnail…

Smiley Face

This example draws a simple smiley face entirely with SVG shapes: a yellow circle for the head, two black circles for the eyes, and an arc for the mouth. The layout is computed from the SVG’s width and height attributes, with fixed constants for eye spacing and altitude. It uses D3 v7’s `select` and `arc` helpers, applying `attr` to position each element and `path` with an arc generator to define the mouth’s curved geometry.

Wwisam-ahmed
83% match
Loading thumbnail…

D3.js Starter

This example renders a smiley face in an SVG canvas using D3.js version 5. It draws a yellow circle for the head, two black circles for the eyes, and a semi-circular path for the mouth, all positioned via width and height attributes retrieved from the SVG element. The code uses d3.select to append shapes and d3.arc to generate the mouth path, with styles defined in an external CSS file. It demonstrates basic SVG manipulation and shape generation within a React framework using D3’s selection and arc APIs.

Mmballestiero
83% match
Loading thumbnail…

Lets make a face

A yellow smiley face is drawn on an SVG canvas using D3.js selection and arc methods. The face includes circles for eyes and a path for the mouth, while rectangular eyebrows animate vertically through chained transition calls over two-second intervals. This example demonstrates fundamental DOM manipulation by building shapes from appended SVG elements and updating their attributes with D3 transitions.

BBreu1995
83% match