india-translator/testing_turfjs.js

const svg = d3.select("svg")
const map1 = 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

// 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": hindiColor, // DEFAULT
		"Tripura": bengaliColor,
		"Mizoram": mizoColor,
		"Manipur": manipuriColor,
		"Nagaland": hindiColor, // DEFAULT
		"Arunachal Pradesh": hindiColor, // 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,


}


const colors9 = ["#75d795", "#EFDFD8", "#D5F6FB", "#E5ECF8", "#F0EBD8", "#F7DFC2", "#B4D9EF", "#F8C57C", "#A4D8D8"]

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);

	// Merging districts with the same language
	const mergedgeoJson = { type: "FeatureCollection", features: []};
	const groupedFeatures = new Map();
	world.features.forEach(function (d) {
		const color = districtColorMap.hasOwnProperty(d.properties.district) ?
								districtColorMap[d.properties.district] :
								colorMap[d.properties.st_nm];
		if (!groupedFeatures.has(color)) {
			groupedFeatures.set(color, d);
		} else {
			groupedFeatures.set(color, turf.union(turf.featureCollection([groupedFeatures.get(color), d])));
		}
	});

	mergedgeoJson.features = Array.from(groupedFeatures.values());

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

	states.append("path")
		.attr("d", path)
		.attr("class", "state")
		.attr("fill", d => districtColorMap.hasOwnProperty(d.properties.district) ?
								districtColorMap[d.properties.district] :
								colorMap[d.properties.st_nm])
		.append("title") // Tooltip
		.text(d => d.properties.district)
		.each(function(d) {
			map1.set(d.properties.district, d3.geoCentroid(d));
		});

	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", "stateText")
		.attr("id", d => d.properties.district+"Text")
      .text(d => d.properties.district);
}

d3.json("india_with_districts_without_states.json").then(drawMap)

console.log(map1)