Homework #1: Work in Progress 2

100%

Homework #1: Work in Progress 2

✓ Published2🌍 Public

Last edited Sep 18, 2019

Created on Aug 28, 2019

A static SVG cartoon face is rendered in a purple circle with black outlines, featuring two offset eyes and a mouth drawn as an arc with a straight line beneath it. Built with React and D3 v5, the visualization uses D3’s `arc` generator to define the mouth’s path, while SVG primitives like `circle`, `line`, and `path` are composed inside a translated group. The layout is computed from fixed variables for dimensions and offsets, with React managing the DOM updates.

AI-generated description

Just adding on the titles and descriptions because I was unable to delete this for some reason.

MIT Licensed

Similar vizzes

Loading thumbnail…

Homework #1: Another work in progress

A simple emoticon face rendered as a purple circle with black outlines, two eyes, and a mouth, drawn using React and SVG. The face is centered in a 960×500 viewport, with the mouth created by a d3.arc path and a thick black line. The code uses ReactDOM.render to mount the component, and d3’s arc helper to generate the mouth shape. No external data is used; all geometry is defined by fixed constants.

JJCarpenter-WPI

89% match

Loading thumbnail…

Homework #1: Work in Progress

This example shows a simple smiley face rendered as an SVG graphic using React and D3. The face consists of a yellow circle with a black stroke, two black eyes, and a mouth drawn as an arc. The code uses React to create SVG elements and the `arc` function from d3-shape to generate the mouth path. The components are positioned using React JSX, with explicit dimensions and offsets defined in the script.

JJCarpenter-WPI

89% match

Loading thumbnail…

Homework 1

This example renders a partial smiley face in a React-powered SVG canvas. The code uses D3’s `arc` function to draw a thick semi-circular mouth, with two dashed placeholder lines for eyes, all centered on a 960×500 coordinate system. The face is built programmatically using absolute coordinates and transformations, with an empty rectangle overlay. The visualization demonstrates basic geometric composition and D3’s arc path generation within a React component, though the final output is an incomplete facial sketch.

JJohel Durán Acuña

85% match

Loading thumbnail…

SVG Fundamentals

This example shows a stylized cartoon face built entirely from SVG primitives, including a yellow circle for the head, two black eye circles, and a curved mouth generated with d3’s arc generator. The face is composed through reusable React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which accept numeric props for positioning and sizing. The FaceContainer wraps all elements inside an SVG group that translates to the canvas center, while the mouth’s path is computed using d3.arc with specified inner and outer radii and angular ranges. The final rendering relies on React 18 and d3.v7, producing a static visualization without interaction or data binding.

SSerind Joshua McCue

82% match

Loading thumbnail…

Lets Make a Face with D3 Format

This example uses D3 v5 to render a simple cartoon face as an SVG. The face is constructed from primitive shapes—a yellow circle for the head, black circles for eyes, rectangles for eyebrows, and an arc for the mouth—all centered within a 900x500 viewport. The code leverages D3’s `select` API to access the SVG element and `arc` to generate the mouth’s path, with positions and sizes controlled by explicitly defined numeric constants. No external data source is used; the visualization is purely procedural, built directly through D3’s imperative SVG manipulation within a React context.

227-12-95

81% match

Loading thumbnail…

HTML Starter

This example creates a simple cartoon face in SVG using D3 v5, built within a React framework. It draws a large yellow circle as the face, two black circles for eyes, and a smile-shaped arc for the mouth. The code uses D3’s `select`, `attr`, and `append` methods to construct the SVG elements, and employs D3’s `arc` function to generate the mouth path with specified inner and outer radii and angles. Data is hardcoded; no external dataset is loaded.

IIsmael Martinez

81% match

Loading thumbnail…

SVG Creation

This example shows a stylized SVG face composed of concentric circles and an arc-based mouth, centered within a 960x500 viewport. The face includes cyan and pink eyes offset symmetrically from the center, with a stroke-defined outer boundary. Built with React, it renders SVG elements declaratively, while d3’s `arc()` generates the mouth path. Fixed coordinates and constants control all geometry, with no interactive or data-driven behavior.

DDiana Cervantes

81% match

Loading thumbnail…

assignment 1

This example renders a stylized, symmetrical face using React and D3 v7. It displays a large circular head with two outer ears, white eye scleras with black pupils, red cheeks, and a grey mouth created via the `d3.arc` path generator. The composition layers SVG ellipses, circles, and paths positioned with coordinate transforms, all drawn with static SVG elements inside a React component. The visualization relies on declarative JSX markup and D3’s `arc` helper but does not implement interaction or data binding.

KKerim

81% match