jklemke

@jklemke·6 public vizzes

Smiley Face 006 compartmentalizing

Two SVG smiley faces illustrate how React components can compartmentalize D3-generated geometry. The code builds a standard smiling face and a winking variant with a dimpled mouth, using D3's `arc()` and `line()` generators to create paths within reusable React components. Each facial feature—eyes, mouth, face circle—is its own component, demonstrating modular composition of SVG elements while keeping D3 and React separate concerns.

Nov 19, 2020

Loading thumbnail…

Smiley Face 005 multiple files

A smiling face built from SVG primitives, combining a yellow circular head with a winking eye, an open eye, and an arc-shaped mouth. The composition uses React components to organize the drawing, while d3 v6 utilities generate the path data: `d3.line` creates the wink’s straight stroke, and `d3.arc` forms the mouth’s curved outline. The entire figure is centered within a 960 by 500 viewport using a transformed group.

Nov 4, 2020

Loading thumbnail…

Smiley Face 003 tweaked

A stylized smiley face rendered as an SVG, centered on a yellow circle with black strokes for the head, eyes, and a curved mouth, plus a small dimple arc to the side. Built with React and D3 v6, the code uses `d3.arc` to generate the mouth and dimple paths, `d3.line` for the winking eye, and computes geometry from fixed dimensions to position all elements relative to the viewport center.

Nov 4, 2020

Loading thumbnail…

Smiley Face 003

This example shows a classic smiley face rendered as an SVG graphic. A large yellow circle with a black outline forms the head, while two smaller filled circles serve as eyes and an arc-shaped path creates the smile. The visualization uses React to define the component structure and d3’s `arc` generator to compute the mouth’s path based on specified inner and outer radii and start/end angles. The face is centered within a fixed 960 by 500 viewport using SVG transforms and circle elements.

Nov 4, 2020

Loading thumbnail…

Smiley Face 002

This example renders a smiley face as a single SVG graphic using React and ReactDOM. It draws a yellow circle for the head and two smaller black circles for the eyes, with dimensions computed from fixed constants for the canvas size and stroke width. The React component returns SVG elements directly, and ReactDOM.render mounts it into the root div, with the head circle centered and positioned using coordinate math.

Nov 4, 2020

Loading thumbnail…

Smiley Face 001

A smiley face rendered in SVG displays a yellow circle with a black outline, two filled black eyes, and no mouth. The graphic is constructed with three `<circle>` elements positioned within an SVG canvas sized 960 by 500 pixels. The main face uses a 200-pixel radius and a 10-pixel stroke, while each eye is a 35-pixel radius circle placed symmetrically around the center. The code includes a minimal HTML page with inline styles and a console log that runs in the browser’s developer tools.

Nov 4, 2020