oliver488

@oliver488·4 public vizzes

test - Make a Face Part III with React and D3

This example uses React and D3 to render a stylized face as an SVG graphic. The face features a yellow circular head, two black eyes, and a smile-like mouth created using D3’s `arc()` function with specified inner and outer radii and angular range. The React component sets fixed dimensions and positions for the face elements, while D3 generates the mouth path. The entire composition is drawn within an SVG container, with coordinates calculated relative to a central transform point.

Aug 30, 2020

Loading thumbnail…

Make a Face Part III with React and D3

This example shows a stylized cartoon face built entirely from SVG primitives, with a yellow circular head, two black eyes, and a mouth shaped as a semicircular arc. The face is centered on a 960 by 500 canvas using React components to define each element, while D3’s `arc` generator calculates the mouth’s path. All coordinates, such as eye offsets and radii, are constant, and the rendering relies on React 16 and D3 v6.

Aug 30, 2020

Loading thumbnail…

Make a Face Part II with React

Yellow-and-black SVG facial features are drawn on a 960 by 500 canvas, with a large circular face, two eyes, and an implied smile, all positioned using fixed pixel coordinates. The React component `App` renders nested `<circle>` elements for the face and eyes, computing their centers from `centerX`, `centerY`, and offset constants. React 16.13.1 and ReactDOM manage the mounting into the `#root` element, while the SVG output is structured with inline JSX attributes like `stroke-width`. The visualization demonstrates declarative, component-based geometry without external charting libraries.

Aug 30, 2020

Loading thumbnail…

Smilely Face Part I

A yellow circular face with two black eyes is drawn using SVG primitives. The face is centered in a 960 by 500 pixel viewport, with a thick black stroke outlining the yellow circle and eyes. The example demonstrates basic SVG shape rendering with `circle` elements, using static coordinates and stroke properties for a simple, flat illustration.

Aug 30, 2020