Skip to main content
SimilarExport ZIP
100%

Map

✓ Published0🌍 Public
SShweta-tech
Last edited Feb 9, 2020
Created on Feb 9, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Map

This visualization displays a map of India with state and district boundaries, using the Mercator projection. District polygons are filled with colors according to their parent state, while state borders are outlined in black. Hovering over a district changes its fill to red and reveals a tooltip with the district and state names. The code uses the `d3.geoPath` and `d3.geoMercator` APIs, with geographic data loaded from TopoJSON sources.

SSrilekha24
85% match
Loading thumbnail…

Map

This visualization displays a map of Maharashtra, India, using geographic data from a local GeoJSON file (`taluka_maha.geojson`). The map renders administrative boundaries as SVG paths, which are drawn using D3’s `d3.geoPath()` with a `d3.geoMercator()` projection. Although a `schooltype.json` file containing school points is present in the project, the code only loads and draws the map boundaries, not the school locations. The visualization is built within a React framework, though the current implementation uses plain D3 v5 to append an SVG element to a container div, with a fixed viewBox of 1400×700 pixels.

SShweta-tech
84% 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
84% match
Loading thumbnail…

India Mercator

This visualization displays a map of India with its states and union territories, along with major city labels. It uses a Mercator projection and colors each subunit with a category-based color scale. The code employs D3.js v4 with `d3.geoMercator`, `d3.geoPath`, `d3.scaleOrdinal`, and `d3.schemeCategory20`, alongside TopoJSON for geographic data. Functions automatically center and scale the map to fit the window, draw outer boundaries, subunit boundaries and labels, and place city names from the included `india.json` topology.

FFrissAnalytics
83% match
Loading thumbnail…

India Map

The example displays a choropleth-style map of Indian states and territories, rendered as orange SVG paths on a full-screen canvas. It draws geographic boundaries using a Mercator projection centered on the country, with `d3.geoPath` converting GeoJSON features into SVG path data. The map data is loaded remotely from a TopoJSON file, which is converted to GeoJSON via `topojson.feature`. The visualization is built with React components, where the `Map` component receives the parsed feature collection and applies the projection, while React manages the overall SVG rendering.

Ggayathri
83% match
Loading thumbnail…

indiaMap experiment

This visualization displays a choropleth map of India using a Mercator projection, where each state is rendered as a filled SVG path in a teal color. The map appears to be an experiment with state boundaries, as it renders the GeoJSON features from a local `states.json` file. Built with React and D3 v5, the code uses `geoMercator` for projection and `geoPath` for rendering the geographic shapes. The visualization demonstrates a basic map rendering without additional data encoding, serving as a foundational example for geographic data visualization.

AAnkit5ingh
83% 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
82% match
Loading thumbnail…

country map

This interactive visualization displays a choropleth map of India rendered as SVG paths. Using D3 v5 with the geoMercator projection and geoPath API, it draws country boundaries with colors assigned via scaleOrdinal. Data is loaded from a Gist-hosted TopoJSON file and parsed through the topojson library’s feature function. Hovering highlights regions in violet. The visualization also includes a white header text, with styling handled by an external CSS file.

Ppavankalyan1507
82% match