Skip to main content
SimilarExport ZIP
100%

Fork of Fork of ice8-vignesh

✓ Published0🌍 Public
SSANEEM MOHAMMAD
Last edited Apr 12, 2023
Created on Apr 12, 2023

An interactive world map displays country boundaries loaded from world-atlas TopoJSON, rendered via d3.geoPath with SVG paths filled in blue. Users can drag to rotate the orthographic globe, zoom with d3.zoom, and click countries to switch projections between orthographic, Mercator, and Albers USA, with transitions animating the change. The SVG also includes a graticule and a black sphere outline.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ice8-vignesh

A world map rendered with SVG paths shows countries in blue on a graticule; clicking a country switches the map between orthographic and Mercator projections, and the map can be rotated by dragging. Built with D3.js, it uses `d3.geoPath`, `d3.geoOrthographic`, `d3.geoMercator`, and `d3.geoAlbersUsa` for projections, and `d3.drag` and `d3.zoom` for interaction. Country boundaries come from the `world-atlas` TopoJSON dataset, while country names are loaded from a TSV file.

GGalineeharika
95% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ice8-vignesh

This interactive map visualizes world countries using an orthographic projection that can be rotated by dragging, with clickable countries that switch between orthographic, Mercator, and Albers USA projections. The visualization loads geographic data from world-atlas TopoJSON and TSV files, rendering country boundaries and a graticule as SVG paths via `d3.geoPath` and `d3.geoGraticule`. Drag interactions adjust the projection’s rotation, zoom is handled through `d3.zoom`, and projection changes animate with D3 transitions.

PPedram
93% match
Loading thumbnail…

Fork of Fork of Fork of ice8-vignesh

This interactive globe visualization displays world countries using orthographic and Mercator projections, rendered with SVG paths via d3.geoPath. Users can drag to rotate the globe, which adjusts the projection rotation dynamically, and zoom through d3.zoom. Clicking a country switches projections: selecting the United States triggers a transition to the Mercator projection, while other countries return to orthographic view. The map uses World Atlas TopoJSON data for country boundaries and TSV data for country names, with graticule lines drawn using d3.geoGraticule.

SSaivignesh-9176
93% match
Loading thumbnail…

Fork of Fork of ice8-vignesh

This interactive map displays world countries in an orthographic projection, allowing users to click any country to toggle between global and US-focused views. The visualization uses d3.geoPath with multiple projection types (mercator, orthographic, and AlbersUSA), rendering SVG paths for countries and graticules. Users can drag to rotate the globe and zoom via d3.zoom. Country boundary data comes from the world-atlas TopoJSON dataset, with names joined from external TSV metadata. Clicking the United States switches to a mercator projection with a smooth transition.

SSANEEM MOHAMMAD
93% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ice8-vignesh

This interactive globe displays country boundaries from the World Atlas TopoJSON dataset, rendered as SVG paths via `d3.geoPath` with an orthographic projection. Users can drag to rotate the globe, which adjusts the projection’s rotation, and scroll to zoom via `d3.zoom`. Clicking a country switches between the orthographic, Mercator, and Albers USA projections, with a transition applied through `transition().duration()`. A graticule layer is also drawn, and country names are loaded from a TSV file to trigger projection changes.

GGogineni44
93% match
Loading thumbnail…

Fork of Fork of ice8-vignesh

This interactive map visualization displays global country boundaries with multiple geographic projections, including mercator, orthographic, and Albers USA. Users can click any country to switch between orthographic and mercator views, while dragging rotates the globe and zooming scales the display. The visualization uses D3.js with d3.geoPath for rendering, d3.geoOrthographic and d3.geoMercator for projections, and topojson to parse world-atlas country data. SVG paths render countries with hover highlighting, graticule lines, and animated transitions (750ms) when switching projections.

GGogineni44
93% match
Loading thumbnail…

Fork of Fork of ice8-vignesh

This interactive globe shows world countries on an orthographic projection, letting the user drag to rotate the sphere, zoom with the scroll wheel, and click individual countries. Clicking the United States switches the projection to a Mercator map, while clicking any other country returns to the orthographic view. Built with D3.js and the topojson library, it uses `d3.geoPath` with dynamic `d3.geoProjection` rotation to render SVG paths from the world-atlas TopoJSON dataset, and `d3.drag` and `d3.zoom` handle the input gestures.

SSaivignesh-9176
93% match
Loading thumbnail…

Fork of Fork of ice8-vignesh

This interactive globe shows world countries on an orthographic projection, letting the user drag to rotate the sphere, zoom with the scroll wheel, and click individual countries. Clicking the United States switches the projection to a Mercator map, while clicking any other country returns to the orthographic view. Built with D3.js and the topojson library, it uses `d3.geoPath` with dynamic `d3.geoProjection` rotation to render SVG paths from the world-atlas TopoJSON dataset, and `d3.drag` and `d3.zoom` handle the input gestures.

SSaivignesh-9176
93% match