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

Compare commits

base: Rockingcool:17267b11ac83028679ddae492052653df36462a4
Branches Tags
Rockingcool:master Rockingcool:resizeSvg
..
compare: Rockingcool:5584374dea0ff9c8eb2813eb4ecc65a281253bf8
Branches Tags
Rockingcool:master Rockingcool:resizeSvg

7 Commits
17267b11ac ... 5584374dea

Author SHA1 Message Date
Aadhavan Srinivasan
5584374dea Updated JSON with Sindhi and Santali language boundaries 2025-02-27 09:36:46 -05:00
Aadhavan Srinivasan
f43460e94b Added Santali and Sindhi languages; removed 'try ... catch' block because the function shouldn't error 2025-02-27 09:36:28 -05:00
Aadhavan Srinivasan
ce89a74e70 Added a transparent fill, so that the language boundary can be 'hovered' on; added a hover action 2025-02-27 09:35:24 -05:00
Aadhavan Srinivasan
f9cc824e3e Updated language borders with Sindhi and Santali 2025-02-27 09:34:48 -05:00
Aadhavan Srinivasan
0aa425e6d1 Copied generated JSON data into a file, added it into the districts JSON file and saved the result to a new file 2025-02-27 06:49:22 -05:00
Aadhavan Srinivasan
625b1d1377 Since language boundaries are now loaded from json, I can detect them and apply the right CSS class; removed JSON generation code 2025-02-27 06:48:07 -05:00
Aadhavan Srinivasan
5fc15a2c5c Increase stroke width for language boundaries 2025-02-27 06:47:27 -05:00
4 changed files with 145428 additions and 54 deletions
Expand all files Collapse all files

15
index.html
View File

