Skip to main content
SimilarExport ZIP
100%

test geomercator

✓ Published0🌍 Public
AAnimesh Nautiyal
Last edited Dec 30, 2021
Created on Dec 30, 2021
Forked from D3 Starter

This example displays a choropleth map of Mumbai's ward boundaries using a Mercator projection, with ward numbers labeled at each polygon's centroid. The map uses `d3.geoMercator` and `d3.geoPath` to render geographic data loaded from a local GeoJSON file, styling wards in grey or green depending on their `prabhag_no` property. Clicking a highlighted ward opens an external link, demonstrating basic interactivity with SVG event handlers. The visualization applies a custom scale and centering to focus on the city region.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Map template

This example displays a map of India using D3.js, rendering geographic boundaries as SVG paths. It loads GeoJSON data from a remote URL and projects it with a Mercator projection using `d3.geoMercator` and `d3.geoPath`. The map is centered on India and scaled to fit the browser window, with each feature drawn as a path element styled with the class `boundary`.

AAnimesh Nautiyal
75% match
Loading thumbnail…

GeoVisualization - Choropleth map of India

This example displays a choropleth map of India, rendering its states and major places as an interactive SVG graphic. It uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to draw TopoJSON features representing state polygons and city points. State subdivisions are filled with a categorical `d3.scaleOrdinal` color scheme at reduced opacity, while labels for each state and place are positioned using `path.centroid` and the projection of coordinates. The map automatically centers and scales to fit the viewport using geographic bounds. Data comes from a remote TopoJSON file, and the code updates an earlier D3 v4 implementation to D3 v7.

AAlark Joshi
74% match
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…

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
73% 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
73% match
Loading thumbnail…

map-other-density

This example displays a choropleth map of eight blocks in Palghar district, India, using SVG paths rendered via `d3.geoPath` with a `geoMercator` projection. The map shows the percentage of stunted children per block, with fill patterns generated using the textures library and a slider to adjust classification thresholds. A tooltip appears on mouseover, and zooming is enabled through `d3.zoom`. Data is loaded from a CSV file and joined to GeoJSON features.

Zzoniyac
72% match
Loading thumbnail…

My map

This example presents a choropleth-style map of a single region, likely a state, rendered as a filled polygon in a light blue SVG container. The map uses the Mercator projection and d3.geoPath to draw geographic boundaries from a GeoJSON file, while d3.csv loads city data for potential point markers. The visualization is built with D3 v5 and styled as a responsive SVG using a viewBox, with a custom CSS class for layout. The code demonstrates loading external data files and projecting them onto a large canvas.

Aatree-rohit
72% match
Loading thumbnail…

Fork of Fork of Map of India-Part I

This example displays a choropleth-style map of Maharashtra, India, with eight districts highlighted in blue, including Mumbai, Pune, and Nagpur, while the rest remain white. Built with D3.js and TopoJSON, it loads district boundaries from a remote GeoJSON source and uses a `d3.geoMercator` projection with `d3.geoPath` to render the SVG paths. District names are normalized to match predefined city labels before applying the fill color.

Sshamanth@wimate.in
72% match