deepshringi

@deepshringi·5 public vizzes

Fork of Let's Make a Face Part I

This example builds a simple smiley face using React and SVG, rendering two black eyes and a yellow circular head on a 960-by-500 canvas. The code defines SVG circle elements directly in JSX, with fixed coordinates and stroke properties, while a linked YouTube video explains the drawing process. The visualization demonstrates basic SVG shape composition without data binding or interactivity, relying on static attributes for positioning and styling. The page imports React via a UMD script and logs the React object to the console, but does not use any state or component logic.

Jan 4, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a partially completed smiley face drawn with two black-outlined eyes on a yellow circular head, with the mouth and other features intentionally omitted. The SVG markup defines a large yellow circle with a black stroke, centered at (480, 250), and two smaller eye circles positioned symmetrically on either side. The visualization uses only basic SVG elements—`circle` and `svg`—with no JavaScript libraries or data sources. It demonstrates a static, hand-coded drawing approach, emphasizing geometric placement and styling over interaction or dynamic rendering.

Jan 2, 2022

Loading thumbnail…

Fork of Smiley face part 1

This example renders a yellow smiley face using React and D3.js version 6. The face is composed of SVG circles for the head and eyes, with a mouth drawn as an arc path generated by D3's `arc()` function, which specifies inner and outer radii and start/end angles. The rendering is driven by React's `ReactDOM.render()` method, which mounts the SVG output into a root `<div>` element. The visualization demonstrates constructing a simple geometric shape from primitive D3 arc calculations within a React component.

Jan 2, 2022

Loading thumbnail…

Hello HTML

A simple SVG smiley face rendered directly in HTML, with yellow circular face, black stroke, and two smaller circles for eyes. The page uses vanilla HTML and JavaScript, logging "Hello Javascript" to the console and loading React via a CDN script tag, though React is not actively used in the rendering. The example demonstrates basic SVG element creation without any charting or data-binding libraries, serving as a minimal introduction to embedding vector graphics in a web page.

Dec 17, 2021

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal HTML page structure, containing only a document type declaration, a head section with a title, and an empty body element. The page makes no use of external libraries, data sources, or JavaScript APIs; it is purely static markup. The associated README links to a video but the code itself renders no visualization or interactive content, serving as a bare-bones starting point for web development.

Dec 16, 2021