@@ -27,8 +27,11 @@
} }
.language { .language {
stroke: red; stroke: red;
fill: none; /* There has to be a fill, even if it's transparent, to allow
stroke-width: 1; hover events to be recognized on the inside. */
fill: black;
fill-opacity: 0.0;
stroke-width: 2;
} }
.district { .district {
@@ -36,15 +39,15 @@
stroke-width: 0.5; stroke-width: 0.5;
transition: fill 0.3s; transition: fill 0.3s;
} }
.district:hover { .language:hover {
stroke-width: 1.5; stroke-width: 3;
} }
.districtText { .districtText {
visibility: hidden; visibility: hidden;
} }
.district:hover ~ .districtText { /* .district:hover ~ .districtText {
visibility: visible; visibility: visible;
} }*/
</style> </style>
</head> </head>
<body> <body>

98
index.js
View File

@@ -21,6 +21,8 @@ const nepaliColor = "#71998e" // Nepali
const urduColor = "#3fa179" // Urdu const urduColor = "#3fa179" // Urdu
const tuluColor = "#dedc52" // Tulu const tuluColor = "#dedc52" // Tulu
const maithaliColor = "#4472a6" // Maithali const maithaliColor = "#4472a6" // Maithali
const santaliColor = "#96bf60" // Santhali
const sindhiColor = "#e89931" // Sindhi
const unavailLangColor = "#555555" const unavailLangColor = "#555555"
@@ -46,6 +48,8 @@ const languages = {
urdu: {name: "Urdu", color: urduColor, districts: []}, urdu: {name: "Urdu", color: urduColor, districts: []},
tulu: {name: "Tulu", color: tuluColor, districts: []}, tulu: {name: "Tulu", color: tuluColor, districts: []},
maithali: {name: "Maithali", color: maithaliColor, districts: []}, maithali: {name: "Maithali", color: maithaliColor, districts: []},
santali: {name: "Santali", color: santaliColor, districts: []},
sindhi: {name: "Sindhi", color: sindhiColor, districts: []},
unavail: {name: "Unavailable", color: unavailLangColor, districts: []}, unavail: {name: "Unavailable", color: unavailLangColor, districts: []},
}; };
@@ -140,6 +144,21 @@ const district2lang = { // Should override state colors
"Saharanpur": languages["urdu"], "Saharanpur": languages["urdu"],
"Shamli": languages["urdu"], "Shamli": languages["urdu"],
"Hapur": languages["urdu"], "Hapur": languages["urdu"],
"Kutch": languages["sindhi"],
"Godda": languages["santali"],
"Deoghar": languages["santali"],
"Dumka": languages["santali"],
"Jamtara": languages["santali"],
"Sahibganj": languages["santali"],
"Pakur": languages["santali"],
"East Singhbhum": languages["santali"],
"Jhargram": languages["santali"],
"Bankura": languages["santali"],
"Purulia": languages["santali"],
} }
@@ -160,8 +179,6 @@ function reverseCoordArrays(coords) {
function getOuterBoundaryPolygon(features) { function getOuterBoundaryPolygon(features) {
try {
// Check if we have features to process // Check if we have features to process
if (!features || features.length === 0) { if (!features || features.length === 0) {
console.warn("No features to process for boundary"); console.warn("No features to process for boundary");
@@ -173,43 +190,28 @@ function getOuterBoundaryPolygon(features) {
return features[0]; return features[0];
} }
// Combine all polygons using turf.union
let combined = turf.union(turf.featureCollection(features)) let combined = turf.union(turf.featureCollection(features))
// for (let i=0; i<combined.geometry.coordinates.length; i++) {
// let outerCoords = combined.geometry.coordinates[i]
// if (!turf.booleanClockwise(outerCoords)) {
// outerCoords.reverse()
// }
//
// combined.geometry.coordinates[i] = outerCoords;
// }
combined.geometry.coordinates = reverseCoordArrays(combined.geometry.coordinates); combined.geometry.coordinates = reverseCoordArrays(combined.geometry.coordinates);
return combined; return combined;
} catch (error) {
console.error("Error processing GeoJSON:", error);
return null;
}
} }
function stateOrDistrictOrLanguage(d) {
function stateOrDistrict(d) {
if (typeof d.properties.district !== 'undefined') { if (typeof d.properties.district !== 'undefined') {
return "district" return "district"
} else {
if (typeof d.properties.lang_name !== 'undefined') {
return "language"
} else { } else {
return "state" return "state"
} }
} }
}
function drawMap(world) { function drawMap(world) {
const mapWidth = document.getElementById("indiaMap").getAttribute("width") const mapWidth = document.getElementById("indiaMap").getAttribute("width")
const mapHeight = document.getElementById("indiaMap").getAttribute("height") const mapHeight = document.getElementById("indiaMap").getAttribute("height")
console.log(d3.geoBounds(world));
const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world) const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
const path = d3.geoPath().projection(projection); const path = d3.geoPath().projection(projection);
@@ -220,12 +222,16 @@ function drawMap(world) {
states.append("path") states.append("path")
.attr("d", path) .attr("d", path)
.attr("class", d => stateOrDistrict(d)) .attr("class", d => stateOrDistrictOrLanguage(d))
.attr("fill", d => district2lang.hasOwnProperty(d.properties.district) ? .attr("fill", function(d) {
if (stateOrDistrictOrLanguage(d) === "district") {
return district2lang.hasOwnProperty(d.properties.district) ?
district2lang[d.properties.district].color : district2lang[d.properties.district].color :
state2lang[d.properties.st_nm].color) state2lang[d.properties.st_nm].color
}
})
.each(function(d) { .each(function(d) {
if (stateOrDistrict(d) == "district") { if (stateOrDistrictOrLanguage(d) === "district") {
districtLang = district2lang.hasOwnProperty(d.properties.district) ? district2lang[d.properties.district] : state2lang[d.properties.st_nm]; districtLang = district2lang.hasOwnProperty(d.properties.district) ? district2lang[d.properties.district] : state2lang[d.properties.st_nm];
districtLang.districts.push(d) districtLang.districts.push(d)
} }
@@ -245,29 +251,27 @@ function drawMap(world) {
let allLangs = [] let allLangs = []
for (const [langId,lang] of Object.entries(languages)) { // for (const [langId,lang] of Object.entries(languages)) {
let geojson = { // let geojson = {
"type": "FeatureCollection", // "type": "FeatureCollection",
"features": lang.districts // "features": lang.districts
}; // };
//
let outerBound = getOuterBoundaryPolygon(geojson.features) // let outerBound = getOuterBoundaryPolygon(geojson.features)
outerBound["id"] = "lang" + lang.name // outerBound["id"] = "lang" + lang.name
outerBound.properties["lang_name"]= lang.name // outerBound.properties["lang_name"]= lang.name
allLangs.push(outerBound); // allLangs.push(outerBound);
console.log(JSON.stringify(outerBound, null, 2))
svg.append("path")
.datum(outerBound)
.attr("d", path)
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 2)
}
console.log(allLangs)
// svg.append("path")
// .datum(outerBound)
// .attr("d", path)
// .attr("fill", "none")
// .attr("stroke", "red")
// .attr("stroke-width", 2)
// }
// console.log(JSON.stringify(allLangs))
} }
d3.json("india_with_districts.json").then(drawMap) d3.json("india_with_districts_with_languages.json").then(drawMap)

126890
india_with_districts_with_languages.json Normal file
View File

File diff suppressed because it is too large Load Diff

18477
language_borders.json Normal file
View File

File diff suppressed because it is too large Load Diff