Minor update - change stroke color

index.html

@@ -20,7 +20,7 @@
 				padding: 2em;
 			}
 			.state {
-				stroke: black;
+				stroke: white;
 				stroke-width: 0.5;
 				transition: fill 0.3s;
 			}

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")
+		.attr("id", d => d.properties.district+"Text")
-      .text(d => d.properties.name);
+      .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)

languages.txt

@@ -0,0 +1,23 @@
+Hindi
+Bengali
+Marathi
+Tamil
+Telugu
+Kannada
+Malayalam
+Oriya
+Gujarati
+Marwadi
+Urdu
+Mizo
+Assamese
+Punjabi
+Maithili
+Santali
+Nepali
+Konkani
+Tulu
+Bhojpuri
+Dogri
+Manipuri
+Sindhi