Asad Zaman

@ixaman·3 public vizzes

Fork of Pathetic Bar Chart

This example renders the top 10 most populous countries as a bar chart with no axes, labels, or scales visible, creating a deliberately minimal and “pathetic” visualization. Built with React and D3 v5, it uses `d3.csv` to load UN World Population Prospects 2019 data, then maps the population values to bar widths via `scaleLinear` and country names to vertical positions via `scaleBand`. Each country is drawn as an SVG `<rect>` element, with the chart filling the full width and height of the viewport.

May 23, 2022

Loading thumbnail…

Fork of Mouse Follower

This example shows a circle that follows the mouse cursor across an SVG canvas. The visualization uses React with the `useState` and `useCallback` hooks to track mouse coordinates and re-render the circle's position on every `mousemove` event. The circle is rendered as an SVG element with its `cx` and `cy` attributes bound to the current mouse position, while `clientX` and `clientY` from the event provide the updated coordinates. ReactDOM manages the component mounting, and the canvas is fixed at 960 by 500 pixels.

May 22, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays a single SVG circle centered within an empty viewport. The HTML page contains only an inline SVG element with a circle of radius 100, using no additional styling or interaction. The rendering relies on plain SVG markup within the document, with no JavaScript libraries such as D3 or external data sources. The minimal structure demonstrates how static vector graphics can be embedded directly in an HTML file.

May 21, 2022