Manuel Gil

@manuelgilm·2 public vizzes

Fork of Fork of Hello HTML

A grid of eighteen smiley faces appears, each with a yellow circular head, black outlined eyes, and an arched mouth. The faces are rendered as Scalable Vector Graphics (SVG) using React components, with randomized eye offsets, eye radii, mouth widths, and mouth radii generating subtle variation across the grid. The visualization uses D3's `arc` API to construct the mouth paths, while React manages the component hierarchy and state, and `d3.range` generates the array of face instances.

Jun 25, 2021

Loading thumbnail…

Fork of Hello HTML

A React component renders a fixed yellow smiley face as SVG, with the face circle, eyes, and a mouth created from layered D3 arc paths. The example demonstrates integrating React for DOM management with D3’s `arc` generator for the mouth shape, while using inline SVG elements (circle, path) for rendering. It shows how to combine React’s declarative JSX with D3’s geometry utilities without data binding or interactivity, relying on hardcoded dimensions and offsets for a static visualization.

Jun 22, 2021