khannoorb

@khannoorb·7 public vizzes

Yaseens fork 1

A static SVG renders a yellow circle with a thick black stroke as a face, positioned at the center of a 960 by 500 canvas. Two small black circles serve as eyes, placed symmetrically above the center. A mouth is drawn using a `d3.arc` path with inner and outer radii, spanning a half-circle arc from π/2 to 3π/2. The visualization uses React for component structure and D3 v7’s `arc` API, with all shapes defined declaratively in SVG.

Feb 8, 2022

Loading thumbnail…

Fork of Smiley Face Part I

This example shows the first stage of a smiley face, rendered as a simple SVG composition with a yellow circular head, two black eyes, and an open mouth arc. The code uses React to define the component tree and D3’s `arc()` generator to compute the mouth path between specified start and end angles. The head is drawn as a circle with a thick yellow fill and black stroke, while the eyes are positioned with fixed offsets from the center. The rendering approach is SVG, with D3 v7 and React 17 loaded via UMD bundles in the HTML.

Feb 8, 2022

Loading thumbnail…

Fork of ugly boy

This example shows a simple, quirky face composed of SVG shapes: a yellow circle for the head, two smaller black circles for eyes, and an outlined stroke. Rendered through a static SVG element in the HTML, it uses React and ReactDOM to manage the page context, though the core visual is hardcoded with D3 v7 loaded via CDN. The piece demonstrates basic SVG styling and geometric placement, with the code commenting on centering calculations for the eye offsets.

Jan 19, 2022

Loading thumbnail…

ugly boy

The visualization displays a simple yellow face constructed from three SVG circles, with two smaller circles representing eyes placed on a larger circular head. The code renders this static SVG directly in the HTML using React and D3 v7 libraries, with the SVG elements defined inline in the markup. It demonstrates basic SVG shape rendering without any interactive or animated behavior, relying solely on hardcoded coordinates and styling properties within the SVG element.

Jan 19, 2022

Loading thumbnail…

Fork of HTML Starter

This example renders a minimal HTML page with embedded CSS and JavaScript, demonstrating the fundamental structure of a web-based visualization. The code defines an empty HTML document with a style block and a script tag, providing a blank canvas for adding custom visualizations. It uses plain DOM elements and JavaScript without any external libraries or frameworks, highlighting the bare essentials needed to build a data visualization. The page includes a connection to a React Starter example, though it currently contains no rendering logic or data processing.

Jan 16, 2022

Loading thumbnail…

Fork of Fork of

This example displays a grid of fifty small, green rounded squares that are added directly to the page body. The code uses plain HTML and CSS for styling, while a simple JavaScript `for` loop with `document.createElement` and `document.body.append` generates the squares. Each square is a fixed-size `div` element, and the layout wraps them using CSS `flex-wrap`. No external libraries or data sources are used; the visualization is purely a procedural arrangement of styled elements.

Jan 16, 2022

Loading thumbnail…

Fork of

This example displays a grid of small, green rounded squares that fill the browser window. The page uses plain JavaScript to create and append 50 div elements to the document body via a `for` loop, relying on the DOM API `document.createElement` and `document.body.append`. Each square has a fixed 84-pixel size and margin, positioned automatically with CSS flexbox wrapping. The visual result is a simple, uniform pattern of tiles without any interactive behavior or data-driven logic.

Jan 16, 2022