Skip to main content
SimilarExport ZIP
100%

Tree-diagram_ice8

✓ Published1🌍 Public
SSaivignesh-9176
Last edited Mar 30, 2023
Created on Mar 30, 2023

This interactive world map renders country boundaries using D3’s `d3.geoPath` with topojson data from world-atlas. Users can click any country to switch between orthographic and Mercator projections, while dragging rotates the globe. The visualization also supports zooming via `d3.zoom` and includes a graticule overlay. Country names are loaded from a TSV file, and hover effects highlight individual nations.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Tree-diagram_ice8

This interactive map of the world displays country outlines that can be clicked to switch between different map projections, including a mercator and an orthographic view. The visualization uses `d3.geoPath` to render geographic features and supports rotation via a custom `d3.drag` interaction. It loads geographic data from a world-atlas TopoJSON file and a TSV file for country names, with animated transitions between projections. The map also incorporates zoom functionality, though its implementation is not detailed in the code.

SSaivignesh-9176
91% match
Loading thumbnail…

tree diagram

This interactive globe displays world country boundaries using a draggable and zoomable orthographic projection. Built with D3.js and TopoJSON, it loads country data from the world-atlas package and renders it as SVG paths via `d3.geoPath`. Users can click individual countries to switch between orthographic and Mercator projections, with a special case for the United States using `d3.geoAlbersUsa`. The visualization includes a graticule overlay and smooth 750ms transitions when updating, demonstrating dynamic geographic data exploration.

SSaivignesh-9176
90% match
Loading thumbnail…

ice8

This interactive world map visualization displays country boundaries over a graticule, with smooth rotation and zoom controls. Users can drag to reorient the orthographic projection, scroll to zoom, and click countries to switch between Mercator and orthographic views. The code uses `d3.geoPath`, `d3.geoOrthographic`, and `d3.geoMercator` projections, with TopoJSON data from world-atlas and country names from a TSV file. The visualization renders in SVG with animated transitions, graticule overlays, and hover highlighting. Drag interactions rotate the projection using `projection.rotate`, while zoom transforms affect the entire SVG group.

PPujitha14challagulla
86% 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
85% match
Loading thumbnail…

ICE-8(11630234)

This visualization displays a world map using an orthographic projection, with country boundaries rendered as SVG paths. Users can click on any country to switch projections: clicking the United States switches to a Mercator projection, while clicking any other country returns to the orthographic view. The map supports dragging to rotate the globe and zooming via `d3.drag` and `d3.zoom`. Data is loaded from the World Atlas TopoJSON files, with country names mapped from TSV data. The code uses `d3.geoPath`, `d3.geoOrthographic`, `d3.geoMercator`, and `d3.geoGraticule`.

KKovvuri Supraj
84% match
Loading thumbnail…

ice8

This interactive map displays world countries and a graticule on a rotatable orthographic projection, with a click on the United States switching to a Mercator projection. The visualization uses D3’s `d3.geoPath`, `d3.geoProjection`, and `d3.geoGraticule` to render SVG paths, and supports dragging to rotate the globe. Country boundaries come from the world-atlas TopoJSON dataset, while names map via ISO codes from a TSV file. The animation transitions between projections using D3’s `.transition().duration(750)`.

MMounika0927
84% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ice8-vignesh

This interactive globe visualizes world countries using an orthographic projection, with a graticule overlay for spatial reference. Users can drag to rotate the globe via `d3.drag` and zoom using `d3.zoom`. Clicking a country switches the projection: selecting the United States triggers a `d3.geoMercator` view, while any other country reverts to `d3.geoOrthographic`. Country boundaries are rendered as SVG paths from TopoJSON world-atlas data, with names loaded from a TSV file and colors applied via CSS hover states.

SSaivignesh-9176
83% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ice8-vignesh

This interactive globe visualizes world countries using an orthographic projection, with a graticule overlay for spatial reference. Users can drag to rotate the globe via `d3.drag` and zoom using `d3.zoom`. Clicking a country switches the projection: selecting the United States triggers a `d3.geoMercator` view, while any other country reverts to `d3.geoOrthographic`. Country boundaries are rendered as SVG paths from TopoJSON world-atlas data, with names loaded from a TSV file and colors applied via CSS hover states.

SSaivignesh-9176
83% match