Skip to main content
Log in
S

shabdullah05

@shabdullah05·7 public vizzes

Loading thumbnail…

Untitled

A single orange circle is rendered inside a small SVG canvas, demonstrating basic D3.js selection and manipulation. The example uses `d3.select` to target the circle element by its ID, then modifies its radius, stroke, and fill color via the `attr` and `style` methods. The code shows how D3 can directly update SVG attributes and CSS styles on existing DOM elements, with the circle initially defined in static HTML markup.

Apr 13, 2023
Loading thumbnail…

Basic JS

This example shows a minimal HTML page that uses vanilla JavaScript to print a counting message to the document. The code attempts a `for` loop with `document.write` to output numbers from 0 to 10, but the loop condition is flawed, causing an infinite loop. It demonstrates basic JavaScript syntax and DOM output without any external libraries or frameworks. The page relies solely on the browser’s built-in HTML and JavaScript capabilities, with no data source or rendering library involved.

Apr 12, 2023
Loading thumbnail…

The House

A whimsical SVG scene renders a small house with a sky blue sky, a bright yellow sun, brown triangular roof sections, and a green lawn. A grid of thin black lines overlays the entire 100×100 viewBox, creating a blueprint-like effect. The house is detailed with a white picket fence, drawn as a path with vertical line segments, across the lower portion of the lawn. The illustration is hand-coded using raw SVG elements—paths, circles, and lines—with explicit stroke and fill attributes, rather than relying on a JavaScript visualization library. The scene’s charm comes from its simple, direct construction.

Apr 11, 2023
Loading thumbnail…

Sunrise

This visualization depicts an animated sunrise scene with a gradient sky transitioning through colors, a moving sun, and layered landscape silhouettes. The SVG markup uses CSS and JavaScript-defined gradients, including radial and linear gradients, to create the sky and terrain. Animation is driven by SVG `<animate>` elements that cycle attribute values over 15-second intervals. The sun’s vertical position, represented by a circle’s `cy` attribute, rises and falls, while sky and land gradient colors shift between light and dark tones.

Apr 7, 2023
Loading thumbnail…

Sunrise

This visualization depicts an animated sunrise scene with a gradient sky transitioning through colors, a moving sun, and layered landscape silhouettes. The SVG markup uses CSS and JavaScript-defined gradients, including radial and linear gradients, to create the sky and terrain. Animation is driven by SVG `<animate>` elements that cycle attribute values over 15-second intervals. The sun’s vertical position, represented by a circle’s `cy` attribute, rises and falls, while sky and land gradient colors shift between light and dark tones.

Apr 7, 2023
Loading thumbnail…

circle through Q

This example displays a circular diagram overlaid on a Cartesian grid, with four curved paths connecting edge points to form a rounded shape. The visualization demonstrates quadratic Bézier curves using SVG path commands, where each curve passes through a control point near the center. A blue circle outlines the full circumference, while a smaller red circle marks the central origin. The grid uses 10-unit spacing with thicker lines at the 50-unit midpoint, and text labels indicate angles at 90, 180, 270, and 360 degrees. The rendering relies on native SVG elements within a React framework, using the `d` attribute for path geometry and inline CSS for styling.

Apr 7, 2023
Loading thumbnail…

The House

The House shows a simple cartoon house built from SVG shapes, including a brown roof, yellow lit windows, a blue door, and a circular window, all overlaid on a grid of thin black lines. The visualization is rendered using raw SVG path, circle, and rect elements inside an HTML page, with no external libraries or frameworks active. The grid lines are drawn via multiple SVG path elements, while the house components use fills and strokes. The design demonstrates basic SVG drawing with React metadata indicated, but the code itself relies on plain HTML and JavaScript markup.

Apr 7, 2023