Adjusted positioning of some language translations; added new text element for the language name

index.js

@@ -232,20 +232,42 @@ function drawMap(world) {
 				if (stateOrDistrictOrLanguage(d) == "language") {
 					rtv = projection(d3.geoCentroid(d))[0];
 					if (d.properties.lang_name == "Kannada") {
-						rtv -= 10;
+						rtv -= 20;
+					}
+               if (d.properties.lang_name == "Tamil") {
+                  rtv += 20;
+               }
+               if (d.properties.lang_name == "Maithali") {
+                  rtv += 10;
                }
 					return rtv
 				}
 			})
       .attr("y", function(d) {
 				if (stateOrDistrictOrLanguage(d) == "language") {
-					return projection(d3.geoCentroid(d))[1]
+					rtv = projection(d3.geoCentroid(d))[1]
+               if (d.properties.lang_name == "Kannada") {
+                  rtv += 15;
+               }
+               if (d.properties.lang_name == "Tamil") {
+                  rtv -= 20;
+               }
+               if (d.properties.lang_name == "Gujarati") {
+                  rtv -= 10;
+               }
+               if (d.properties.lang_name == "Mizo") {
+                  rtv += 20;
+               }
+               if (d.properties.lang_name == "Nepali") {
+                  rtv -= 10;
+               }
+
+               return rtv
 				}
 		})	
       .attr("text-anchor", "middle")
-      .attr("font-size", "12px")
       .attr("fill", "black")
-	  .attr("class", "languageText")
+	  .attr("class", "translationText")
 	  .attr("id", function(d) {
 			if (stateOrDistrictOrLanguage(d) == "language") {
 				return d.properties.lang_code+"Text"
@@ -261,15 +283,15 @@ function drawMap(world) {
 			}
 		});
 
+   // Romanization
 	states.append("text")
       .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')) :
+							parseFloat(document.getElementById(d.properties.lang_code + "Text").getAttribute("y")) + parseFloat(getComputedStyle(document.getElementsByClassName('translationText')[0]).getPropertyValue('font-size')) :
 			 				projection(d3.geoCentroid(d))[1])
       .attr("text-anchor", "middle")
-      .attr("font-size", "12px")
       .attr("fill", "black")
 	  .attr("class", "romanizationText")
 	  .attr("id", function(d) {
@@ -285,6 +307,37 @@ function drawMap(world) {
 			}
 		});
 
+   // Language
+	states.append("text")
+      .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('translationText')[0]).getPropertyValue('font-size')) :
+			 				projection(d3.geoCentroid(d))[1])
+      .attr("text-anchor", "middle")
+      .attr("fill", "black")
+	  .attr("class", "languageText")
+	  .attr("id", function(d) {
+			if (stateOrDistrictOrLanguage(d) == "language") {
+				return d.properties.lang_code+"Language"
+			} else {
+				d3.select(this).remove()
+			}
+	  })
+      .each(function(d) {
+			if (!stateOrDistrictOrLanguage(d) == "language") {
+				d3.select(this).remove() // Only add this attribute if the element is a language
+			}
+      })
+      .text(function(d) {
+			if (stateOrDistrictOrLanguage(d) == "language") {
+				return d.properties.lang_name;
+			} else {
+				d3.select(this).remove() // Only add this attribute if the element is a language
+			}
+		});
+
 		let allLangs = []
 
 	const coordinates = [77.69916967457782,23.389970772934166];