Abhinash Mallick

@Abhinashmallick·5 public vizzes

Pseudo Bar chat

This example shows a set of six circles positioned diagonally across a white SVG canvas, creating a pseudo bar chart through the descending placement of the shapes. Each circle measures 34.5 units in radius, with coordinates that suggest a decreasing trend from left to right. The visualization uses raw SVG elements directly in an HTML file, with a `<rect>` for the background and `<circle>` elements for the data points. The code defines the chart statically without any JavaScript libraries or interactive features, relying solely on inline SVG markup and basic CSS to reset the body margins.

Aug 4, 2023

Loading thumbnail…

Fork of Pseudo Scatter Plot

This is a static visualization of six circles arranged in a scatter plot pattern on a white background. Each circle is rendered as a distinct SVG element with fixed coordinates and a radius of 34.5 units. The example uses plain HTML, CSS, and inline SVG to construct the chart, with no JavaScript or external libraries involved. The plot offers a simple, minimal demonstration of how SVG shapes can be positioned manually to create a data-like layout.

Aug 4, 2023

Loading thumbnail…

Pseudo Scatter Plot

This example demonstrates a static collection of basic SVG shapes, including circles, rectangles, lines, and paths, arranged in a pseudo-scatter-plot layout. It shows how different geometric primitives can be combined and styled together within a single `<svg>` viewport. The visualization uses inline SVG within an HTML page, with CSS rules applied to the `rect` elements to set their fill and stroke colors, as well as a hover effect that changes the fill to green. The code explicitly defines each shape’s properties, such as coordinates, dimensions, and stroke attributes, without relying on any external libraries or JavaScript.

Aug 4, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling, showing how circles, rectangles, lines, and paths are rendered inside an SVG canvas. The visualization uses raw SVG markup within an HTML page, applying CSS rules to style the `rect` element with fill, stroke, and opacity properties and a hover effect that changes its fill color to green. The code directly embeds SVG tags like `<circle>`, `<rect>`, `<line>`, and `<path>` with attributes such as `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `d` to define geometry and coordinates. No external data or JavaScript libraries are used; rendering relies solely on the browser’s SVG support and CSS styling.

Aug 4, 2023

Loading thumbnail…

Gradient

This example demonstrates an animated gradient landscape using D3 version 6 and SVG. It shows a sky backdrop with a radial gradient, a sun that moves vertically, and two layered terrain paths with linear gradients. The gradients transition colors over time using SVG `<animate>` elements, while the sun’s position animates via its `cy` attribute. The code uses D3’s `select` function to render static text, and the visual is purely SVG-based with no external data sources.

Aug 4, 2023