coobeet

@coobeet·6 public vizzes

Let's Make a Face Part VI (Compartmentalizing Complexity)

A grid of 15 faces, each with randomized facial features, demonstrates how React components can be broken into modular files. Each face uses a yellow background circle, two eyes, and an arc-based mouth, with positions and sizes varying per instance. The code splits rendering into separate components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, using React fragments and ES6 modules. It leverages ReactDOM to render the SVG faces, while the `arc` API from d3 generates the mouth paths.

May 22, 2021

Loading thumbnail…

Let's Make a Face Part V multiple files with ES6 modules

A smiling face is rendered as a static SVG composed of modular React components: a yellow background circle, two eyes, and a mouth. The mouth is drawn using the D3 `arc` generator with fixed start and end angles. The code splits each facial feature into separate ES6 modules (`BackgroundCircle.js`, `Eyes.js`, `Mouth.js`) that are imported into the main `index.js` file, which uses ReactDOM to render the nested SVG elements inside a `<g>` transform.

May 22, 2021

Loading thumbnail…

Let's Make a Face Part IV

This example shows a classic yellow smiley face drawn with scalable vector graphics, centered in the browser window. The face is composed of a large filled circle for the head, two smaller circles for the eyes, and a curved mouth created as an arc. The visualization uses React to render the SVG elements, with dimensions and positions calculated from constant values. The mouth is generated using D3’s `arc` method, which defines an annular sector with specified inner and outer radii and angular range for a smile shape.

May 22, 2021

Loading thumbnail…

Let's Make a Face Part III

A smiling face is rendered as a fully responsive SVG using React components and D3’s `arc` generator. The face fills the browser window, with yellow circular head, black stroke, two eye circles, and a mouth path created via `d3.arc` with specified inner/outer radii and start/end angles. React handles the SVG element structure, while D3 computes the mouth’s path data. The viewport dimensions determine the head’s radius, centering it dynamically. The example demonstrates combining React’s declarative UI with D3’s geometric utilities for static SVG visualization.

May 22, 2021

Loading thumbnail…

Let's Make a Face Part II

This example presents a yellow smiley face drawn with simple geometric shapes in an SVG canvas. A large yellow circle forms the head, outlined with a black stroke, and two smaller black circles serve as the eyes. The code uses the React library, along with ReactDOM for rendering, to build the component. Explicit numeric constants define the canvas dimensions, eye placement, and stroke widths, making the layout easily adjustable. The application is structured as a set of nested `<circle>` elements within a single `<svg>` tag, demonstrating a straightforward approach to creating basic vector illustrations.

May 22, 2021

Loading thumbnail…

Let's Make a Face Part I

A yellow circle with a black outline forms a face, flanked by two smaller black circles that serve as eyes. The static SVG composition uses a 960 by 500 canvas, positioning the main face at center with a radius of 245 pixels and each eye at a radius of 50. The code relies on basic SVG `circle` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, all embedded directly in the `index.html` file. No dynamic data or external libraries are involved; the visualization is purely declarative markup.

May 22, 2021