Skip to main content
Log in
V

Varun Nangia

@varunnangia123·5 public vizzes

Loading thumbnail…

SANKEY Diagram for Spread of COVID-19

This Sankey diagram visualizes the early spread of COVID-19 between countries, using node and link thickness to represent the relative volume of transmission. The diagram shows China as the primary source, with flows to Japan, the UK, and other nations, which then propagate to secondary destinations. The visualization is built with D3.js v5, using a custom `d3.sankey` layout algorithm to position nodes and draw curved links as SVG paths. Node rectangles are draggable, and hovering over a link reveals a tooltip with the source, target, and value. Data is loaded from a JSON file containing named nodes and weighted links.

Oct 22, 2020
Loading thumbnail…

Heatmap for number of infection rate at orign of pandemic

This interactive heatmap visualizes the number of infected individuals across regions and age categories during the early pandemic. It uses a red sequential color scale to encode counts, with Hubei and Shaanxi showing the highest infection numbers, particularly in older age groups. Built with D3 v4, the visualization renders as an SVG using `d3.scaleBand` for axes, `d3.scaleSequential` with `d3.interpolateReds` for colors, and includes tooltip interactions on hover. Data comes from the `age_v2.csv` file.

Jun 21, 2020
Loading thumbnail…

SANKEY Diagram for Spread of COVID-19

This Sankey diagram visualizes the early spread of COVID-19 between countries, using node and link thickness to represent the relative volume of transmission. The diagram shows China as the primary source, with flows to Japan, the UK, and other nations, which then propagate to secondary destinations. The visualization is built with D3.js v5, using a custom `d3.sankey` layout algorithm to position nodes and draw curved links as SVG paths. Node rectangles are draggable, and hovering over a link reveals a tooltip with the source, target, and value. Data is loaded from a JSON file containing named nodes and weighted links.

Jun 21, 2020
Loading thumbnail…

Flow chart for the spread of COVID-19 across the world

This visualization maps the global spread of COVID-19 during the early outbreak, showing direct transmission links between geographic coordinates. A Mercator projection with `d3.geoPath` renders country outlines, while an overlay of `LineString` paths connects origin and destination points, revealing propagation routes from Chinese provinces to Europe, Australia, and beyond. The code uses `d3.queue` with `d3.json` and `d3.csv` to load world GeoJSON and coordinate data, with `d3.geoMercator` projecting all coordinates. The resulting SVG uses a dark teal stroke for each transmission arc against a gray world map.

Jun 15, 2020
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with D3.js demonstrates basic SVG manipulation and animation. The code uses `d3.select` and `d3.append` to construct circles for the eyes, rectangles for the eyebrows, and a path created with `d3.arc` for the mouth. A chained `transition().duration(2000)` moves the eyebrow group up and down repeatedly. The example renders entirely in SVG, centered within a 960×500 viewport, with static yellow fill and black stroke styling. No external data is loaded; the face is generated purely from hard-coded dimensions and offsets.

May 27, 2020