Use the new districts file; display district name instead of state name

index.js

@@ -5,6 +5,9 @@ const color1 = "#75d795"
 const color2 = "#ff7c7c"
 const color3 = "#ffe77c"
 const color4 = "#7c9dff"
+const color5 = "#e0ff7c"
+const color6 = "#9b7cff"
+
 
 // Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
 const colorMap = {
@@ -12,9 +15,9 @@ const colorMap = {
 		"Kerala": color2,
 		"Karnataka": color3,
 		"Andhra Pradesh": color4,
-		"Maharashtra": color4,
+		"Telangana": color4,
+		"Maharashtra": color5,
 		"Goa": color2,
-		"Telangana": color2,
 		"Odisha": color3,
 		"Gujarat": color1,
 		"Rajasthan": color3,
@@ -58,9 +61,9 @@ function drawMap(world) {
 		.attr("class", "state")
 		.attr("fill", d => colorMap[d.properties.name])
 		.append("title") // Tooltip
-		.text(d => d.properties.name)
+		.text(d => d.properties.district)
 		.each(function(d) {
-			map1.set(d.properties.name, d3.geoCentroid(d));
+			map1.set(d.properties.district, d3.geoCentroid(d));
 		});
 
 	states.append("text")
@@ -70,8 +73,8 @@ function drawMap(world) {
       .attr("font-size", "12px")
       .attr("fill", "black")
 		.attr("class", "stateText")
-		.attr("id", d => d.properties.name+"Text")
-      .text(d => d.properties.name);
+		.attr("id", d => d.properties.district+"Text")
+      .text(d => d.properties.district);
 
 	// Draw the map
 //	svg.selectAll("path")
@@ -102,6 +105,6 @@ function drawMap(world) {
 }
 
 // Load GeoJSON file
-d3.json("india.json").then(drawMap)
+d3.json("india_with_districts.json").then(drawMap)
 
 console.log(map1)