Kate Baya

@kate-baya·3 public vizzes

Fork of Fork of Hello HTML

This example shows a simple cartoon face composed of SVG shapes, built with React and rendered through a reusable component structure. A yellow circle forms the background, with two black eye circles positioned by offset values and a mouth drawn as an arc using the `d3.arc` API from d3.v5. The `FaceContainer` component wraps all elements in an SVG group, translating them to the canvas center. The code defines separate components for each facial feature, demonstrating modular composition. The rendering approach uses React DOM to inject the final SVG into the page, combining declarative React syntax with D3’s geometric arc calculations.

Apr 10, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow smiley face rendered as SVG inside a React component, with a circular head, two eyes, and an arc-shaped mouth. It demonstrates how to integrate D3’s `arc()` generator with React by computing the mouth path’s `d` attribute from angular values. The code uses React 16.9 for component structure, D3 v5 for the arc geometry, and renders everything through ReactDOM into a full-viewport SVG with fixed dimensions of 960 by 500 pixels.

Apr 10, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a blank HTML page, demonstrating the minimal structure required for a web document. It uses only the core `<html>`, `<head>`, and `<body>` tags with no external libraries or scripts. The page does not render any data, visual elements, or interactive behavior. It serves as a basic starting point for building more complex visualizations, with the code consisting solely of standard HTML markup in an `index.html` file.

Apr 10, 2021