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

1 month ago · bc3f69bfa3
parent 3a104140ab
commit bc3f69bfa3
1 changed files with 94 additions and 53 deletions
--- a/index.html
+++ b/index.html
@ -1,64 +1,105 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GeoJSON Map with D3.js</title>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-    <style>
-        body {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            background-color: #f4f4f4;
-        }
-        svg {
-            border: 1px solid #ccc;
-        }
-        .state {
-            fill: lightblue;
-            stroke: black;
-            stroke-width: 0.5;
-            transition: fill 0.3s;
-        }
-        .state:hover {
-            fill: orange;
-        }
-    </style>
-</head>
-<body>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>GeoJSON Map with D3.js</title>
+		<script src="https://d3js.org/d3.v7.min.js"></script>
+		<style>
+			body {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 100vh;
+				background-color: #f4f4f4;
+			}
+			svg {
+				border: 1px solid #ccc;
+			}
+			.state {
+				stroke: black;
+				stroke-width: 0.5;
+				transition: fill 0.3s;
+			}
+			.state:hover {
+				stroke-width: 1.5;
+			}
+		</style>
+	</head>
+	<body>

-<svg width="1000" height="600"></svg>
-<script>
-    const svg = d3.select("svg")
-	 const map1 = new Map();
+		<svg width="1000" height="600"></svg>
+		<script>
+			const svg = d3.select("svg")
+			const map1 = new Map();

-	function drawMap(world) {
-		const projection = d3.geoMercator().fitSize([1000,600], world)
-      const path = d3.geoPath().projection(projection);
+			const color1 = "#75d795"
+			const color2 = "#ff7c7c"
+			const color3 = "#ffe77c"
+			const color4 = "#7c9dff"

-        // Draw the map
-        svg.selectAll("path")
-            .data(world.features)
-            .enter()
-            .append("path")
-            .attr("d", path)
-            .attr("class", "state")
-            .append("title") // Tooltip
-            .text(d => d.properties.name)
-				.each(function(d) {
-					map1.set(d.properties.name, d3.geoCentroid(d));
-				});
+			// 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"]

-    // Load GeoJSON file
-    d3.json("india.json").then(drawMap)
+			function drawMap(world) {
+				const projection = d3.geoMercator().fitSize([1000,600], world)
+				const path = d3.geoPath().projection(projection);

-	 console.log(map1)
-</script>
+				// 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));
+					})

-</body>
+			}
+
+			// Load GeoJSON file
+			d3.json("india.json").then(drawMap)
+
+			console.log(map1)
+		</script>
+
+	</body>
 </html>