Raghuram Bachu

@raghurambachu·4 public vizzes

Fork of HTML Starter

This example demonstrates a set of basic SVG shapes—two circles, a rectangle, a line, and a path—arranged on a 960 by 500 canvas. It runs as a static HTML page in the browser, using inline CSS to style text and JavaScript-free markup. The rendering relies entirely on raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, each with explicit coordinates and styling attributes such as fill, stroke, and stroke-width. It serves as a minimal starter for exploring vector graphics without additional libraries.

Feb 25, 2023

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup that renders a centered text message directly into an HTML div. It shows how a VizHub project can load D3 v5 from a CDN, use ES6 module imports to access the `select` function, and combine local modules for reusable code. The visualization itself is static, with the message “Hello VizHub!” styled via external CSS, highlighting basic DOM manipulation rather than data-driven rendering.

Feb 25, 2023

Loading thumbnail…

Fork of Fork of Buddha image in random circles - 2

A generative SVG visualization renders a Buddha silhouette as a complex vector path, layered beneath hundreds of randomly positioned and colored circles. Built with React, the component maps over a nested array to produce circles with arbitrary coordinates, radii, and RGB fill values, while the Buddha path is drawn using a hard-coded SVG path string. The circles, set at 80% opacity, overlay the path, creating a chaotic, multicolored composition against a white background.

Dec 27, 2022

Loading thumbnail…

svg fundamentals

This example demonstrates fundamental SVG shapes and their rendering behavior within an HTML document. The code uses raw SVG APIs to draw a red circle, a yellow rectangle with a blue stroke, a diagonal line, and a black polyline path, all positioned on a 960 by 500 canvas. It shows how z-index is implicitly determined by element order, as the shapes are layered in the order they appear. The path uses the `d` attribute with absolute coordinates to create a multi-segment line, while the rectangle demonstrates the use of the `stroke` and `stroke-width` attributes for visual styling.

Dec 25, 2022