Dawit Merid

@dawitmerid·4 public vizzes

Fork of Smiley Face Part V

A modular React component builds a smiling face from separate SVG elements, including a yellow circle, two eyes, and a curved mouth. The code splits these into individual files using ES6 modules, with React Fragments grouping the eye shapes. A single `Face` component accepts configurable props for dimensions, positioning, and stroke widths. The example renders multiple copies of the face by mapping over an array, using `d3.arc` to generate the mouth path and `react-dom` to mount the composition into the DOM.

Aug 1, 2023

Loading thumbnail…

Fork of Smiley Face Part III

A smiling face rendered with SVG elements is built using React components and D3's arc generator. The visualization constructs a yellow circle for the face, two smaller circles for eyes, and a curved path for the mouth, all positioned within a centered group. D3's `arc()` API defines the mouth's inner and outer radii and angular range, while React handles component composition and SVG attribute binding. The code uses static coordinates and computed constants rather than data-driven values, producing a fixed, geometric illustration.

Jul 31, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example draws a minimalist smiley face from geometric primitives in an SVG rendered with React. A yellow circle forms the head, two smaller circles serve as eyes, and a mouth is created using D3’s `arc()` path generator with inner and outer radii. The code uses React for component rendering, D3 v7 for the arc path, and positions elements around a central translation from absolute SVG coordinates. The face is static, with no interaction or animation.

Jul 31, 2023

Loading thumbnail…

Fork of Hello HTML

A single yellow smiley face rendered in SVG occupies the center of a 960-by-500 canvas, flanked by two smaller unfilled circles that serve as eyes. The page is a minimal HTML document with an embedded `<svg>` element, not using any JavaScript libraries. The illustration uses basic SVG shapes—two `circle` elements for the face outline and eyes, with `fill="yellow"` and `stroke` attributes—defined directly in `index.html`. The README provides a link to an HTML tutorial video, and the source file is a fork of a prior example.

Jul 31, 2023