Syed Mohsin Raza Naqvi

@syedmohsinr·4 public vizzes

Fork of Smiley Face Part III

This example shows a smiling face drawn with React and D3, rendered as an SVG graphic on a yellow circular background with black stroke. The face is built using D3’s `arc` generator to create the mouth path, while the eyes are simple SVG circles positioned relative to the center. React manages the component structure, passing radius and stroke-width props to a reusable background circle component. The code uses `d3.arc` for the mouth’s curved shape and hardcoded dimensions for the face’s layout.

Jan 17, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiley face rendered as a responsive SVG, centered on the screen with yellow circular head, black outline, two eyes, and a mouth arc. The face is built using React components, with D3’s `arc()` generator creating the mouth path. D3 v7 supplies the arc shape, while React 16.9 handles the DOM updates and JSX structure. Window dimensions set the canvas size, and all positions are calculated relative to the center.

Jan 17, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This fork of the Smiley Face Part II example renders a classic smiley face as a static SVG graphic using React. The visualization shows a yellow circle with a black outline, featuring two smaller empty circles positioned as eyes. The code defines the canvas dimensions, center coordinates, and specific offsets for facial features within the React component. It leverages React and ReactDOM to render the SVG elements, with all shapes created using standard SVG circle primitives. The data is entirely specified through hardcoded constants for geometry, making it a purely illustrative example of programmatic vector drawing.

Jan 13, 2022

Loading thumbnail…

Smiley face part 1

A yellow circle with a black outline and two smaller black circles forms a simple smiley face on an SVG canvas. The example uses raw SVG elements—`circle` tags for the face and eyes—positioned via fixed `cx` and `cy` coordinates, with inline styling for stroke and fill. It renders statically in an HTML page styled by a basic CSS reset, demonstrating basic vector shape composition without any interactive or data-driven behavior.

Jan 13, 2022