<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoJSON Map with D3.js</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
svg {
border: 1px solid #ccc;
}
.state {
fill: lightblue;
stroke: black;
stroke-width: 0.5;
transition: fill 0.3s;
}
.state:hover {
fill: orange;
}
</style>
</head>
<body>
<svg width="1000" height="600"></svg>
<script>
const svg = d3.select("svg")
const map1 = new Map();
function drawMap(world) {
const projection = d3.geoMercator().fitSize([1000,600], world)
const path = d3.geoPath().projection(projection);
// Draw the map
svg.selectAll("path")
.data(world.features)
.enter()
.append("path")
.attr("d", path)
.attr("class", "state")
.append("title") // Tooltip
.text(d => d.properties.name)
.each(function(d) {
map1.set(d.properties.name, d3.geoCentroid(d));
});
}
// Load GeoJSON file
d3.json("india.json").then(drawMap)
console.log(map1)
</script>
</body>
</html>