AliUrden

@AliUrden·5 public vizzes

Fork of Smiley Face Part-3 (React and d3)

This example shows a simple smiley face rendered as an SVG, with a yellow circle for the head, two black circles for eyes, and an arc-shaped mouth. The face is built using React for component structure and d3-shape’s `arc()` helper to generate the mouth’s path. SVG group elements and the `transform` attribute position the face at the center of a 960×500 viewport. The code uses React 16.13.1, d3 v6, and ES6 template literals for the transform string.

Oct 28, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face is rendered as a scalable vector graphic, centered on a yellow circle with black outlines, two eyes, and a curved mouth. The visualization is built with React and D3, using D3’s `arc` generator to create the mouth path and SVG circle elements for the face and eyes. The SVG canvas fills the browser window, and coordinates are calculated from the viewport dimensions. The code imports React, ReactDOM, and `arc` from D3, demonstrating a straightforward combination of React’s component structure with D3’s shape-generation utilities.

Sep 15, 2021

Loading thumbnail…

Hello World

A smiling face is drawn as a yellow circle with a black outline and two smaller circles for eyes, centered within a fixed 960 by 500 canvas. This React application uses ReactDOM to render SVG shapes directly into the page. The code defines the face's dimensions, including the eye offset and radius, and applies stroke styling for the outline. The minimal HTML page loads React and ReactDOM from unpkg and renders the SVG via a bundled JavaScript file, demonstrating a basic React-to-SVG drawing workflow.

Sep 15, 2021

Loading thumbnail…

Hello World

This example shows a simple yellow circle with two smaller black circles drawn on an SVG canvas, depicting a basic smiley face. The visualization is rendered directly in an HTML page using inline SVG elements for the shapes, with React loaded as a script dependency. The code uses static SVG `<circle>` tags with fixed coordinates and dimensions, while the React library is included but only referenced in a console log statement. The page sets its body margins to zero and hides overflow for a clean, full-viewport display.

Sep 15, 2021

Loading thumbnail…

Hello World

This example renders a simple smiling face using two SVG circles for the eyes and a larger circle for the head, drawn directly in the markup. The shapes are positioned with explicit `cx` and `cy` coordinates, sized via `r`, and styled with `fill` and `stroke` attributes. The SVG is embedded in an HTML page that uses CSS to remove body margins and hide overflow. No JavaScript or data sources are involved, making it a minimal demonstration of static vector graphics.

Sep 13, 2021