Sahil Thapa

@Sahil35077·3 public vizzes

Network

A small force-directed network graph renders six labeled nodes connected by six links in an SVG. Circles show people (Alice, Bob, Carol, Dave, Eve, Frank) with a teal fill, while gray lines represent connections. The layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position elements. Users can drag any node, which pins it temporarily via the drag handler that sets fixed coordinates (`d.fx`, `d.fy`). Node and link positions update on each simulation tick, and text labels offset to the right of each circle.

Oct 26, 2025

Loading thumbnail…

Tree

A vertical family tree displays three generations of descendants from a single ancestor, with each node represented by a labeled circle. The visualization uses D3’s `d3.stratify()` to convert the flat `{child, parent}` data into a hierarchy, then applies the `d3.tree()` layout algorithm to position nodes top-down. Parent-child connections are drawn as paths using `d3.linkVertical()`, and the SVG output is rendered with the `join` API. The tree includes 36 individuals, branching into four main subfamilies.

Oct 26, 2025

Loading thumbnail…

Map

This example presents two static choropleth-style maps side-by-side: a world map using the Natural Earth projection and a U.S. map using the Albers USA projection. Both maps load TopoJSON data—from `world-atlas` and `us-atlas` datasets—and render country and state boundaries as SVG paths via `d3.geoPath` and `topojson.feature`. The world map includes a graticule generated by `d3.geoGraticule`, while the U.S. map uses `d3.geoAlbersUsa`. Regions are filled with solid colors, and hover tooltips are added using SVG `title` elements.

Oct 26, 2025