aishwaryshivgan

@aishwaryshivgan·5 public vizzes

Fork of Smiley Face Part V

This visualization shows a smiley face composed of a yellow background circle, two eyes, and a mouth, all rendered as SVG elements in a React application. It splits React components into separate ES6 modules with distinct files for the background, eyes, and mouth. The code uses React fragments for grouping elements and D3’s `arc()` function to draw the mouth’s path, with all shapes positioned via SVG transforms.

Aug 11, 2022

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a yellow smiley face with two black eyes and a thick smile, rendered as an SVG graphic. The face is constructed using React components that wrap D3 shape functions, with circles for the eyes and a path generated by `d3.arc()` for the mouth. The `BackgroundCircle` component defines the main head, while the SVG coordinate system is centered using a transform. The code uses D3 v5 and React 16.9, with all dimensions and positions defined as constants.

Jul 27, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This visualization renders a yellow smiley face that fills the browser viewport, with eyes and a mouth drawn as black shapes on a yellow circular face with a black outline. The face is built using React components that generate an SVG, while D3’s `arc` function defines the mouth as a partial ring with specified inner and outer radii and angle ranges. The entire group is rotated 180 degrees, and dimensions like eye offset, eye radius, and stroke width are calculated from the window size. The code uses React 16.9, ReactDOM, and d3.v7.

Jul 27, 2022

Loading thumbnail…

Fork of Let's Make a Face Part II

This example shows a simple smiley face built from SVG circles, with a yellow face and two black eyes positioned symmetrically around the center. The app uses React and ReactDOM to render the SVG into the DOM, calculating all coordinates from width, height, and offset constants. The code sets explicit pixel values for the face radius, eye offsets, and stroke width, demonstrating how to compose basic shapes with React’s JSX syntax and SVG attributes.

Jul 26, 2022

Loading thumbnail…

SIMLEY FACE PART ONE

A yellow circle with a black outline and two smaller black circles forms a simple smiley face. The visualization is built using an inline SVG element within an HTML page. It draws three distinct `circle` shapes directly in the SVG markup, setting the face's size, position, and colors through attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. The page uses no additional libraries, relying solely on native SVG rendering within the browser.

Jul 25, 2022