Mercator projection of Indian states with the state of Jammu and Kashmir conforming to official guidelines. The state map of India is from Natural Earth while the disputed areas of Jammu and Kashmir have been merged from other maps at the same site.
Last active
February 1, 2022 10:37
-
-
Save anilnairxyz/1ca20f47982712cf6d4128064e3a6feb to your computer and use it in GitHub Desktop.
india - states
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
height:700 | |
license:mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="stateMap.css"> | |
</head> | |
<body> | |
<div id="demobox"> | |
<div id="map"> | |
<div id="select"></div> | |
</div> | |
</div> <!-- demobox --> | |
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="//d3js.org/d3-queue.v3.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script src="stateMap.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#map { position: relative; min-height: 500px; } | |
.state path { stroke: #a9a9a9; stroke-width: 1px; } | |
.state:hover path { fill-opacity: .7; } | |
.label { | |
fill: #3a003a; | |
font-size: 12px; | |
font-weight: 300; | |
text-anchor: middle; | |
pointer-events: none; | |
} | |
.label.IND-2427 { font-size: 0; } | |
.label.IND-2445 { font-size: 0; } | |
.label.IND-3262 { font-size: 0; } | |
.label.IND-3504 { font-size: 0; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
d3.queue() | |
.defer(d3.json, "ne_10m_admin_1_India_Official.json") | |
.await(function(error, topoMap) { | |
if (error) throw error; | |
var states = topojson.feature(topoMap, topoMap.objects.ne_10m_admin_1_India_Official); | |
// Map render | |
var map = stateMap(states.features).width(800).height(700).scale(1200); | |
d3.select("#map").call(map); | |
}); | |
}()); | |
function stateMap(states) { | |
var width = 800, height = 700, scale = 1200; | |
var color = ["#dadaeb", "#bcbddc", "#9e9ac8", "#807dba", "#6a51a3"] | |
function render(selection) { | |
selection.each(function() { | |
d3.select(this).select("svg").remove(); | |
var svg = d3.select(this).append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var projection = d3.geo.mercator() | |
.center([83, 23]) | |
.scale(scale) | |
.translate([width / 2, height / 2]); | |
var path = d3.geo.path().projection(projection); | |
var selectState = svg.selectAll("g").data(states).enter().append("g").attr("class", "state"); | |
selectState.append("path") | |
.style("fill", function(d) { return color[Math.floor(Math.random() * 5)]; }) | |
.attr("d", path); | |
svg.selectAll("text").data(states).enter().append("text") | |
.attr("class", function(d) { return "label " + d.id; }) | |
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) | |
.attr("dy", ".35em") | |
.text(function(d) { return d.properties.name; }); | |
}); | |
} // render | |
render.height = function(value) { | |
if (!arguments.length) return height; | |
height = value; | |
return render; | |
}; | |
render.width = function(value) { | |
if (!arguments.length) return width; | |
width = value; | |
return render; | |
}; | |
render.scale = function(value) { | |
if (!arguments.length) return scale; | |
scale = value; | |
return render; | |
}; | |
return render; | |
} // stateMap | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hii im sonu raj i find this map bt not working map popup click not open