Add more text below the translation, in brackets - will be used for romanization

index.js

@@ -255,6 +255,28 @@ 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("text-anchor", "middle")
+      .attr("font-size", "12px")
+      .attr("fill", "black")
+	  .attr("class", "romanizationText")
+	  .attr("id", function(d) {
+			if (stateOrDistrictOrLanguage(d) == "language") {
+				return d.properties.lang_code+"Romanization"
+			} else {
+				d3.select(this).remove()
+			}
+	  })
+      .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];