Fork of Fork of ice8-vignesh

100%

Fork of Fork of ice8-vignesh

✓ Published0🌍 Public

Last edited Apr 10, 2023

Created on Apr 10, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ice8-vignesh

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.

SSANEEM MOHAMMAD

95% match

Loading thumbnail…

Fork of ice8-vignesh

This interactive map displays world countries rendered as SVG paths using a globe-like orthographic projection that users can drag to rotate. Clicking a country switches between projections: selecting the United States activates the Mercator projection, while clicking any other country returns to the orthographic view. The visualization uses D3.js with d3-geo-projection, d3.geoPath for geographic path generation, and topojson to load world atlas data. Country names come from a TSV file, while geographic boundaries are sourced from a TopoJSON file. Additional interactions include zooming via d3.zoom and smooth transitions between projections.

SSaivignesh-9176

93% 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 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 Fork of Fork of Fork of ice8-vignesh

This interactive globe visualization displays world countries on an orthographic projection, rendered as SVG paths using d3.geoPath. Users can drag to rotate the globe, revealing different regions, and click any country to switch between orthographic and Mercator projections; clicking the United States selects the Mercator view. The map includes a graticule overlay and supports zooming via d3.zoom. Country boundaries come from the World Atlas TopoJSON dataset, with names mapped from TSV data. The visualization uses d3-drag for rotation, d3.geoProjection for map projections, and transitions for smooth projection changes.

SSaivignesh-9176

92% 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

92% match

Loading thumbnail…

Fork of Fork of ice8-vignesh

This interactive globe displays world countries using an orthographic projection, with a graticule overlay and draggable rotation. Clicking a country switches between projections: selecting the United States triggers a smooth 750ms transition to a Mercator projection, while any other country returns to the orthographic view. The visualization uses `d3.geoPath` for rendering, `d3.drag` for rotation, and `d3.zoom` for panning, with country names resolved from a world-atlas TSV. Data comes from world-atlas TopoJSON, rendered as SVG paths with hover highlighting.

Jjia-sin

92% match