Started working on district coloring; assign each state a different color (based on language) rather than using 4-color theorem

index.js

@@ -1,14 +1,27 @@
 const svg = d3.select("svg")
 const map1 = new Map();
 
-const color1 = "#75d795"
+const color1 = "#75d795" // Tamil
-const color2 = "#ff7c7c"
+const color2 = "#ff7c7c" // Malayalam
-const color3 = "#ffe77c"
+const color3 = "#ffe77c" // Kannada
-const color4 = "#7c9dff"
+const color4 = "#7c9dff" // Telugu
-const color5 = "#e0ff7c"
+const color5 = "#e0ff7c" // Marathi
-const color6 = "#9b7cff"
+const color6 = "#9b7cff" // Konkani
+const color7 = "#d17cff" // Hindi
+const color8 = "#" // Gujarati
+const color9 = "#" // Marwari
+const color10 = "#" // Oriya
+const color11 = "#" // Bengali
+const color12 = "#" // Punjabi
+const color13 = "#" // Mizo
+const color14 = "#" // Assamese
+const color15 = "#" // Bhojpuri
+const color16 = "#" // Manipuri
+const color17 = "#" // Dogri (near Kashmir)
 
 
+const color13 = "#" // Tulu
+
 // Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
 const colorMap = {
 		"Tamil Nadu": color1,
@@ -18,31 +31,34 @@ const colorMap = {
 		"Telangana": color4,
 		"Maharashtra": color5,
 		"Goa": color2,
-		"Odisha": color3,
+		"Odisha": color10,
-		"Gujarat": color1,
+		"Gujarat": color8,
-		"Rajasthan": color3,
+		"Rajasthan": color9,
-		"Chhattisgarh": color1,
+		"Chhattisgarh": colorr7,
 		"Jharkhand": color2,
-		"West Bengal": color1,
+		"West Bengal": color11,
-		"Assam": color2,
+		"Assam": color14,
 		"Meghalaya": color3,
 		"Tripura": color4,
-		"Mizoram": color1,
+		"Mizoram": color14,
-		"Manipur": color3,
+		"Manipur": color16,
 		"Nagaland": color1,
 		"Arunachal Pradesh": color4,
 		"Sikkim": color2,
 		"Bihar": color3,
-		"Madhya Pradesh": color2,
+		"Madhya Pradesh": color7,
-		"Uttar Pradesh": color4,
+		"Uttar Pradesh": color7,
 		"Uttarakhand": color2,
 		"Haryana": color1,
-		"Punjab": color4,
+		"Punjab": color12,
 		"Himachal Pradesh": color3,
 		"Ladakh": color1,
 		"Jammu and Kashmir": color2,
 }
 
+//const districtColorMap = { // Should override state colors
+//	"Dakshina Kannada": 
+
 const colors9 = ["#75d795", "#EFDFD8", "#D5F6FB", "#E5ECF8", "#F0EBD8", "#F7DFC2", "#B4D9EF", "#F8C57C", "#A4D8D8"]
 
 function drawMap(world) {
@@ -59,7 +75,7 @@ function drawMap(world) {
 	states.append("path")
 		.attr("d", path)
 		.attr("class", "state")
-		.attr("fill", d => colorMap[d.properties.name])
+		.attr("fill", d => colorMap[d.properties.st_nm])
 		.append("title") // Tooltip
 		.text(d => d.properties.district)
 		.each(function(d) {
@@ -75,36 +91,8 @@ function drawMap(world) {
 		.attr("class", "stateText")
 		.attr("id", d => d.properties.district+"Text")
       .text(d => d.properties.district);
-
-	// Draw the map
-//	svg.selectAll("path")
-//		.data(world.features)
-//		.enter()
-//		.append("path")
-//		.attr("d", path)
-//		.attr("class", "state")
-//		.attr("fill", d => colorMap[d.properties.name])
-//		.append("title") // Tooltip
-//		.text(d => d.properties.name)
-//		.each(function(d) {
-//			map1.set(d.properties.name, d3.geoCentroid(d));
-//		})
-//		.each(function(d) {
-//		const [x, y] = projection(d3.geoCentroid(d)); // Get centroid
-//
-//        d3.select(this.parentNode)  // Select the parent <svg> or <g> container
-//            .append("text")  // Append text immediately after the path
-//            .attr("x", x)
-//            .attr("y", y)
-//            .attr("text-anchor", "middle")
-//            .attr("font-size", "12px")
-//            .attr("fill", "black")
-//            .text(d.properties.name);
-//    });
-
 }
 
-// Load GeoJSON file
+d3.json("india_with_districts_without_states.json").then(drawMap)
-d3.json("india_with_districts.json").then(drawMap)
 
 console.log(map1)