makecs50

@makecs50·3 public vizzes

Fork of Hello HTML

This example shows a yellow smiley face rendered as an SVG using React components. The face consists of a background circle, two eyes, and an arc-based mouth, all positioned in a central group. It uses D3’s `arc` generator to define the mouth shape, with React managing the component structure and props for coordinates and radii. Rendering relies on ReactDOM to mount the app into a root div, with D3 v6 loaded externally for the arc calculation. The visualization demonstrates static vector graphics with no interactivity or data binding.

May 31, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This visualization displays three identical smiley faces rendered side by side, each composed of a yellow circular head with dark eyes and an arc-based mouth. The example demonstrates how React components structure the SVG output while D3’s `arc()` generator computes the mouth’s path data, defining inner and outer radii along with start and end angles. Each face is drawn with scaled radii and offsets, showing a simple reusable pattern for composing geometric shapes through layered `<circle>` and `<path>` elements within transformed coordinate groups.

Mar 24, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example demonstrates a minimal, oversized circle drawn as the first step toward constructing a smiley face, with a static "hello" label placed below it. The SVG’s width is fixed at 500 units while its height is set to 50, causing the circle’s radius of 245 to overflow the viewport and render as a partial arc. The page uses an inline `<svg>` element with a `<circle>` tag, no JavaScript libraries or data sources, and CSS to hide body margins and scrollbars. The rendering approach is plain SVG without D3.

Mar 23, 2021