Tell us what works and what could be better. We read every submission.
@abdul-alim·3 public vizzes
An orthographic globe rotates to highlight each country in sequence, with the current country’s name displayed in a title above the canvas. The visualization uses d3.geo.orthographic projection, d3.geo.path for rendering land, borders, and the globe outline on a Canvas 2D context, with transitions tweening the projection rotation via d3.interpolate. Country centroids are computed with d3.geo.centroid, and the order is alphabetical based on names from the world-country-names.tsv dataset, paired with world-110m.json TopoJSON data.
Clicking a U.S. state zooms the map to that state’s bounding box, with a smooth 750-millisecond transition, while a gray mesh outlines all state boundaries. The view also resets to the full country when clicking the background. Built with D3 v4, the example uses `d3.zoom` with a `translateExtent` that constrains panning, `d3.geoPath` and `d3.geoAlbersUsa` for rendering TopoJSON state features as SVG paths, and `zoom.transform` to animate the zoom. The active state highlights in orange, and stroke widths scale inversely with the zoom level.
This interactive map displays Mapbox street tiles across a full-screen view, with zoom and pan controls that update the visible tile set. Built with D3 v3, it uses the custom `d3.geo.tile` plugin to calculate which tiles are needed for the current zoom level and viewport, then positions them as absolutely placed `<img>` elements. The zoom behavior updates the projection and tile layer via a CSS `matrix3d` transform, while a coordinate readout shows the latitude and longitude under the cursor.