Rockingcool/india-translator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Rockingcool:79944180d5431bf44acf378fd3b2537181c7728d
Branches Tags
Rockingcool:master Rockingcool:resizeSvg
..
compare: Rockingcool:42e31dab13773449f3879ce0185604135397caf4
Branches Tags
Rockingcool:master Rockingcool:resizeSvg

4 Commits
79944180d5 ... 42e31dab13

Author SHA1 Message Date
Aadhavan Srinivasan
42e31dab13 Use language code instead of language name; removed 'unavail' language; don't add text for districts 2025-03-02 22:05:35 -05:00
Aadhavan Srinivasan
da3b3b8a16 Added loading indicator when translations are being retrieved 2025-03-02 22:02:23 -05:00
Aadhavan Srinivasan
0de268eec5 Replace text on map with translation 2025-03-02 22:02:02 -05:00
Aadhavan Srinivasan
2b8bed7587 Added language codes for all languages; removed 'unavail' langauge (not really a language) 2025-03-02 22:01:46 -05:00
4 changed files with 94 additions and 1595 deletions
Expand all files Collapse all files

17
index.html
View File

@@ -66,24 +66,35 @@
/* .district:hover ~ .districtText {
visibility: visible;
}*/
.loading-indicator {
display: none;
}
.htmx-request.loading-indicator /* While request is being made */ {
display: inline;
}
</style>
</head>
<body>
<main>
<section id="textStuff">
<h1>Indian Translate</h1>
<form hx-get="/submit" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
<label for="query">Enter text to translate:</label>
<input type="text" name="query" id="query" required/>
<input type="submit" value="Translate"/>
</form>
<progress id="loading-screen" class="loading-indicator"></progress>
</section>
<svg id = "indiaMap" width="1000" height="1000"></svg>
</main>
<script src="index.js"></script>
<script src="updateTranslations.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="updateTranslations.js"></script>
</body>
</html>

37
index.js
View File

@@ -25,7 +25,7 @@ const santaliColor = "#96bf60" // Santhali
const sindhiColor = "#e89931" // Sindhi
const awadhiColor = "#847fb5" // Awadhi
const unavailLangColor = "#555555"
const defaultColor = "#555555"
const languages = {
tamil: {name: "Tamil", color: tamilColor, code: "ta", districts: []},
@@ -52,7 +52,6 @@ const languages = {
santali: {name: "Santali", color: santaliColor, code: "sat", districts: []},
sindhi: {name: "Sindhi", color: sindhiColor, code: "sd", districts: []},
awadhi: {name: "Awadhi", color: awadhiColor, code: "awa", districts: []},
unavail: {name: "Unavailable", color: unavailLangColor, code: "unavailable", districts: []},
};
// Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
@@ -71,12 +70,9 @@ const state2lang = {
"Jharkhand": languages["hindi"], // DEFAULT
"West Bengal": languages["bengali"],
"Assam": languages["assamese"],
"Meghalaya": languages["unavail"], // DEFAULT
"Tripura": languages["bengali"],
"Mizoram": languages["mizo"],
"Manipur": languages["manipuri"],
"Nagaland": languages["unavail"], // DEFAULT
"Arunachal Pradesh": languages["unavail"], // DEFAULT
"Sikkim": languages["nepali"],
"Bihar": languages["bhojpuri"],
"Madhya Pradesh": languages["hindi"],
@@ -91,7 +87,6 @@ const state2lang = {
"Dadra and Nagar Haveli and Daman and Diu": languages["gujarati"],
"Puducherry": languages["tamil"],
"Lakshadweep": languages["malayalam"],
"Andaman and Nicobar Islands": languages["unavail"],
"Delhi": languages["hindi"],
"Chandigarh": languages["hindi"]
@@ -239,16 +234,27 @@ function drawMap(world) {
.attr("class", d => stateOrDistrictOrLanguage(d))
.attr("fill", function(d) {
if (stateOrDistrictOrLanguage(d) === "district") {
return district2lang.hasOwnProperty(d.properties.district) ?
district2lang[d.properties.district].color :
state2lang[d.properties.st_nm].color
if (district2lang.hasOwnProperty(d.properties.district)) {
return district2lang[d.properties.district].color;
} else if (state2lang.hasOwnProperty(d.properties.st_nm)) {
return state2lang[d.properties.st_nm].color;
} else {
return defaultColor;
}
}
})
.each(function(d) {
if (stateOrDistrictOrLanguage(d) === "district") {
districtLang = district2lang.hasOwnProperty(d.properties.district) ? district2lang[d.properties.district] : state2lang[d.properties.st_nm];
let districtLang;
if (district2lang.hasOwnProperty(d.properties.district)) {
districtLang = district2lang[d.properties.district];
} else if (state2lang.hasOwnProperty(d.properties.st_nm)) {
districtLang = state2lang[d.properties.st_nm];
}
if (typeof districtLang !== 'undefined') {
districtLang.districts.push(d)
}
}
})
.append("title") // Tooltip
.text(d => d.properties.district);
@@ -260,12 +266,18 @@ function drawMap(world) {
.attr("font-size", "12px")
.attr("fill", "black")
.attr("class", "languageText")
.attr("id", d => d.properties.lang_name+"Text")
.attr("id", function(d) {
if (stateOrDistrictOrLanguage(d) == "language") {
return d.properties.lang_code+"Text"
} else {
d3.select(this).remove()
}
})
.text(function(d) {
if (stateOrDistrictOrLanguage(d) == "language") {
return d.properties.lang_name;
} else {
return d.properties.district;
d3.select(this).remove() // Only add text if the element is a language
}
});
@@ -291,6 +303,7 @@ function drawMap(world) {
// let outerBound = getOuterBoundaryPolygon(geojson.features)
// outerBound["id"] = "lang" + lang.name
// outerBound.properties["lang_name"]= lang.name
// outerBound.properties["lang_code"]= lang.code
// allLangs.push(outerBound);
// svg.append("path")

1624
india_with_districts_with_languages.json
View File

File diff suppressed because it is too large Load Diff

5
updateTranslations.js
View File

@@ -1,3 +1,6 @@
function updateTranslations(response) {
console.log(response)
const translations = JSON.parse(response);
document.querySelectorAll(".languageText").forEach(element => {
element.textContent = translations[element.id.replace("Text", "")];
});
}