Shidrath Rahman Haider

@shidrath·4 public vizzes

Fork of Polished World Map

A polished world map displays country landmasses in teal with subtle graticules and interior borders on a light gray sphere. It uses React to render SVG marks from World Atlas TopoJSON data, processed by topojson’s `feature` and `mesh` functions. The visualization employs d3’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere, graticules, land, and country boundaries, with styling applied through CSS classes.

Mar 27, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a single yellow circle with a black outline centered within an SVG canvas, representing the basic face shape of a smiley face. The React component uses hard-coded numeric values for the circle’s position, radius, and stroke width, with the face’s features omitted from the final render. It imports React and ReactDOM to mount the SVG element into the DOM, relying on React’s JSX syntax to define the circle’s attributes. The rendering approach is purely declarative, with no external data or interaction.

Mar 26, 2022

Loading thumbnail…

Hello HTML

This example shows a simple yellow face drawn with a black outline and two black eyes on a blank canvas. The visualization uses an inline SVG element with fixed dimensions of 960 by 600 pixels, placing three circles via the SVG `circle` element. The largest circle serves as the face, with two smaller circles positioned as eyes, all styled directly through SVG attributes like `fill`, `stroke`, and `stroke-width`. The page is minimal HTML with CSS that removes body margins and hides overflow, ensuring the graphic fills the viewport without scrolling. No external libraries or data sources are involved; the rendering relies entirely on native SVG markup.

Mar 17, 2022

Loading thumbnail…

Fork of Hello HTML

A minimal SVG circle with a radius of 400 pixels is drawn inside a 960×500 viewport. The example demonstrates how to embed basic SVG markup directly in an HTML page without using any JavaScript libraries. The circle is centered by default at the origin (0,0), leaving most of its area clipped outside the visible canvas. This fork of “Hello HTML” shows the simplest possible rendering approach—raw SVG in a static document—with no interactivity or data binding. The code relies only on native HTML and SVG elements, not on D3 or other visualization frameworks.

Mar 17, 2022