Dawn

@dlglxPsun·5 public vizzes

Fork of Fork of Smiley Face Part IV

This example renders a yellow smiley face with black outlines and a mouth using React and D3. It builds the face inside an SVG element, positioning a background circle, two eyes, and a mouth path around a central group. The code uses React components to define the SVG structure and the `arc()` function from D3 to generate the mouth shape based on specified inner and outer radii and angle ranges. The visual is static, with no interactivity or data binding, and relies on hardcoded dimensions for the face geometry.

Jun 13, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a smiley face drawn with SVG shapes, centered in a yellow circle with a black outline, two eyes, and a mouth formed by an arc. It uses React components to structure the SVG, with D3’s `arc` generator creating the mouth path based on inner and outer radii and start/end angles. The code defines fixed dimensions for the canvas, eye offsets, and radii, then renders the scene through `ReactDOM.render` into the root element.

Jun 13, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This interactive visualization renders a yellow smiley face with black stroke and eyes, drawn using React and SVG within a full-window canvas. The face is centered using D3’s `arc()` function to create a full circular mouth from 0 to 2π radians, while eye and face circles are positioned with computed offsets relative to the viewport dimensions. The code composes React elements with D3’s arc generator to define the mouth path, demonstrating a hybrid approach where D3 computes geometry and React handles SVG rendering.

May 11, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A simple React application renders a yellow smiley face as an SVG graphic. It uses hard-coded coordinates and constants to draw three circles: a large face outline with a black stroke, and two smaller black circles for eyes. The code defines variables for the SVG canvas dimensions, face center, stroke width, and eye offsets, then renders the elements using JSX. The visualization demonstrates basic SVG shape composition within a React component, with no interactive or data-driven behavior.

May 6, 2021

Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline forms the face, and two smaller black circles represent the eyes. The example is built with React and rendered as inline SVG within an HTML page. The code manually sets the `cx`, `cy`, and `r` attributes for each circle, using fixed pixel coordinates to position the facial features. It uses the React and ReactDOM libraries, though the JavaScript file only logs "React" to the console, while the SVG is defined directly in the HTML.

May 6, 2021