ICE-8 INDIA

100%

✓ Published8🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

Forked from Fork of Fork of ice8-vignesh

This interactive visualization displays a globe, defaulting to an orthographic projection, with geographic boundaries for countries and graticules. Users can drag to rotate the globe, which updates the paths for countries and the graticule via `d3.geoPath` and the projection’s `rotate` method. Clicking a country switches the projection, such as to a mercator view, and applies transitions. The map uses `d3.geoOrthographic`, `d3.geoMercator`, `d3.drag`, `d3.zoom`, and data from `world-atlas` and a TSV file for country names.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

86% match

Loading thumbnail…

ICE-8-Ali-Shah

This example presents an interactive world map using a rotating orthographic globe, with the option to switch to a Mercator projection. Users can drag to rotate the globe and click on a country to change projections, such as zooming into the United States. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, rendering country boundaries and graticules via `d3.geoPath`. It leverages D3.js v6, including `d3.geoOrthographic`, `d3.geoMercator`, `d3.drag`, and `d3.zoom`, with SVG elements for crisp rendering.

AAli Shah Solanki

85% match

Loading thumbnail…

Fork of ICE-8 INDIA

This interactive map displays the states and districts of India, rendered with SVG paths using `d3.geoPath` and a `d3.geoMercator` projection. Users can zoom and pan via `d3.zoom`, and hovering over a district reveals its name and state through a `title` element. The visualization loads TopoJSON data for both state and district boundaries, coloring districts with `d3.scaleOrdinal` and `d3.schemeCategory10`. A supplementary globe view, built with `d3.geoOrthographic`, supports click-to-switch projections and drag-to-rotate, using data from the world-atlas package.

Aabh9294

85% match

Loading thumbnail…

ICE-8 World Map

This interactive world map lets users explore country boundaries by clicking on them, which switches the projection between Mercator and orthographic views, with the United States triggering a third Albers USA projection. Built with D3 v6 and TopoJSON, the visualization uses d3.geoPath to render country shapes from world-atlas data, while d3.drag and d3.zoom enable rotating the orthographic globe and panning/zooming the map. A graticule overlay and country hover effects are drawn as SVG paths, with transitions animating projection changes.

Ddheeraj1509

85% match

Loading thumbnail…

ICE-8 INDIA

This visualization displays a zoomable map of India with its states and districts, using a Mercator projection centered on the country. The map renders district boundaries as colored paths with hover tooltips revealing district and state names, while state outlines appear as distinct boundaries. Built with React and D3, the code uses `geoMercator`, `geoPath`, and `scaleOrdinal` to handle projection and coloring, with TopoJSON data from the datameet and deldersveld repositories. The SVG also includes zoom functionality through D3’s zoom behavior.

MManohar Kowthavarapu

84% match