tshardey

@tshardey·4 public vizzes

Fork of Smiley Face Part II

This example builds a smiley face visualization with React and D3 v7, rendering the entire face as SVG elements. The code calculates the face dimensions based on the browser window size, then positions a yellow circular head with black stroke, two eye circles at fixed offsets, and a mouth using `d3.arc()` with specified inner and outer radii. The mouth path is generated from a half-circle arc spanning 90 to 270 degrees. React manages the component structure while D3 provides the arc generator for the mouth shape.

Apr 20, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face rendered as a circle with two eyes, built using React 18 and SVG. The code defines fixed dimensions for an SVG canvas, positions the face center and eyes using calculated offsets, and draws each circle with explicit fill and stroke attributes. The face is rendered through a React component that outputs SVG elements, with the eyes lacking any fill or stroke properties, leaving them invisible against the yellow background. The example demonstrates a simple static composition without interactivity or data binding.

Apr 20, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as an SVG that scales to fit the browser window, with two black eyes positioned symmetrically on the face. Using React and ReactDOM, the code computes the center of the viewport and sets the face radius relative to the window height, while the eyes are placed at fixed offsets from that center. The SVG uses a translated coordinate group to position the circles, with the face filled in yellow and outlined with a black stroke.

Apr 20, 2022

Loading thumbnail…

Let's Make a Face

This example shows a simple face constructed from three SVG circles against a yellow background. The face comprises two small black circles for eyes and a larger yellow circle for the head, with a black outline defining its boundary. The visualization is created using a static SVG canvas with fixed coordinates and styling properties like fill color and stroke width, all implemented directly in the HTML markup. The code relies solely on the native SVG API within the browser, without any external libraries or interactive behavior.

Apr 19, 2022