Abhishek Singh

@AbsTheAnalyst·6 public vizzes

Fork of Cheap Tricks for Interaction

This example displays a world map rendered with SVG paths generated by `d3.geoPath` and the `geoNaturalEarth1` projection, using TopoJSON data from the world-atlas package. Country names are loaded via TSV and added as `<title>` tooltips. The visualization supports pan and zoom through `d3.zoom`, with a `g` element’s transform updated on zoom events. Countries are styled with white fills that turn gold on hover, while the background sphere uses a dark teal fill.

Feb 13, 2022

Loading thumbnail…

Fork of Making a map

This example renders a world map using a Natural Earth projection sourced from the world-atlas package. The visualization displays countries as white SVG paths on a dark teal sphere, with a hover effect that highlights each country in amber. Built with d3 v5, it employs `d3.geoNaturalEarth1` and `d3.geoPath` to generate the country shapes, and `topojson.feature` to convert the TopoJSON data into geographic features. The interactive zoom functionality is implemented via `d3.zoom`, which updates the group transform on each zoom event.

Feb 13, 2022

Loading thumbnail…

Globe Zoom - Animate

A world map rendered with SVG marks a projected globe, where graticules, landmasses, and country interiors are drawn via `d3.geoPath` and `d3.geoGraticule`. Nuclear test explosion sites, loaded from a CSV, are plotted as small circles whose positions are calculated using a Mercator projection (`d3.geoMercator`). The visualization demonstrates how multiple geographic datasets can be overlaid and interactively explored, with tooltips showing each site’s name and coordinates. The implementation uses React for state management and `d3` v3 APIs for map and projection handling.

Feb 12, 2022

Loading thumbnail…

Untitled

A globe projection of the world renders country polygons onto a Canvas element using `d3.geoPath` and `d3.geoOrthographic`. It displays land masses in dark blue, water in light gray, and a graticule overlay. The globe auto-rotates slowly, but dragging it with the mouse adjusts the projection angles, and hovering highlights a country in a different color while showing its name. The visualization loads world geography as TopoJSON from a remote source and country names from a TSV file, using `d3.geoGraticule10`, `d3.drag`, and the `versor` library for rotation calculations.

Feb 12, 2022

Loading thumbnail…

Fork of Monoliths on a Globe

An orthographic globe maps city populations with red circles that scale by square-root radius, using a high-resolution world boundary when idle and low-resolution during drag. Users rotate the globe via D3 drag and zoom with D3 zoom, while d3-tip tooltips display formatted population values on hover. The visualization loads TopoJSON country polygons from the world-atlas package and CSV data, projecting points with d3.geoPath and caching projected coordinates to filter out back-side cities.

Feb 12, 2022

Loading thumbnail…

Fork of Interactive Visualization (Brush) - Earthquake Data

This visualization presents earthquake data through three linked views: a bar plot of regional death tolls, a world map plotting earthquake locations with circle size encoding Richter magnitude, and a scatter plot relating year, magnitude, and deaths. A brush selection on the scatter plot filters the other views, while map tooltips display location names and a legend explains magnitude scaling. The code uses d3.v7 with `d3.geoMercator` projection, `d3.geoPath` for map rendering, and `d3.scaleBand`/`d3.scaleLinear` for chart axes. Data comes from a GitHub-hosted world GeoJSON and earthquake CSV.

Feb 12, 2022