wesSE22020

@wesSE22020·4 public vizzes

Fork of Fork of Let's Make a Face Part I

Built with React and D3, this example renders a smiling face as an SVG composed of styled circles and an arc path. A yellow circle with a black stroke forms the head, while two smaller circles serve as eyes, positioned symmetrically from the center. The mouth is generated using the D3 `arc` generator with specified inner and outer radii and angular start and end points. All elements are grouped and translated to the center of the 960 by 500 viewport. The code defines dimensions and offsets as constants, demonstrating a clear separation of configuration and rendering logic.

Jan 10, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a stylized smiley face as a static SVG graphic. It shows a yellow circle with a black outline, two eyes, and a curved mouth, all centered within the viewport. The code uses React components to construct the SVG elements and the d3.arc() API to generate the mouth path. Key facial features are positioned using calculated offsets, with dimensions derived from the canvas width and height. The rendering is entirely client-side, with no external data source.

Jan 10, 2022

Loading thumbnail…

Fork of Let's make a face: part 3

This visualization displays a classic smiley face constructed from SVG shapes, with a gold circular head, black outlined stroke, two solid black eyes, and a curved mouth. It is a React component that uses D3’s `arc` generator to compute the mouth’s path, while React DOM handles rendering. The face is centered via a transform, with all coordinates derived from fixed constants. The code relies on React 17, D3 v7, and SVG rendering.

Jan 10, 2022

Loading thumbnail…

Smily Face-Part I

A static yellow smiley face is drawn as a React component using SVG circles for the face outline and two eyes. The code renders the face directly within an inline SVG element in the HTML, while a separate React app initializes with a basic "Hello JSX" heading. The face uses hard-coded coordinates for the circle positions and stroke width, and the example demonstrates manual SVG placement rather than dynamic data binding or interaction. No smile or mouth is yet included, leaving the face incomplete as indicated by the title.

Jan 9, 2022