You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
274 lines
8.8 KiB
JavaScript
274 lines
8.8 KiB
JavaScript
const svg = d3.select("svg")
|
|
|
|
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"
|
|
|
|
const languages = {
|
|
tamil: {name: "Tamil", color: tamilColor, districts: []},
|
|
malayalam: {name: "Malayalam", color: malayalamColor, districts: []},
|
|
kannada: {name: "Kannada", color: kannadaColor, districts: []},
|
|
telugu: {name: "Telugu", color: teluguColor, districts: []},
|
|
marathi: {name: "Marathi", color: marathiColor, districts: []},
|
|
konkani: {name: "Konkani", color: konkaniColor, districts: []},
|
|
hindi: {name: "Hindi", color: hindiColor, districts: []},
|
|
gujarati: {name: "Gujarati", color: gujaratiColor, districts: []},
|
|
marwari: {name: "Marwari", color: marwariColor, districts: []},
|
|
oriya: {name: "Oriya", color: oriyaColor, districts: []},
|
|
bengali: {name: "Bengali", color: bengaliColor, districts: []},
|
|
punjabi: {name: "Punjabi", color: punjabiColor, districts: []},
|
|
mizo: {name: "Mizo", color: mizoColor, districts: []},
|
|
assamese: {name: "Assamese", color: assameseColor, districts: []},
|
|
bhojpuri: {name: "Bhojpuri", color: bhojpuriColor, districts: []},
|
|
manipuri: {name: "Manipuri", color: manipuriColor, districts: []},
|
|
dogri: {name: "Dogri", color: dogriColor, districts: []},
|
|
nepali: {name: "Nepali", color: nepaliColor, districts: []},
|
|
urdu: {name: "Urdu", color: urduColor, districts: []},
|
|
tulu: {name: "Tulu", color: tuluColor, districts: []},
|
|
maithali: {name: "Maithali", color: maithaliColor, districts: []},
|
|
unavail: {name: "Unavailable", color: unavailLangColor, districts: []},
|
|
};
|
|
|
|
// Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
|
|
const state2lang = {
|
|
"Tamil Nadu": languages["tamil"],
|
|
"Kerala": languages["malayalam"],
|
|
"Karnataka": languages["kannada"],
|
|
"Andhra Pradesh": languages["telugu"],
|
|
"Telangana": languages["telugu"],
|
|
"Maharashtra": languages["marathi"],
|
|
"Goa": languages["konkani"],
|
|
"Odisha": languages["oriya"],
|
|
"Gujarat": languages["gujarati"],
|
|
"Rajasthan": languages["marwari"],
|
|
"Chhattisgarh": languages["hindi"],
|
|
"Jharkhand": languages["hindi"], // DEFAULT
|
|
"West Bengal": languages["bengali"],
|
|
"Assam": languages["assamese"],
|
|
"Meghalaya": languages["unavail"], // DEFAULT
|
|
"Tripura": languages["bengali"],
|
|
"Mizoram": languages["mizo"],
|
|
"Manipur": languages["manipuri"],
|
|
"Nagaland": languages["unavail"], // DEFAULT
|
|
"Arunachal Pradesh": languages["unavail"], // DEFAULT
|
|
"Sikkim": languages["nepali"],
|
|
"Bihar": languages["bhojpuri"],
|
|
"Madhya Pradesh": languages["hindi"],
|
|
"Uttar Pradesh": languages["hindi"],
|
|
"Uttarakhand": languages["hindi"], // DEFAULT
|
|
"Haryana": languages["hindi"], // DEFAULT
|
|
"Punjab": languages["punjabi"],
|
|
"Himachal Pradesh": languages["hindi"], // DEFAULT
|
|
"Ladakh": languages["dogri"],
|
|
"Jammu and Kashmir": languages["dogri"],
|
|
|
|
"Dadra and Nagar Haveli and Daman and Diu": languages["gujarati"],
|
|
"Puducherry": languages["tamil"],
|
|
"Lakshadweep": languages["malayalam"],
|
|
"Andaman and Nicobar Islands": languages["unavail"],
|
|
"Delhi": languages["hindi"],
|
|
"Chandigarh": languages["hindi"]
|
|
|
|
}
|
|
|
|
const district2lang = { // Should override state colors
|
|
"Dakshina Kannada": languages["tulu"],
|
|
|
|
"Muzaffarpur": languages["maithali"],
|
|
"West Champaran": languages["maithali"],
|
|
"East Champaran": languages["maithali"],
|
|
"Vaishali": languages["maithali"],
|
|
"Sitamarhi": languages["maithali"],
|
|
"Sheohar": languages["maithali"],
|
|
"Saharsa": languages["maithali"],
|
|
"Madhepura": languages["maithali"],
|
|
"Supaul": languages["maithali"],
|
|
"Araria": languages["maithali"],
|
|
"Katihar": languages["maithali"],
|
|
"Kishanganj": languages["maithali"],
|
|
"Purnia": languages["maithali"],
|
|
"Banka": languages["maithali"],
|
|
"Bhagalpur": languages["maithali"],
|
|
"Munger": languages["maithali"],
|
|
"Begusarai": languages["maithali"],
|
|
"Jamui": languages["maithali"],
|
|
"Khagaria": languages["maithali"],
|
|
"Sheikhpura": languages["maithali"],
|
|
"Lakhisarai": languages["maithali"],
|
|
"Godda": languages["maithali"],
|
|
"Deoghar": languages["maithali"],
|
|
"Dumka": languages["maithali"],
|
|
"Jamtara": languages["maithali"],
|
|
"Sahibganj": languages["maithali"],
|
|
"Pakur": languages["maithali"],
|
|
"Darbhanga": languages["maithali"],
|
|
"Madhubani": languages["maithali"],
|
|
"Samastipur": languages["maithali"],
|
|
|
|
"Moradabad": languages["urdu"],
|
|
"Rampur": languages["urdu"],
|
|
"Bijnor": languages["urdu"],
|
|
"Amroha": languages["urdu"],
|
|
"Meerut": languages["urdu"],
|
|
"Ghaziabad": languages["urdu"],
|
|
"Bulandshahr": languages["urdu"],
|
|
"Aligarh": languages["urdu"],
|
|
"Budaun": languages["urdu"],
|
|
"Bareilly": languages["urdu"],
|
|
"Sambhal": languages["urdu"],
|
|
"Muzaffarnagar": languages["urdu"],
|
|
"Saharanpur": languages["urdu"],
|
|
"Shamli": languages["urdu"],
|
|
"Hapur": languages["urdu"],
|
|
}
|
|
|
|
|
|
function reverseCoordArrays(coords) {
|
|
if (!Array.isArray(coords)) {
|
|
return coords;
|
|
}
|
|
if (coords.every(item => Array.isArray(item) && item.length == 2 && item.every(val => Number.isFinite(val)))) {
|
|
if (!turf.booleanClockwise(coords)) {
|
|
return coords.reverse();
|
|
} else {
|
|
return coords;
|
|
}
|
|
}
|
|
|
|
return coords.map(reverseCoordArrays);
|
|
}
|
|
|
|
|
|
function getOuterBoundaryPolygon(features) {
|
|
try {
|
|
|
|
// Check if we have features to process
|
|
if (!features || features.length === 0) {
|
|
console.warn("No features to process for boundary");
|
|
return null;
|
|
}
|
|
|
|
// Handle single feature case
|
|
if (features.length === 1) {
|
|
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) {
|
|
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")
|
|
console.log(d3.geoBounds(world));
|
|
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 => district2lang.hasOwnProperty(d.properties.district) ?
|
|
district2lang[d.properties.district].color :
|
|
state2lang[d.properties.st_nm].color)
|
|
.each(function(d) {
|
|
if (stateOrDistrict(d) == "district") {
|
|
districtLang = district2lang.hasOwnProperty(d.properties.district) ? district2lang[d.properties.district] : state2lang[d.properties.st_nm];
|
|
districtLang.districts.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);
|
|
|
|
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)
|
|
|
|
|
|
}
|
|
|
|
d3.json("india_with_districts.json").then(drawMap)
|
|
|