Added colors to the map (used four-color theorem, but did it manually)

index.html

@@ -17,13 +17,12 @@
 				border: 1px solid #ccc;
 			}
 			.state {
-            fill: lightblue;
 				stroke: black;
 				stroke-width: 0.5;
 				transition: fill 0.3s;
 			}
 			.state:hover {
-            fill: orange;
+				stroke-width: 1.5;
 			}
 		</style>
 	</head>
@@ -34,6 +33,47 @@
 			const svg = d3.select("svg")
 			const map1 = new Map();
 
+			const color1 = "#75d795"
+			const color2 = "#ff7c7c"
+			const color3 = "#ffe77c"
+			const color4 = "#7c9dff"
+
+			// Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
+			const colorMap = {
+					"Tamil Nadu": color1,
+					"Kerala": color2,
+					"Karnataka": color3,
+					"Andhra Pradesh": color4,
+					"Maharashtra": color4,
+					"Goa": color3,
+					"Telangana": color2,
+					"Odisha": color3,
+					"Gujarat": color1,
+					"Rajasthan": color3,
+					"Chhattisgarh": color1,
+					"Jharkhand": color2,
+					"West Bengal": color1,
+					"Assam": color2,
+					"Meghalaya": color3,
+					"Tripura": color4,
+					"Mizoram": color1,
+					"Manipur": color3,
+					"Nagaland": color1,
+					"Arunachal Pradesh": color4,
+					"Sikkim": color2,
+					"Bihar": color3,
+					"Madhya Pradesh": color2,
+					"Uttar Pradesh": color4,
+					"Uttarakhand": color2,
+					"Haryana": color1,
+					"Punjab": color4,
+					"Himachal Pradesh": color3,
+					"Ladakh": color1,
+					"Jammu and Kashmir": color2,
+			}
+
+			const colors9 = ["#75d795", "#EFDFD8", "#D5F6FB", "#E5ECF8", "#F0EBD8", "#F7DFC2", "#B4D9EF", "#F8C57C", "#A4D8D8"]
+
 			function drawMap(world) {
 				const projection = d3.geoMercator().fitSize([1000,600], world)
 				const path = d3.geoPath().projection(projection);
@@ -45,11 +85,12 @@
 					.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));
-				});
+					})
 
 			}