tvhorn

@tvhorn·6 public vizzes

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces renders in React, each with varied eye positions, mouth sizes, and stroke thickness. The faces are composed of reusable React components for the background circle, eyes, mouth, and face container, which uses an SVG group transform. D3's `arc` generator creates the mouth path, while React's `range` from D3 produces the array of faces. All rendering uses SVG within a React component hierarchy.

Sep 9, 2021

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face rendered in SVG using React components for the background circle, eyes, and mouth. The D3 arc generator creates the mouth shape, while React Fragments group the eye elements. All components receive positioning and sizing props from the main App, which translates the entire group to the SVG center. The face uses fixed pixel dimensions without external data, demonstrating component-based visualization structure with ES6 module imports.

Sep 9, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

A yellow smiley face with black outline, eyes, and an arc-shaped mouth is drawn as an SVG graphic. The React component `App` renders a `<svg>` element, and a D3 `arc()` generator computes the mouth path. Circles represent the face and eyes, with a `BackgroundCircle` component wrapping a `<circle>`. The d3, React, and ReactDOM libraries are loaded via CDN, and the visualization is displayed at 960 by 500 pixels.

Sep 9, 2021

Loading thumbnail…

Smiley Face Part 1

This example shows a smiling face constructed from basic SVG shapes, rendered at 960 by 500 pixels with a yellow circle head, two offset black eye circles, and an arc-based mouth path. Using React for component structure and D3 v7's `arc()` generator to define the mouth’s curved geometry, the code sets the mouth’s inner radius to 0, outer radius to 100, and angles from 0 to π/2. React elements render these shapes into an SVG container, with all positions derived from computed center coordinates and fixed offsets.

Sep 9, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-window smiley face using React and SVG. It centers a yellow circle with a black outline for the face, and places two smaller black circles as eyes at symmetric offsets. The code computes the face radius from the window height and uses hardcoded offsets for the eyes, with ReactDOM rendering the SVG directly into the page.

Sep 9, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face is drawn on a yellow circle with two black eye circles, leaving the mouth unfinished as a work-in-progress example. The code uses plain HTML and SVG elements, including `<circle>` tags with fixed `cx`, `cy`, `r`, and `stroke` attributes, within a 960×500 viewport. It demonstrates basic vector shape composition without any JavaScript libraries or animation, rendering directly through the browser’s SVG support.

Sep 9, 2021