Updated JSON with Sindhi and Santali language boundaries

Added Santali and Sindhi languages; removed 'try ... catch' block because the function shouldn't error
Added a transparent fill, so that the language boundary can be 'hovered' on; added a hover action
2025-02-27 09:36:46 -05:00 · 2025-02-27 09:36:28 -05:00 · 2025-02-27 09:35:24 -05:00 · 2025-02-27 09:34:48 -05:00 · 2025-02-27 06:49:22 -05:00 · 2025-02-27 06:48:07 -05:00
4 changed files with 145428 additions and 54 deletions
--- a/index.html
+++ b/index.html
@@ -27,8 +27,11 @@
 			}
 			.language {
 				stroke: red;
-				fill: none;
-				stroke-width: 1;
+				/* There has to be a fill, even if it's transparent, to allow
+				hover events to be recognized on the inside. */
+				fill: black;
+				fill-opacity: 0.0;
+				stroke-width: 2;
 			}

 			.district {
@@ -36,15 +39,15 @@
 				stroke-width: 0.5;
 				transition: fill 0.3s;
 			}
-			.district:hover {
-				stroke-width: 1.5;
+			.language:hover {
+				stroke-width: 3;
 			}
 			.districtText {
 				visibility: hidden;
 			}
-			.district:hover ~ .districtText {
+/*			.district:hover ~ .districtText {
 				visibility: visible;
-			}
+			}*/
 		</style>
 	</head>
 	<body>
--- a/index.js
+++ b/index.js
@@ -21,6 +21,8 @@ const nepaliColor = "#71998e" // Nepali
 const urduColor = "#3fa179" // Urdu
 const tuluColor = "#dedc52" // Tulu
 const maithaliColor = "#4472a6" // Maithali
+const santaliColor = "#96bf60" // Santhali
+const sindhiColor = "#e89931" // Sindhi

 const unavailLangColor = "#555555"

@@ -46,6 +48,8 @@ const languages = {
 			urdu: {name: "Urdu", color: urduColor, districts: []},
 			tulu: {name: "Tulu", color: tuluColor, 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: []},
 			};

@@ -140,6 +144,21 @@ const district2lang = { // Should override state colors
 	"Saharanpur": languages["urdu"],
 	"Shamli": 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) {
-  try {
-
    // Check if we have features to process
    if (!features || features.length === 0) {
      console.warn("No features to process for boundary");
@@ -173,43 +190,28 @@ function getOuterBoundaryPolygon(features) {
      return features[0];
    }

-    // Combine all polygons using turf.union
    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);
    return combined;
-  } catch (error) {
-    console.error("Error processing GeoJSON:", error);
-    return null;
-  }
 }


-
-
-
-
-function stateOrDistrict(d) {
+function stateOrDistrictOrLanguage(d) {
 	if (typeof d.properties.district !== 'undefined') {
 		return "district"
 	} else {
-		return "state"
+		if (typeof d.properties.lang_name !== 'undefined') {
+			return "language"
+		} else {
+			return "state"
+		}
 	}
 }

 function drawMap(world) {
 	const mapWidth = document.getElementById("indiaMap").getAttribute("width")
 	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
-	console.log(d3.geoBounds(world));
 	const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
 	const path = d3.geoPath().projection(projection);

@@ -220,12 +222,16 @@ function drawMap(world) {

 	states.append("path")
 		.attr("d", path)
-		.attr("class", d => stateOrDistrict(d))
-		.attr("fill", d => district2lang.hasOwnProperty(d.properties.district) ?
+		.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)
+								state2lang[d.properties.st_nm].color
+				}
+		})
 		.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.districts.push(d)
 				}
@@ -245,29 +251,27 @@ function drawMap(world) {

 		let allLangs = []

-		for (const [langId,lang] of Object.entries(languages)) {
-			let geojson = {
-			    "type": "FeatureCollection",
-			    "features": lang.districts
-			};
-			
-			let outerBound = getOuterBoundaryPolygon(geojson.features)
-			outerBound["id"] = "lang" + lang.name
-			outerBound.properties["lang_name"]= lang.name
-			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)
+	// for (const [langId,lang] of Object.entries(languages)) {
+	// 	let geojson = {
+	// 	    "type": "FeatureCollection",
+	// 	    "features": lang.districts
+	// 	};
+	// 	
+	// 	let outerBound = getOuterBoundaryPolygon(geojson.features)
+	// 	outerBound["id"] = "lang" + lang.name
+	// 	outerBound.properties["lang_name"]= lang.name
+	// 	allLangs.push(outerBound);

+	// 	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)

--- a/india_with_districts_with_languages.json
+++ b/india_with_districts_with_languages.json
--- a/language_borders.json
+++ b/language_borders.json
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