eladabramovich

@eladabramovich·4 public vizzes

Let's Make a Face Part assignment

This example shows a partially constructed smiley face built with React and D3 v7, rendered as SVG shapes. The code draws a yellow circle for the head, adds two rotated ellipses for the eyes, and defines a mouth arc using D3’s `arc()` generator, though the mouth path is commented out. The face is centered via a transform, with fixed radius and offsets for facial features. No interactive behavior or data binding is present; it demonstrates static shape composition using React components and D3’s geometry utilities.

May 15, 2023

Loading thumbnail…

Let's Make a Face Part III

This example renders a yellow smiley face with black-outlined circular features using React and SVG. The face, eyes, and mouth are drawn with basic shapes: two `circle` elements for the eyes and a `path` generated by the `d3.arc()` API for the mouth. The D3 arc’s inner and outer radii, along with start and end angles, define a half-circle smile. The layout uses fixed coordinates for positioning within an SVG canvas, demonstrating a simple composition of geometric primitives.

May 15, 2023

Loading thumbnail…

Let's Make a Face Part II

A face is drawn as a yellow circle with a black outline, accompanied by two smaller black circles serving as eyes, positioned symmetrically around the center. The visualization is built with React, using inline SVG elements to render the shapes, with all coordinates and dimensions defined as constants. The React `render` method places the composed SVG into a root `<div>` element, and the page imports React and ReactDOM from unpkg CDN links.

May 15, 2023

Loading thumbnail…

Samilly face part 1

A yellow circle with a black outline forms the head, while two smaller black circles serve as eyes on a smiling face. The example demonstrates basic SVG rendering using hardcoded circle elements within a 960 by 500 viewport, positioned to create a simple cartoon-like portrait. It functions as a minimal static illustration, with no interaction or animation, and relies solely on native SVG markup embedded in an HTML page rather than any external JavaScript libraries or data processing.

May 15, 2023