Set romanization text relative to translation text; Fill languages instead of the individual districts

Make districts transparent; dim other languages when one is hovered; change default opacity of language
Put languages before districts, so that district boundaries show up even with full opacity
2025-03-07 15:46:14 -05:00 · 2025-03-07 15:45:27 -05:00 · 2025-03-07 15:44:39 -05:00
3 changed files with 17645 additions and 17615 deletions
--- a/index.html
+++ b/index.html
@@ -34,8 +34,9 @@
 				stroke: red;
 				/* There has to be a fill, even if it's transparent, to allow
 				hover events to be recognized on the inside. */
-				fill: black;
-				fill-opacity: 0.0;
+	/*			fill: black;
+				fill-opacity: 0.0; */
+				fill-opacity: 0.8;
 				stroke-width: 1;
 			}
 			.languageText, .romanizationText {
@@ -48,6 +49,10 @@
 			.language:hover ~ .languageText {
 				visibility: visible;
 			}
+			.language:hover ~ .romanizationText {
+				visibility: visible;
+			}
+
 			.testClass:hover {
 				fill: red;
 				cursor: default;
@@ -57,6 +62,8 @@
 				stroke: white;
 				stroke-width: 0.25;
 				transition: fill 0.3s;
+				fill: none;
+				pointer-events: none;
 			}
 			.language:hover {
 				stroke-width: 2;
@@ -75,6 +82,18 @@
 			.loading, .htmx-request.loading-indicator /* While request is being made */ {
 					display: inline;
 			}
+
+			/* Dim all other states */
+			/* Kinda wild that you can do this in plain CSS */
+			#indiaMap:has(.language:hover) .language:not(:hover) {
+    			fill-opacity: 0.5;
+	   		transition: fill-opacity 0.3s;
+			}
+
+			#indiaMap .language:hover {
+				fill-opacity: 1;
+				 transition: fill-opacity 0.3s;
+			}
 		</style>
 	</head>
 	<body>
@@ -89,7 +108,7 @@
 		<progress id="loading-screen" class="loading-indicator"></progress>
 		</section>

-		<svg id = "indiaMap" width="1000" height="1000"></svg>
+		<svg id = "indiaMap" width="1200" height="1200"></svg>
 		</main>

 		<script type="text/javascript" src="index.js"></script>
--- a/index.js
+++ b/index.js
@@ -213,13 +213,8 @@ function drawMap(world) {
 		.attr("d", path)
 		.attr("class", d => stateOrDistrictOrLanguage(d))
 		.attr("fill", function(d) {
-		    if (stateOrDistrictOrLanguage(d) === "district") {
-		        const districtLang = district2langFunc(d)
-		    		if (typeof districtLang !== 'undefined') {
-		    		   return districtLang.color
-		    		} else {
-		    			return defaultColor;
-		    		}
+		    if (stateOrDistrictOrLanguage(d) === "language") {
+		    	return languages[d.properties.lang_name.toLowerCase()].color;
 		    }
 		})
 		.each(function(d) {
@@ -234,8 +229,20 @@ function drawMap(world) {
 		.text(d => d.properties.district);

 	states.append("text")
-      .attr("x", d => projection(d3.geoCentroid(d))[0])
-      .attr("y", d => projection(d3.geoCentroid(d))[1])
+      .attr("x", function(d) {
+				if (stateOrDistrictOrLanguage(d) == "language") {
+					rtv = projection(d3.geoCentroid(d))[0];
+					if (d.properties.lang_name == "Kannada") {
+						rtv -= 10;
+					}
+					return rtv
+				}
+			})
+      .attr("y", function(d) {
+				if (stateOrDistrictOrLanguage(d) == "language") {
+					return projection(d3.geoCentroid(d))[1]
+				}
+		})	
      .attr("text-anchor", "middle")
      .attr("font-size", "12px")
      .attr("fill", "black")
@@ -256,8 +263,12 @@ function drawMap(world) {
 		});

 	states.append("text")
-      .attr("x", d => projection(d3.geoCentroid(d))[0])
-      .attr("y", d => projection(d3.geoCentroid(d))[1] + parseFloat(getComputedStyle(document.getElementsByClassName('languageText')[0]).getPropertyValue('font-size')))
+      .attr("x", d => stateOrDistrictOrLanguage(d) == "language" ? 
+							document.getElementById(d.properties.lang_code + "Text").getAttribute("x") : 
+							projection(d3.geoCentroid(d))[0])
+      .attr("y", d => stateOrDistrictOrLanguage(d) == "language" ? 
+							parseFloat(document.getElementById(d.properties.lang_code + "Text").getAttribute("y")) + parseFloat(getComputedStyle(document.getElementsByClassName('languageText')[0]).getPropertyValue('font-size')) :
+			 				projection(d3.geoCentroid(d))[1])
      .attr("text-anchor", "middle")
      .attr("font-size", "12px")
      .attr("fill", "black")
--- a/india_with_districts_with_languages.json
+++ b/india_with_districts_with_languages.json
Author	SHA1	Message	Date
Aadhavan Srinivasan	7110b0e0e3	Set romanization text relative to translation text; Fill languages instead of the individual districts	2025-03-07 15:46:14 -05:00
Aadhavan Srinivasan	d1feca7003	Make districts transparent; dim other languages when one is hovered; change default opacity of language	2025-03-07 15:45:27 -05:00
Aadhavan Srinivasan	3aa4135a81	Put languages before districts, so that district boundaries show up even with full opacity	2025-03-07 15:44:39 -05:00