Skip to main content
SimilarExport ZIP
100%

India Mercator

✓ Published0🌍 Public
FFrissAnalytics
Last edited Oct 4, 2018
Created on May 22, 2017

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.

AI-generated description

Draw a map of India with D3.js, Topojson, and five simple functions:

  • centerZoom - Automatically centers and scales your map to its container, and returns your map's outer boundaries in case you want to draw them.
  • drawOuterBoundary - Uses the boundary returned from centerZoom to draw a boundary around your whole map.
  • drawPlaces - Draws place names, if your topojson has places.
  • drawSubunits - Draws subunits.
  • colorSubunits - Colors the subunits.

This map uses a Mercator projection, and the colors are generated from d3.schemeCategory20. For a tutorial on converting Geojson to Topojson and for finding the coordinates of major cities, see this tutorial.

forked from <a href='http://bl.ocks.org/HarryStevens/'>HarryStevens</a>'s block: <a href='http://bl.ocks.org/HarryStevens/c9cf86eba753ba8650fb466e37d538d2'>India Mercator</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

India map

This visualization displays a choropleth map of India, using a Mercator projection to render the country’s geographic boundaries as SVG paths. The map is colored using a categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`), and individual regions change to a pink hover color via CSS. The geographic data is loaded as a TopoJSON file from a GitHub gist, parsed with the `topojson` library’s `feature` function, and drawn using `d3.geoPath`. The map is built with React, with an interactive header and styled via an external stylesheet.

66264kusuma@gmail.com
87% match
Loading thumbnail…

India map using Topojson

This visualization depicts India’s states using a Mercator projection and TopoJSON data from a GitHub gist. The code loads the data via `d3.json`, converts it with `topojson.feature`, and renders the paths using `d3.geoPath`. Each state is filled with a distinct color from a custom ordinal scale, and hover interactions are styled through CSS. The map is built with D3 v5 and the `d3-geo-projection` library.

PPriyaEnuganti
87% match
Loading thumbnail…

Fork of IndiaMap

This visualization displays a color-coded map of India’s states, with each state labeled by name and rendered using D3’s `geoMercator` projection and `geoPath` generator. State boundaries are drawn with a white stroke, and hovering over a state fills it white. The code loads TopoJSON data from a GitHub gist, applies a `scaleOrdinal` with `schemeCategory10` for fill colors, and positions state name labels at path centroids. It uses D3 v5, TopoJSON, and renders to SVG within a React project.

KKinjal-Goyani
86% match
Loading thumbnail…

Fork of Fork of India Map

This visualization shows a choropleth map of India with each state filled by a distinct color from a categorical scale, plus state names overlaid at their geographic centroids. The map uses a Mercator projection positioned with specific translation and scale values, and the code loads India’s state boundaries as TopoJSON from a raw GitHub repository. Using d3.geoPath and d3.geoMercator, it renders the shapes as SVG paths, while d3.scaleOrdinal with schemeCategory10 assigns fill colors, and text elements are placed using pathGenerator.centroid. The topojson library converts the TopoJSON data into GeoJSON features.

AAbdouEnsaj
86% match
Loading thumbnail…

India Map made ith D3

This choropleth map visualizes India’s states using D3 v5, with each state filled by a categorical color scale based on its name. A Mercator projection, configured with custom translation and scaling, renders the TopoJSON geometry as SVG paths, while state labels are placed at each path’s centroid. The code uses `d3.json`, `d3.geoPath`, `topojson.feature`, and a `scaleOrdinal` with `schemeCategory10`, with data loaded from a remote GitHub TopoJSON file.

TTusar
86% match
Loading thumbnail…

Country map

This visualization shows a choropleth map of India’s states, with each state filled by a distinct color from a categorical scale and labeled with its name. The map is rendered as SVG using `d3.geoPath` with a `geoMercator` projection, while state boundaries are drawn from TopoJSON data loaded from a GitHub gist. A `scaleOrdinal` with `schemeCategory10` assigns colors, and text labels are placed at each state’s centroid via `pathGenerator.centroid`.

Uubl2
86% match
Loading thumbnail…

Fork of India Map

This visualization displays a choropleth map of India with its districts and states, rendered using the Mercator projection and geographic path generation. It overlays district boundaries colored by state using `d3.scaleOrdinal` with `schemeCategory10`, while state borders are stroked in black, and hovering highlights districts in dark blue. The map supports interactive zooming via `d3.zoom`, with district and state data loaded from GeoJSON and TopoJSON sources, and uses SVG paths for rendering.

GGogineni44
85% match
Loading thumbnail…

Map of India

The map depicts India’s states, each filled with a distinct color from d3.scaleOrdinal and d3.schemeCategory10, with state names overlaid at path centroids. It uses d3.geoMercator projection and d3.geoPath to render GeoJSON derived from TopoJSON via topojson.feature, sourced from a GitHub-hosted Indian states dataset. State boundaries are stroked in black with hover highlighting on counties, though interactivity is limited to title elements showing state names.

NNita
85% match