Compare commits

...

7 Commits

4 changed files with 62 additions and 10 deletions

View File

@@ -71,9 +71,6 @@
font-family: sans-serif; font-family: sans-serif;
visibility: hidden; visibility: hidden;
} }
.language:hover ~ .languageText {
visibility: visible;
}
.district { .district {
stroke: white; stroke: white;
@@ -113,11 +110,17 @@
transition: fill-opacity 0.3s; transition: fill-opacity 0.3s;
} }
section#textStuff {
min-width: 30em;
flex: 0 1 0;
}
/* Position map load spinner in the middle of the SVG */ /* Position map load spinner in the middle of the SVG */
#svgContainer { #svgContainer {
position: relative; position: relative;
display: inline-block; display: inline-block;
flex-grow: 1; flex-shrink: 1;
flex-grow: 1;
max-width: 100%; max-width: 100%;
} }
@@ -178,7 +181,7 @@
#fetchingText { #fetchingText {
visibility: hidden; visibility: hidden;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 1366px) {
main { main {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
@@ -186,14 +189,23 @@
.district { .district {
stroke-width: 0.1; stroke-width: 0.1;
} }
.translationText, .romanizationText {
font-size: 1em;
}
.languageText {
font-size: 0.8em;
}
}
@media only screen and (max-width: 768px) {
.translationText, .romanizationText { .translationText, .romanizationText {
font-size: 0.7em; font-size: 0.7em;
} }
.languageText { .languageText {
font-size: 0.6em; font-size: 0.6em;
} }
}
}
</style> </style>
</head> </head>
@@ -211,6 +223,15 @@
<noscript> <noscript>
<h2>This website requires javascript to work.</h2> <h2>This website requires javascript to work.</h2>
</noscript> </noscript>
<p>
<ul>
<li>Enter text in English. Translations are displayed on the map, along with romanizations (translation converted to Latin script).
<li>Hover over a language region (denoted by color) to see the language spoken in the region. Language boundaries were drawn using census data; they may be inaccurate.
<li>Translations are retrieved from Google Translate - they may be innacurate.
<li>Romanizations are made with the <kbd>ai4bharat-transliteration</kbd> AI model, developed by <a href="https://ai4bharat.iitm.ac.in/">Ai4Bharat</a>.
</section> </section>
<section id="svgContainer"> <section id="svgContainer">
@@ -220,6 +241,7 @@
<script type="text/javascript" src="index.js"></script> <script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="updateTranslations.js"></script> <script type="text/javascript" src="updateTranslations.js"></script>
<script type="text/javascript" src="svgHoverListener.js"></script>
</body> </body>

View File

@@ -252,6 +252,11 @@ function drawMap(world) {
states.append("path") states.append("path")
.attr("d", path) .attr("d", path)
.attr("class", d => stateOrDistrictOrLanguage(d)) .attr("class", d => stateOrDistrictOrLanguage(d))
.attr("id", function(d) {
if (stateOrDistrictOrLanguage(d) === "language") {
return languages[d.properties.lang_name.toLowerCase()].code + "langMap";
}
})
.attr("fill", function(d) { .attr("fill", function(d) {
if (stateOrDistrictOrLanguage(d) === "language") { if (stateOrDistrictOrLanguage(d) === "language") {
return languages[d.properties.lang_name.toLowerCase()].color; return languages[d.properties.lang_name.toLowerCase()].color;
@@ -272,7 +277,8 @@ function drawMap(world) {
.append("title") // Tooltip .append("title") // Tooltip
.text(d => d.properties.district); .text(d => d.properties.district);
states.append("text") const textItems = svg.selectAll("g.textItem").data(world.features).enter().append("g");
textItems.append("text")
.attr("x", function(d) { .attr("x", function(d) {
if (stateOrDistrictOrLanguage(d) == "language") { if (stateOrDistrictOrLanguage(d) == "language") {
rtv = projection(d3.geoCentroid(d))[0]; rtv = projection(d3.geoCentroid(d))[0];
@@ -338,7 +344,7 @@ function drawMap(world) {
}); });
// Romanization // Romanization
states.append("text") textItems.append("text")
.attr("x", d => stateOrDistrictOrLanguage(d) == "language" ? .attr("x", d => stateOrDistrictOrLanguage(d) == "language" ?
document.getElementById(d.properties.lang_code + "Text").getAttribute("x") : document.getElementById(d.properties.lang_code + "Text").getAttribute("x") :
projection(d3.geoCentroid(d))[0]) projection(d3.geoCentroid(d))[0])
@@ -362,7 +368,7 @@ function drawMap(world) {
}); });
// Language // Language
states.append("text") textItems.append("text")
.attr("x", d => stateOrDistrictOrLanguage(d) == "language" ? .attr("x", d => stateOrDistrictOrLanguage(d) == "language" ?
document.getElementById(d.properties.lang_code + "Text").getAttribute("x") : document.getElementById(d.properties.lang_code + "Text").getAttribute("x") :
projection(d3.geoCentroid(d))[0]) projection(d3.geoCentroid(d))[0])
@@ -396,6 +402,22 @@ function drawMap(world) {
const coordinates = [77.69916967457782,23.389970772934166]; const coordinates = [77.69916967457782,23.389970772934166];
const [xCoord, yCoord] = projection(coordinates); const [xCoord, yCoord] = projection(coordinates);
// Add a listener to toggle the language display when a language is hovered on the map
document.querySelectorAll(".language").
forEach(function(element) {
element.addEventListener("mouseover", toggleLanguageDisplay);
element.addEventListener("mouseout", toggleLanguageDisplay);
});
// Remove all 'g' elements that have no children (they don't have a language, translation, or romanization). This must mean they accidentally got created when I created the 'textItems' variable
document.querySelectorAll("g").
forEach(function(element) {
if (element.childElementCount == 0) {
element.remove()
}
});
// svg.append("text") // svg.append("text")
// .attr("x", xCoord) // .attr("x", xCoord)
// .attr("y", yCoord) // .attr("y", yCoord)

8
svgHoverListener.js Normal file
View File

@@ -0,0 +1,8 @@
function toggleLanguageDisplay(event) {
if (event.type == "mouseover") {
document.getElementById(this.id.replace(/langMap$/, '') + "Language").style.visibility = "visible";
}
if (event.type == "mouseout") {
document.getElementById(this.id.replace(/langMap$/, '') + "Language").style.visibility = "hidden";
}
}

Binary file not shown.