Draw states after districts; add 'fill: none' CSS to states; store a map of color to all features with that color

index.html

@@ -21,17 +21,23 @@
 				padding: 2em;
 			}
 			.state {
+				stroke: black;
+				fill: none;
+				stroke-width: 1;
+			}
+
+			.district {
 				stroke: white;
 				stroke-width: 0.5;
 				transition: fill 0.3s;
 			}
-			.state:hover {
+			.district:hover {
 				stroke-width: 1.5;
 			}
-			.stateText {
+			.districtText {
 				visibility: hidden;
 			}
-			.state:hover ~ .stateText {
+			.district:hover ~ .districtText {
 				visibility: visible;
 			}
 		</style>

index.js

@@ -1,5 +1,5 @@
 const svg = d3.select("svg")
-const map1 = new Map()
+const colorToDistrict = new Map()
 
 const tamilColor = "#75d795" // Tamil
 const malayalamColor = "#ff7c7c" // Malayalam
@@ -106,8 +106,14 @@ const districtColorMap = { // Should override state colors
 	"Saharanpur": urduColor,
 	"Shamli": urduColor,
 	"Hapur": urduColor,
+}
 
-
+function stateOrDistrict(d) {
+	if (typeof d.properties.district !== 'undefined') {
+		return "district"
+	} else {
+		return "state"
+	}
 }
 
 function drawMap(world) {
@@ -123,10 +129,17 @@ function drawMap(world) {
 
 	states.append("path")
 		.attr("d", path)
-		.attr("class", "state")
+		.attr("class", d => stateOrDistrict(d))
 		.attr("fill", d => districtColorMap.hasOwnProperty(d.properties.district) ?
 								districtColorMap[d.properties.district] :
 								colorMap[d.properties.st_nm])
+		.each(function(d) {
+				if (!colorToDistrict.hasOwnProperty(this.getAttribute("fill"))) {
+					colorToDistrict[this.getAttribute("fill")] = [d]
+				} else {
+					colorToDistrict[this.getAttribute("fill")].push(d)
+				}
+		})
 		.append("title") // Tooltip
 		.text(d => d.properties.district);
 
@@ -136,11 +149,11 @@ function drawMap(world) {
       .attr("text-anchor", "middle")
       .attr("font-size", "12px")
       .attr("fill", "black")
-		.attr("class", "stateText")
+		.attr("class", "districtText")
 		.attr("id", d => d.properties.district+"Text")
       .text(d => d.properties.district);
 }
 
-d3.json("india_with_districts_without_states.json").then(drawMap)
+d3.json("india_with_districts.json").then(drawMap)
+console.log(colorToDistrict)
 
-console.log(map1)