Adil Zeshan

@adilzeshan·9 public vizzes

Bouncy Wave

A bouncy wave of circles connected by a smooth line animates across a full-screen SVG. The visualization updates 60 times per second, with `setInterval` advancing a time variable that drives the vertical positions, radii, and the number of circles via `Math.sin`. The `visData` function uses D3’s `line` generator and `selectAll().join()` to render the path and circles, reading data from `makeData`. React is included as a dependency but is not directly used in the code.

May 17, 2021

Loading thumbnail…

Dinosaur D3 Scatter Plot

This scatter plot visualizes dinosaur length against weight, with each point representing a species and hovering revealing its genus, period, diet, and measurements. Using D3 v6, the code loads JSON data from a GitHub gist via `d3.json`, parses numeric fields, scales axes with `scaleLinear`, and renders circles in an SVG. Axis labels are generated with `axisLeft` and `axisBottom`, while `d3.format` handles comma-separated weight values. The dataset originates from the Natural History Museum, London.

May 8, 2021

Loading thumbnail…

Sol Lewitt Reproduction - D3

This reproduction of a Sol Lewitt conceptual piece uses D3 to generate a grid of horizontal and vertical line segments across the full viewport. The lines are masked so that only a circular area at the center is visible, with the horizontal lines appearing inside the circle and vertical lines outside it. The code builds SVG rectanglesselectable via D3’s `select` and data joins, and defines two mask elements using `append('mask')` with nested rect and circle shapes. The result is a geometric composition derived entirely from procedural SVG rendering.

Apr 9, 2021

Loading thumbnail…

Sol Lewitt Reproduction - SVG

This example reproduces a Sol Lewitt conceptual drawing using only SVG and JavaScript. It renders two sets of horizontal and vertical striped rectangles that are masked to reveal a central circle, with each line pattern clipped differently to create the interplay of shapes. The code dynamically generates SVG elements via the DOM API, using masks and circles to control visibility, and adapts the artwork to the full browser window dimensions.

Apr 4, 2021

Loading thumbnail…

Pseudo Circle Packing

A pseudo circle packing visualization displays nested and overlapping circles in a black-and-white composition, with labeled regions from A to W. The SVG rendering uses hardcoded circle elements with fixed coordinates and radii, rather than algorithmic packing. Text labels and white fills on select circles create visual hierarchy. The design was created in Figma and embedded directly into the HTML, with styling applied through CSS using the Share Tech font.

Mar 20, 2021

Loading thumbnail…

Exercise 1: SVG Fundamentals

An animated SVG scene cycles through a sunrise-to-nightfall color transition, depicting a sun setting behind layered silhouetted landscapes. Gradients shift between aliceblue, steelblue, indigo, and midnightblue over a 15-second loop, with the sun's vertical position animating downward and back. The visualization uses native SVG elements—`rect`, `circle`, `path`, and defined `radialGradient` and `linearGradient`—with SMIL animations via `<animate>` tags, all embedded directly in the HTML without external libraries.

Mar 13, 2021

Loading thumbnail…

SPC Icons

A collection of circular SVG icons encodes Statistical Process Control (SPC) states, including pass, fail, erratic, random, and high/low variation outcomes. Each icon combines a colored ring, a letter label, and a simple line chart rendered with D3’s `line` and `curveBasis` functions. React components compose reusable elements like borders, target lines, and plot lines, with props for width, height, and performance (improvement or concern) that adjust stroke colors dynamically. The icons are displayed in a responsive flex layout.

Dec 22, 2020

Loading thumbnail…

SPC Icons

Six circular SPC icons encode process control states: pass, fail, erratic, random, high, and low variation. Each icon combines a colored border, letter, and trend line, with high and low icons accepting a `performance` prop to switch between improvement and concern colors. Built with React and rendered as SVG, the icons use D3 line generators and basis curves for the erratic paths, plus SVG markers to highlight data points.

Dec 21, 2020

Loading thumbnail…

Sceptical Smiley

A sceptical smiley face rendered as an SVG, composed of a yellow-to-orange radial-gradient circle, unevenly raised eyebrows, mismatched eyes, and a curved mouth. Built with React and D3, it uses `d3.line` with `curveNatural` to draw the smooth paths for the eyebrows and mouth, while remaining facial features are constructed from primitive shapes. The face is centered within a 960x500 viewport, with a black stroke outline defining its features.

Dec 11, 2020