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

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")