rayhanu23

@rayhanu23·2 public vizzes

MAKE A SMILEY FACE

This example displays a yellow smiley face with black-outlined circular eyes and a mouth, drawn as an SVG graphic. The face is centered on a 1000 by 600 pixel canvas, with the head and features positioned using computed coordinates rather than hard-coded values. The visualization uses React to render the SVG elements, while D3’s `arc` function defines the mouth as a full circular path. Eye size, offset, and stroke width are all specified as named constants, demonstrating a modular approach to constructing a static vector illustration.

Jan 28, 2022

Loading thumbnail…

Untitled

This example visualizes a dynamic force-directed graph that gradually arranges nodes into a smiley face shape. It uses D3.js’s `d3.forceSimulation` with custom forces to pull particles toward target positions defined by a hidden image, while the Canvas API renders each node as a glowing dot. The animation begins with randomly scattered points that converge into the facial pattern, with color and opacity varying by node. The underlying target layout is derived from pixel data of a smiley face image, processed via Canvas `getImageData` to extract coordinate clusters.

Jan 25, 2022