ddavud

@ddavud·3 public vizzes

Happy Face

A simple smiling face built with React and D3, composed of a yellow circle, two black eyes, and an arc-based mouth. The example shows how D3’s `arc` generator creates the mouth path within a React SVG component hierarchy. All shapes are rendered as SVG elements via reusable React components (`BackCircle`, `Eyes`, `Mouth`, `Face`), with the face centered using SVG transforms. The code relies on `d3.arc` for the mouth, while static props control geometry, and ReactDOM mounts the visualization to the page.

Dec 29, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and D3. It draws a yellow circle with a thick black stroke as the face, plus two black circles for eyes, positioned symmetrically around the center. The SVG dimensions and center coordinates are derived from the browser window’s inner width and height. The code uses React’s `ReactDOM.render` and D3’s `arc` import (though not directly used), with static circle elements for all shapes.

Dec 26, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This fork of Smiley Face Part II renders a classic smiley face as a React component, with a yellow circle, black outline, and two eyes, all scaled to fill the browser window. The code builds the SVG using React elements and the D3 `arc` function, though the mouth is not drawn. It uses fixed pixel offsets for eye placement and computes the face radius from the viewport height. The visualization demonstrates a simple hybrid of React for DOM rendering and D3 for SVG geometry, updating to any window size.

Dec 26, 2021