india-translator/index.js

const svg = d3.select("svg")
const colorToDistrict = new Map()

const tamilColor = "#75d795" // Tamil
const malayalamColor = "#ff7c7c" // Malayalam
const kannadaColor = "#ffe77c" // Kannada
const teluguColor = "#7c9dff" // Telugu
const marathiColor = "#e0ff7c" // Marathi
const konkaniColor = "#9b7cff" // Konkani
const hindiColor = "#d17cff" // Hindi
const gujaratiColor = "#7cffee" // Gujarati
const marwariColor = "#7bc4c9" // Marwari
const oriyaColor = "#9bcc9f" // Oriya
const bengaliColor = "#bf9a77" // Bengali
const punjabiColor = "#e84a35" // Punjabi
const mizoColor = "#a6a4de" // Mizo
const AssameseColor = "#c9535b" // Assamese
const bhojpuriColor = "#b3b876" // Bhojpuri
const manipuriColor = "#c9afad" // Manipuri
const dogriColor = "#9595e6" // Dogri (near Kashmir)
const nepaliColor = "#71998e" // Nepali
const urduColor = "#3fa179" // Urdu
const tuluColor = "#dedc52" // Tulu
const maithaliColor = "#4472a6" // Maithali

const unavailLangColor = "#555555"

// Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
const colorMap = {
		"Tamil Nadu": tamilColor,
		"Kerala": malayalamColor,
		"Karnataka": kannadaColor,
		"Andhra Pradesh": teluguColor,
		"Telangana": teluguColor,
		"Maharashtra": marathiColor,
		"Goa": konkaniColor,
		"Odisha": oriyaColor,
		"Gujarat": gujaratiColor,
		"Rajasthan": marwariColor,
		"Chhattisgarh": hindiColor,
		"Jharkhand": hindiColor, // DEFAULT
		"West Bengal": bengaliColor,
		"Assam": AssameseColor,
		"Meghalaya": unavailLangColor, // DEFAULT
		"Tripura": bengaliColor,
		"Mizoram": mizoColor,
		"Manipur": manipuriColor,
		"Nagaland": unavailLangColor, // DEFAULT
		"Arunachal Pradesh": unavailLangColor, // DEFAULT
		"Sikkim": nepaliColor,
		"Bihar": bhojpuriColor,
		"Madhya Pradesh": hindiColor,
		"Uttar Pradesh": hindiColor,
		"Uttarakhand": hindiColor, // DEFAULT
		"Haryana": hindiColor, // DEFAULT
		"Punjab": punjabiColor,
		"Himachal Pradesh": hindiColor, // DEFAULT
		"Ladakh": dogriColor,
		"Jammu and Kashmir": dogriColor,
}

const districtColorMap = { // Should override state colors
	"Dakshina Kannada": tuluColor,

	"Muzaffarpur": maithaliColor,
	"West Champaran": maithaliColor,
	"East Champaran": maithaliColor,
	"Vaishali": maithaliColor,
	"Sitamarhi": maithaliColor,
	"Sheohar": maithaliColor,
	"Saharsa": maithaliColor,
	"Madhepura": maithaliColor,
	"Supaul": maithaliColor,
	"Araria": maithaliColor,
	"Katihar": maithaliColor,
	"Kishanganj": maithaliColor,
	"Purnia": maithaliColor,
	"Banka": maithaliColor,
	"Bhagalpur": maithaliColor,
	"Munger": maithaliColor,
	"Begusarai": maithaliColor,
	"Jamui": maithaliColor,
	"Khagaria": maithaliColor,
	"Sheikhpura": maithaliColor,
	"Lakhisarai": maithaliColor,
	"Godda": maithaliColor,
	"Deoghar": maithaliColor,
	"Dumka": maithaliColor,
	"Jamtara": maithaliColor,
	"Sahibganj": maithaliColor,
	"Pakur": maithaliColor,
	"Darbhanga": maithaliColor,
	"Madhubani": maithaliColor,
	"Samastipur:": maithaliColor,

	"Moradabad": urduColor,
	"Rampur": urduColor,
	"Bijnor": urduColor,
	"Amroha": urduColor,
	"Meerut": urduColor,
	"Ghaziabad": urduColor,
	"Bulandshahr": urduColor,
	"Aligarh": urduColor,
	"Budaun": urduColor,
	"Bareilly": urduColor,
	"Sambhal": urduColor,
	"Muzaffarnagar": urduColor,
	"Saharanpur": urduColor,
	"Shamli": urduColor,
	"Hapur": urduColor,
}

// Assuming 'features' is your array of GeoJSON polygon features
function getOuterBoundary(features) {
  // Merge all polygons into a single multipolygon
  const merged = turf.union(turf.featureCollection(features));
  
  // If we have a multipolygon, extract its coordinates
  const coordinates = merged.geometry.type === 'MultiPolygon' 
    ? merged.geometry.coordinates 
    : [merged.geometry.coordinates];
  
  // Extract just the outer ring of each polygon (first ring in each polygon)
  const outerRings = coordinates.map(polygon => polygon[0]);
  
  // Create a new Feature with a MultiLineString geometry containing the outer rings
  const boundary = turf.multiLineString(outerRings);
  
console.log(boundary);
  return boundary;
}

function getOuterBoundaryPolygon(features) {
  try {
    // Combine all polygons using turf.union
    let combined = features[0];
    for (let i = 1; i < features.length; i++) {
      combined = turf.union(turf.featureCollection([combined, features[i]]));
    }
    return combined;
  } catch (error) {
    console.error("Error processing GeoJSON:", error);
    return null;
  }
}






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

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

	const states = svg.selectAll("g")
	.data(world.features)
	.enter()
	.append("g");

	states.append("path")
		.attr("d", path)
		.attr("class", d => stateOrDistrict(d))
		.attr("fill", d => districtColorMap.hasOwnProperty(d.properties.district) ?
								districtColorMap[d.properties.district] :
								colorMap[d.properties.st_nm])
		.each(function(d) {
				if (stateOrDistrict(d) == "district") {
					if (!colorToDistrict.hasOwnProperty(this.getAttribute("fill"))) {
						colorToDistrict[this.getAttribute("fill")] = [d]
					} else {
						colorToDistrict[this.getAttribute("fill")].push(d)
					}
				}
		})
		.append("title") // Tooltip
		.text(d => d.properties.district);

	states.append("text")
      .attr("x", d => projection(d3.geoCentroid(d))[0])
      .attr("y", d => projection(d3.geoCentroid(d))[1])
      .attr("text-anchor", "middle")
      .attr("font-size", "12px")
      .attr("fill", "black")
		.attr("class", "districtText")
		.attr("id", d => d.properties.district+"Text")
      .text(d => d.properties.district);



		// Example usage
		let geojson = {
		    "type": "FeatureCollection",
		    "features": colorToDistrict[hindiColor]
		};
		console.log(geojson)
		
	console.log(getOuterBoundaryPolygon(geojson.features));

  // Draw the boundary
  svg.append("path")
    .datum(getOuterBoundaryPolygon(geojson.features))
    .attr("d", path)
    .attr("fill", "none")
    .attr("stroke", "red")
    .attr("stroke-width", 2);

		const bbox = turf.bbox(getOuterBoundaryPolygon(geojson.features));
		console.log("Bounding box:", bbox);


}

d3.json("india_with_districts.json").then(drawMap)
console.log(colorToDistrict)