First commit

2 months ago · 3a104140ab
commit 3a104140ab
2 changed files with 107 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,64 @@
+<!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>
+
--- a/india.json
+++ b/india.json