Fork of Map

100%

✓ Published0🌍 Public

Last edited Nov 3, 2025

Created on Nov 3, 2025

Forked from Map

This interactive visualization presents two distinct maps—a world map and a US map—that can be panned and zoomed using D3’s zoom behavior. It renders geographic features from the TopoJSON data in the world-atlas and us-atlas packages, using a natural Earth projection for the world and an appropriate projection for the US. The SVG maps include hover effects that change country and state fills, and they feature on-screen zoom control buttons to adjust the view.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Map

This visualization demonstrates two geographic maps side by side: a world map using the Natural Earth projection and a US state map using the Albers USA projection. The maps show country and state boundaries rendered as SVG paths with light blue and green fills, overlaid on a subtle graticule grid for the world map. Built with D3 v7 and TopoJSON, the code loads geographic data from the `world-atlas` and `us-atlas` datasets via CDN, then applies `d3.geoNaturalEarth1` and `d3.geoAlbersUsa` projections with `d3.geoPath` to draw the features.

YYaswanth

88% match

Loading thumbnail…

Fork of World Map

This interactive map visualization displays world countries and U.S. states using a selectable orthographic or Mercator projection. Users can drag to rotate the globe and click on countries to switch between projections, with a special case for the United States. Built with D3 v6 and d3-geo-projection, it renders geographic features via d3.geoPath, uses topojson for data parsing, and incorporates d3.drag and d3.zoom for interaction. The visualization loads world and U.S. atlas TopoJSON data from unpkg, with animations applied via D3 transitions.

GGlebenator

86% match

Loading thumbnail…

Fork of Fork of Fork of World Map

This example displays an interactive world map using D3.js and the d3-geo-projection library. Users can drag to rotate the orthographic projection and click on individual countries to toggle between orthographic and Mercator projections; clicking the United States switches to a US-focused AlbersUSA projection. The visualization renders country boundaries as SVG paths via d3.geoPath, with a graticule overlay, and uses d3.drag and d3.zoom for interaction. It loads geographic data from TopoJSON (world-atlas) and country names from a TSV file.

Bbindhureddy98

86% match

Loading thumbnail…

Fork of Fork of Fork of World Map

This interactive visualization displays a world map with multiple projection options, defaulting to an orthographic view. Users can drag to rotate the globe and click on countries to toggle between Mercator and orthographic projections—clicking the United States switches to Mercator, while other countries return to orthographic. The map uses topojson data from the world-atlas package to render country boundaries and includes a graticule overlay. Built with d3-geo-projection and d3-geoPath, it supports zooming and panning via d3.zoom, with SVG paths and transition animations for smooth updates.

DDivyaVellanki

86% match

Loading thumbnail…

Fork of Maps with Cheap Tricks for Interaction

A fork of the world-atlas map demonstrates pan-and-zoom interaction using d3.zoom, applied to an SVG group containing country paths rendered with d3.geoPath and a Natural Earth projection. The map loads TopoJSON world data and TSV country names, displaying light-green countries on a dark-blue sphere. Hovering highlights a country in red, while zooming transforms the entire group. This example uses d3 v5 and TopoJSON to combine fundamental data binding with cheap yet effective interaction techniques.

Cceresfin

86% match

Loading thumbnail…

Fork of Fork of World Map

This interactive map renders world countries from the `world-atlas` TopoJSON dataset, using a choice of either the orthographic or Mercator projection from `d3-geo-projection.v3`. Users can click a country to toggle between the two projections, and the map supports drag-to-rotate via `d3.drag()` and zooming through `d3.zoom()`, which applies an SVG transform. Country names are joined from a TSV file, and all paths are generated with `d3.geoPath`, with hover highlighting provided by CSS.

Bbindhureddy98

85% match

Loading thumbnail…

Fork of Let's make a map with D3 (Tricks).js!

This interactive map displays world countries using a natural Earth projection, rendered as SVG paths with green fill that turns red on hover. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. Users can pan and zoom the map through `d3.zoom`, with transformations applied to a group element containing the country paths. The map also includes a blue sphere outline drawn via `d3.geoPath` with the `geoNaturalEarth1` projection, and each country displays its name as a tooltip using SVG `title` elements.

BBKirst3

85% match

Loading thumbnail…

Fork of Fork of Fork of World Map

This interactive map displays world countries using an orthographic projection by default, rendered as SVG paths. Users can rotate the globe by dragging, with d3.drag and d3.geoPath updating the projection dynamically. Clicking the United States switches to a Mercator projection via d3.geoMercator, while other clicks revert to orthographic. Country boundaries come from the world-atlas TopoJSON dataset, with names from a TSV file. Zooming is handled through d3.zoom, applying a transform to the map group.

DDivyaVellanki

85% match