sushmasai85

@sushmasai85·3 public vizzes

Fork of Smiley Face Part III

This example shows a smiley face built with React and D3, rendered as an SVG composed of a yellow circle for the head, two black circles for eyes, and a curved path for the mouth. It demonstrates how React manages the SVG elements while D3 provides the arc generator to create the mouth’s shape, using fixed dimensions and offsets. The visualization uses ReactDOM to mount the component and d3.arc for path generation, with all geometry defined as constants in the code.

Mar 4, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This React and SVG example draws a yellow smiley face that scales to fill the browser window. It uses `window.innerWidth` and `window.innerHeight` to center the face, with circles defining the head, eyes, and mouth. The code leverages React’s `ReactDOM.render` to update the SVG elements, which are positioned via a `transform` translate. The face is constructed from basic circle shapes with a black stroke and yellow fill, while eye and mouth radii are defined as constants. The rendering is purely declarative, with no external data source or interaction.

Mar 4, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with a black outline represents a face, positioned at the center of an SVG canvas with two smaller circles for eyes. The code uses plain SVG elements (`<circle>`) to draw the shapes, with the face as a large radius-245 circle and the eyes as radius-50 circles offset to the left and right. The `index.html` file sets the SVG dimensions to 960 by 500 pixels and hides the page margin and overflow via CSS. No JavaScript or external libraries are used; the visualization is purely static markup.

Mar 4, 2022