Kibegwa

@Kibegwa·3 public vizzes

Fork of Smiley face

A smiling face renders in SVG on a yellow circular background with a black stroke, open black eyes, and an arc-shaped mouth. The example composes three React components: BackgroundCircle, Eyes, and Mouth, with the mouth generated using d3’s `arc` function to create a path from specified inner and outer radii and start/end angles. The visualization is built with React and D3 v6, positioned via SVG transforms in a 960×500 viewport, and demonstrates a modular approach to constructing a simple graphic from reusable parts.

Mar 22, 2021

Loading thumbnail…

Smiley face

This example uses React and D3 v6 to render a smiley face as an SVG. The face is composed of a yellow circle for the head, two smaller circles for eyes, and a mouth drawn with a D3 arc path generator. The code positions the head and features relative to calculated center coordinates, with the arc’s inner and outer radii defining the mouth’s thickness and its angles creating the smile. All shapes are centered within a 960×500 viewport using a translated group element.

Mar 21, 2021

Loading thumbnail…

Fork of Hello HTML

This fork of the Hello HTML example presents an empty SVG canvas sized at 960 by 500 pixels, embedded directly in an HTML page with no margins or scrollbars. The visualization relies on SVG rendering within the index.html file, using no external JavaScript libraries or data sources. The page includes an embedded YouTube video on the side, though the SVG itself contains no graphical elements or interactive features. The code demonstrates the basic structure of an SVG container, ready for future content, but currently displays only a blank drawing area.

Mar 21, 2021