Tim Martinez

@tmartinez52·3 public vizzes

Fork of Fork of Smily Face Part III

This example renders a classic smiley face using React and D3’s `arc` API to draw the mouth as a path. The SVG shows a yellow circle with black strokes for the face outline, two filled eye circles, and a semicircular mouth created from an arc with inner and outer radii. The fixed dimensions and centered transform position the elements on a 960×500 canvas, with no interactivity or data binding. The code imports `arc` from D3 v5 and uses React components to structure the SVG hierarchy.

May 22, 2021

Loading thumbnail…

Fork of Smily Face Part II

This example shows a smiling face built from three SVG circles: a large yellow face with a black stroke, and two smaller black eyes. The face is rendered using React, with ReactDOM mounting the component into a div. The code uses JSX to define the SVG elements, with coordinates and radii calculated from JavaScript variables for the center, eye offsets, and stroke width. The page layout is minimal, with the SVG taking the full viewport.

May 22, 2021

Loading thumbnail…

Smily Face Part I

This example renders a smiling face as a set of overlapping SVG circles using React and ReactDOM. It draws a large yellow circle with a black stroke for the face, plus two smaller black circles for the eyes, all positioned via fixed coordinates on a 960×500 viewBox. The code uses React’s JSX syntax to declaratively define each circle element, mirroring an equivalent static SVG markup commented out in the HTML file.

May 22, 2021