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

Compare commits

base: Rockingcool:72747015ede30ecc5dc678f1cdd9162cbb6aa697
Branches Tags
Rockingcool:master Rockingcool:resizeSvg
...
compare: Rockingcool:7110b0e0e369200ece27375abe1b24ab0c5663fb
Branches Tags
Rockingcool:master Rockingcool:resizeSvg

3 Commits
72747015ed ... 7110b0e0e3

Author SHA1 Message Date
Aadhavan Srinivasan
7110b0e0e3 Set romanization text relative to translation text; Fill languages instead of the individual districts 2025-03-07 15:46:14 -05:00
Aadhavan Srinivasan
d1feca7003 Make districts transparent; dim other languages when one is hovered; change default opacity of language 2025-03-07 15:45:27 -05:00
Aadhavan Srinivasan
3aa4135a81 Put languages before districts, so that district boundaries show up even with full opacity 2025-03-07 15:44:39 -05:00
3 changed files with 17645 additions and 17615 deletions
Expand all files Collapse all files

25
index.html
View File

@@ -34,8 +34,9 @@
stroke: red; stroke: red;
/* There has to be a fill, even if it's transparent, to allow /* There has to be a fill, even if it's transparent, to allow
hover events to be recognized on the inside. */ hover events to be recognized on the inside. */
fill: black; /* fill: black;
fill-opacity: 0.0; fill-opacity: 0.0; */
fill-opacity: 0.8;
stroke-width: 1; stroke-width: 1;
} }
.languageText, .romanizationText { .languageText, .romanizationText {
@@ -48,6 +49,10 @@
.language:hover ~ .languageText { .language:hover ~ .languageText {
visibility: visible; visibility: visible;
} }
.language:hover ~ .romanizationText {
visibility: visible;
}
.testClass:hover { .testClass:hover {
fill: red; fill: red;
cursor: default; cursor: default;
@@ -57,6 +62,8 @@
stroke: white; stroke: white;
stroke-width: 0.25; stroke-width: 0.25;
transition: fill 0.3s; transition: fill 0.3s;
fill: none;
pointer-events: none;
} }
.language:hover { .language:hover {
stroke-width: 2; stroke-width: 2;
@@ -75,6 +82,18 @@
.loading, .htmx-request.loading-indicator /* While request is being made */ { .loading, .htmx-request.loading-indicator /* While request is being made */ {
display: inline; display: inline;
} }
/* Dim all other states */
/* Kinda wild that you can do this in plain CSS */
#indiaMap:has(.language:hover) .language:not(:hover) {
fill-opacity: 0.5;
transition: fill-opacity 0.3s;
}
#indiaMap .language:hover {
fill-opacity: 1;
transition: fill-opacity 0.3s;
}
</style> </style>
</head> </head>
<body> <body>
@@ -89,7 +108,7 @@
<progress id="loading-screen" class="loading-indicator"></progress> <progress id="loading-screen" class="loading-indicator"></progress>
</section> </section>
<svg id = "indiaMap" width="1000" height="1000"></svg> <svg id = "indiaMap" width="1200" height="1200"></svg>
</main> </main>
<script type="text/javascript" src="index.js"></script> <script type="text/javascript" src="index.js"></script>

33
index.js
View File

@@ -213,13 +213,8 @@ function drawMap(world) {
.attr("d", path) .attr("d", path)
.attr("class", d => stateOrDistrictOrLanguage(d)) .attr("class", d => stateOrDistrictOrLanguage(d))
.attr("fill", function(d) { .attr("fill", function(d) {
if (stateOrDistrictOrLanguage(d) === "district") { if (stateOrDistrictOrLanguage(d) === "language") {
const districtLang = district2langFunc(d) return languages[d.properties.lang_name.toLowerCase()].color;
if (typeof districtLang !== 'undefined') {
return districtLang.color
} else {
return defaultColor;
}
} }
}) })
.each(function(d) { .each(function(d) {
@@ -234,8 +229,20 @@ function drawMap(world) {
.text(d => d.properties.district); .text(d => d.properties.district);
states.append("text") states.append("text")
.attr("x", d => projection(d3.geoCentroid(d))[0]) .attr("x", function(d) {
.attr("y", d => projection(d3.geoCentroid(d))[1]) 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("text-anchor", "middle")
.attr("font-size", "12px") .attr("font-size", "12px")
.attr("fill", "black") .attr("fill", "black")
@@ -256,8 +263,12 @@ function drawMap(world) {
}); });
states.append("text") states.append("text")
.attr("x", d => projection(d3.geoCentroid(d))[0]) .attr("x", d => stateOrDistrictOrLanguage(d) == "language" ?
.attr("y", d => projection(d3.geoCentroid(d))[1] + parseFloat(getComputedStyle(document.getElementsByClassName('languageText')[0]).getPropertyValue('font-size'))) 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("text-anchor", "middle")
.attr("font-size", "12px") .attr("font-size", "12px")
.attr("fill", "black") .attr("fill", "black")

35202
india_with_districts_with_languages.json
View File

File diff suppressed because it is too large Load Diff