Skip to main content
SimilarExport ZIP
100%

Nog een poging..

✓ Published2🌍 Public
RRamon96
Last edited Nov 15, 2019
Created on Nov 13, 2019

This visualization shows a zoomable Mercator map of the world with a set of Indian military regiment locations marked by geographic coordinates. Each location is linked to its Wikipedia page, though the links are defined but not visibly rendered. The map displays country boundaries in lime green over a light blue background. Using d3.geoPath and d3.geoMercator with TopoJSON world atlas data, the code renders SVG paths and implements pan and zoom through d3.zoom, applying transforms to the map group.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Map

This visualization displays a geographic map of India and surrounding regions using a Mercator projection, centered on coordinates [77, 19]. The map renders GeoJSON features as SVG paths, with continents outlined in gray and specific school-type locations highlighted in blue. Built with D3 v5, the code uses `d3.geoMercator()` for projection and `d3.geoPath()` for path generation. The visualization loads data from a local GeoJSON file and renders at a fixed viewBox size of 1400 by 700 pixels.

SShweta-tech
73% match
Loading thumbnail…

ind

This interactive map of India displays state and district boundaries using a Mercator projection, rendered as SVG paths with click-to-zoom transitions. The code loads TopoJSON data from a remote gist, converts it to GeoJSON features via `topojson.feature`, and visualizes it with `d3.geoMercator`, `d3.geoPath`, and the `d3.zoom` tool for animated scaling. Clicking a region triggers a smooth zoom to its bounding box and updates the displayed area, demonstrating dynamic map navigation with React and D3.

SSaahithi49
72% match
Loading thumbnail…

CountryMap

This interactive map of India uses a Mercator projection to display state and district boundaries, with clickable regions that zoom and pan to focus on a selected area while triggering a callback. Built with React and D3 v6, it leverages `geoMercator`, `geoPath`, and `d3.zoom` to handle scaling and transitions. The geographic data is fetched from a TopoJSON file via `topojson.feature`, and the SVG polygons are rendered with smooth 500ms zoom animations.

Ssugunagar
72% match
Loading thumbnail…

World Map

This example displays an interactive world map showing country boundaries with zooming and hover effects. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, projecting it with d3.geoEquirectangular and rendering via d3.geoPath. The map initially shows a blue sphere with light green countries and indigo borders, which turn maroon on hover. A d3.zoom handler enables pan and zoom interactions on the SVG.

BBhavyaMammai
72% match
Loading thumbnail…

world Map

This visualization displays an interactive world map using a simple equirectangular projection. Countries are rendered as SVG paths with light green fills and indigo outlines, with hover states that turn them maroon. The map supports pan and zoom interactions. The code uses d3.geoEquirectangular, d3.geoPath, and d3.zoom, loading GeoJSON data from the world-atlas TopoJSON file via topojson.feature.

Mmandadi1999
72% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a natural Earth projection map of the world with circular markers plotted at the locations of Indian military regiments and cantonments. Each marker is positioned using a geographic projection, and hovering over a marker displays a tooltip with the regiment’s name. The visualization uses D3 v5 with `geoNaturalEarth1` and `geoPath` for map rendering, and TopoJSON to load world country boundaries from the World Atlas dataset. The markers are appended as SVG circles with a transform based on the projected latitude and longitude coordinates.

Yylzami40
72% match
Loading thumbnail…

Map - India

This example visualizes the states and districts of India as an interactive SVG map. Users can pan and zoom the map using d3.zoom, while hover states reveal district names via title elements. The visualization uses d3-geoMercator for projection, d3.geoPath for rendering paths, and d3.scaleOrdinal with schemeCategory10 to color districts. Geographic data comes from two TopoJSON sources: India state boundaries and 2019 district boundaries. The code also loads city data from a CSV, though points are not plotted in the final rendering.

Llambda-fox
70% match
Loading thumbnail…

India Map

This interactive map of India displays state and district boundaries overlaid on a Mercator-projected SVG. Users can pan and zoom the map using d3.zoom, with districts colored via d3.scaleOrdinal and schemeCategory10. Hovering over a district reveals its name and state in a tooltip. The visualization uses d3.geoPath, d3-geo-projection, and topojson to render geographic data from two JSON sources containing state and district boundaries, with text labels placed at path centroids.

Nnikhilagopi
70% match