From d769797136fffe1c0aa7e6b48f17b81848eef6f6 Mon Sep 17 00:00:00 2001 From: Aadhavan Srinivasan Date: Tue, 15 Apr 2025 15:38:55 -0500 Subject: [PATCH] Added horizontal alignment for each language text; moved Hindi text down --- index.js | 73 +++++++++++++++++++++++++++++++------------------------- 1 file changed, 40 insertions(+), 33 deletions(-) diff --git a/index.js b/index.js index bfabf6c..d704f70 100644 --- a/index.js +++ b/index.js @@ -1,28 +1,28 @@ const defaultColor = "#555555" const languages = { - tamil: {name: "Tamil", color: "#75d795", code: "ta", districts: []}, - malayalam: {name: "Malayalam", color: "#ff7c7c", code: "ml", districts: []}, - kannada: {name: "Kannada", color: "#ffe77c", code: "kn", districts: []}, - telugu: {name: "Telugu", color: "#7c9dff", code: "te", districts: []}, - marathi: {name: "Marathi", color: "#e0ff7c", code: "mr", districts: []}, - konkani: {name: "Konkani", color: "#9b7cff", code: "gom", districts: []}, - hindi: {name: "Hindi", color: "#d17cff", code: "hi", districts: []}, - gujarati: {name: "Gujarati", color: "#7cffee", code: "gu", districts: []}, - oriya: {name: "Oriya", color: "#9bcc9f", code: "or", districts: []}, - bengali: {name: "Bengali", color: "#bf9a77", code: "bn", districts: []}, - punjabi: {name: "Punjabi", color: "#e84a35", code: "pa", districts: []}, - mizo: {name: "Mizo", color: "#a6a4de", code: "lus", districts: []}, - assamese: {name: "Assamese", color: "#c9535b", code: "as", districts: []}, - bhojpuri: {name: "Bhojpuri", color: "#b3b876", code: "bho", districts: []}, - manipuri: {name: "Manipuri", color: "#c9afad", code: "mni-Mtei", districts: []}, - dogri: {name: "Dogri", color: "#9595e6", code: "doi", districts: []}, - nepali: {name: "Nepali", color: "#71998e", code: "ne", districts: []}, - urdu: {name: "Urdu", color: "#3fa179", code: "ur", districts: []}, - tulu: {name: "Tulu", color: "#dedc52", code: "tcy", districts: []}, - maithali: {name: "Maithali", color: "#4472a6", code: "mai", districts: []}, - sindhi: {name: "Sindhi", color: "#e89931", code: "sd", districts: []}, - awadhi: {name: "Awadhi", color: "#847fb5", code: "awa", districts: []}, + tamil: {name: "Tamil", color: "#75d795", code: "ta", text_align: "start", districts: []}, + malayalam: {name: "Malayalam", color: "#ff7c7c", code: "ml", text_align: "end", districts: []}, + kannada: {name: "Kannada", color: "#ffe77c", code: "kn", text_align: "middle", districts: []}, + telugu: {name: "Telugu", color: "#7c9dff", code: "te", text_align: "middle", districts: []}, + marathi: {name: "Marathi", color: "#e0ff7c", code: "mr", text_align: "middle", districts: []}, + konkani: {name: "Konkani", color: "#9b7cff", code: "gom", text_align: "end", districts: []}, + hindi: {name: "Hindi", color: "#d17cff", code: "hi", text_align: "middle", districts: []}, + gujarati: {name: "Gujarati", color: "#7cffee", code: "gu", text_align: "middle", districts: []}, + oriya: {name: "Oriya", color: "#9bcc9f", code: "or", text_align: "middle", districts: []}, + bengali: {name: "Bengali", color: "#bf9a77", code: "bn", text_align: "middle", districts: []}, + punjabi: {name: "Punjabi", color: "#e84a35", code: "pa", text_align: "middle", districts: []}, + mizo: {name: "Mizo", color: "#a6a4de", code: "lus", text_align: "middle", districts: []}, + assamese: {name: "Assamese", color: "#c9535b", code: "as", text_align: "middle", districts: []}, + bhojpuri: {name: "Bhojpuri", color: "#b3b876", code: "bho", text_align: "end", districts: []}, + manipuri: {name: "Manipuri", color: "#c9afad", code: "mni-Mtei", text_align: "middle", districts: []}, + dogri: {name: "Dogri", color: "#9595e6", code: "doi", text_align: "middle", districts: []}, + nepali: {name: "Nepali", color: "#71998e", code: "ne", text_align: "middle", districts: []}, + urdu: {name: "Urdu", color: "#3fa179", code: "ur", text_align: "middle", districts: []}, + tulu: {name: "Tulu", color: "#dedc52", code: "tcy", text_align: "end", districts: []}, + maithali: {name: "Maithali", color: "#4472a6", code: "mai", text_align: "middle", districts: []}, + sindhi: {name: "Sindhi", color: "#e89931", code: "sd", text_align: "middle", districts: []}, + awadhi: {name: "Awadhi", color: "#847fb5", code: "awa", text_align: "middle", districts: []}, }; // Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel @@ -291,8 +291,8 @@ function drawMap(world) { rtv -= 20; } if (d.properties.lang_name == "Tamil") { - rtv += 20; - } + rtv -= 10; + } if (d.properties.lang_name == "Kannada" && window.innerWidth <= 768) { rtv += 15; } @@ -317,7 +317,10 @@ function drawMap(world) { } } if (d.properties.lang_name == "Tamil") { - rtv -= 20; + rtv -= 10; + } + if (d.properties.lang_name == "Malayalam") { + rtv += 10; } if (d.properties.lang_name == "Gujarati") { rtv -= 10; @@ -331,12 +334,13 @@ function drawMap(world) { if (d.properties.lang_name == "Bengali") { rtv += 25; } + if (d.properties.lang_name == "Hindi") { + rtv += 5 * parseFloat(getComputedStyle(document.documentElement).fontSize); // 5rem + } return rtv } }) - .attr("text-anchor", "middle") - .attr("fill", "black") .attr("class", "translationText") .attr("id", function(d) { if (stateOrDistrictOrLanguage(d) == "language") { @@ -351,7 +355,9 @@ function drawMap(world) { } else { d3.select(this).remove() // Only add this attribute if the element is a language } - }); + }) + .attr("text-anchor", d => typeof d.properties.lang_name != "undefined" && languages[d.properties.lang_name.toLowerCase()].text_align) + .attr("fill", "black") // Romanization textItems.append("text") @@ -361,8 +367,6 @@ function drawMap(world) { .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", "romanizationText") .attr("id", function(d) { if (stateOrDistrictOrLanguage(d) == "language") { @@ -375,7 +379,9 @@ function drawMap(world) { if (!stateOrDistrictOrLanguage(d) == "language") { d3.select(this).remove() // Only add this attribute if the element is a language } - }); + }) + .attr("text-anchor", d => typeof d.properties.lang_name != "undefined" && languages[d.properties.lang_name.toLowerCase()].text_align) + .attr("fill", "black") // Language textItems.append("text") @@ -385,8 +391,6 @@ function drawMap(world) { .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") { @@ -407,6 +411,9 @@ function drawMap(world) { d3.select(this).remove() // Only add this attribute if the element is a language } }) + .attr("text-anchor", d => typeof d.properties.lang_name != "undefined" && languages[d.properties.lang_name.toLowerCase()].text_align) + .attr("fill", "black") + let allLangs = [] const coordinates = [77.69916967457782,23.389970772934166];