Kay Nguyen

@k-awe-some·2 public vizzes

Fork of Smiley Face Part V (Compartmentalizing Complexity)

This example demonstrates how to compartmentalize a React component hierarchy for a simple SVG smiley face, using d3's arc generator to draw the mouth and React Fragments to group the eyes. The face is composed of separate components—FaceContainer, BackgroundCircle, Eyes, and Mouth—that pass dimensions and positions as props. With d3.v5 and React, the code renders a yellow circle with a black stroke, two black eyes, and a curved mouth, securely scaling and centering the full graphic.

May 6, 2021

Loading thumbnail…

Fork of Hello HTML

This example uses React and ReactDOM to render a static SVG scene of a yellow circle with a black outline and two smaller black circles positioned as eyes, creating a simple face. The SVG elements are defined directly within a React component and mounted into the DOM via ReactDOM's `render` method. The code also logs the React and ReactDOM objects to the console. The visualization relies on SVG's basic shape primitives (`circle` with `r`, `cx`, and `cy` attributes) and does not incorporate any external data or interaction.

May 6, 2021