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.
384 lines
13 KiB
JavaScript
384 lines
13 KiB
JavaScript
const svg = d3.select("svg")
|
|
|
|
const defaultColor = "#555555"
|
|
|
|
const languages = {
|
|
tamil: {name: "Tamil", color: "#75d795", code: "ta", districts: []},
|
|
malayalam: {name: "Malayalam", color: "#ff7c7c", code: "ml", districts: []},
|
|
kannada: {name: "Kannada", color: "#ffe77c", code: "kn", districts: []},
|
|
telugu: {name: "Telugu", color: "#7c9dff", code: "te", districts: []},
|
|
marathi: {name: "Marathi", color: "#e0ff7c", code: "mr", districts: []},
|
|
konkani: {name: "Konkani", color: "#9b7cff", code: "gom", districts: []},
|
|
hindi: {name: "Hindi", color: "#d17cff", code: "hi", districts: []},
|
|
gujarati: {name: "Gujarati", color: "#7cffee", code: "gu", districts: []},
|
|
oriya: {name: "Oriya", color: "#9bcc9f", code: "or", districts: []},
|
|
bengali: {name: "Bengali", color: "#bf9a77", code: "bn", districts: []},
|
|
punjabi: {name: "Punjabi", color: "#e84a35", code: "pa", districts: []},
|
|
mizo: {name: "Mizo", color: "#a6a4de", code: "lus", districts: []},
|
|
assamese: {name: "Assamese", color: "#c9535b", code: "as", districts: []},
|
|
bhojpuri: {name: "Bhojpuri", color: "#b3b876", code: "bho", districts: []},
|
|
manipuri: {name: "Manipuri", color: "#c9afad", code: "mni-Mtei", districts: []},
|
|
dogri: {name: "Dogri", color: "#9595e6", code: "doi", districts: []},
|
|
nepali: {name: "Nepali", color: "#71998e", code: "ne", districts: []},
|
|
urdu: {name: "Urdu", color: "#3fa179", code: "ur", districts: []},
|
|
tulu: {name: "Tulu", color: "#dedc52", code: "tcy", districts: []},
|
|
maithali: {name: "Maithali", color: "#4472a6", code: "mai", districts: []},
|
|
santali: {name: "Santali", color: "#96bf60", code: "sat", districts: []},
|
|
sindhi: {name: "Sindhi", color: "#e89931", code: "sd", districts: []},
|
|
awadhi: {name: "Awadhi", color: "#847fb5", code: "awa", 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["hindi"],
|
|
"Chhattisgarh": languages["hindi"],
|
|
"Jharkhand": languages["hindi"], // DEFAULT
|
|
"West Bengal": languages["bengali"],
|
|
"Assam": languages["assamese"],
|
|
"Tripura": languages["bengali"],
|
|
"Mizoram": languages["mizo"],
|
|
"Manipur": languages["manipuri"],
|
|
"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"],
|
|
"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"],
|
|
|
|
"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"],
|
|
|
|
"Kanpur": languages["awadhi"],
|
|
"Lakhimpur Kheri": languages["awadhi"],
|
|
"Sitapur": languages["awadhi"],
|
|
"Hardoi": languages["awadhi"],
|
|
"Unnao": languages["awadhi"],
|
|
"Fatehpur": languages["awadhi"],
|
|
"Barabanki": languages["awadhi"],
|
|
"Lucknow": languages["awadhi"],
|
|
"Rae Bareli": languages["awadhi"],
|
|
"Amethi": languages["awadhi"],
|
|
"Bahraich": languages["awadhi"],
|
|
}
|
|
|
|
// Functions for calculating and dealing with language boundaries
|
|
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) {
|
|
// 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];
|
|
}
|
|
|
|
let combined = turf.union(turf.featureCollection(features))
|
|
|
|
combined.geometry.coordinates = reverseCoordArrays(combined.geometry.coordinates);
|
|
return combined;
|
|
}
|
|
|
|
function district2langFunc(d) {
|
|
if (district2lang.hasOwnProperty(d.properties.district)) {
|
|
return district2lang[d.properties.district];
|
|
} else if (state2lang.hasOwnProperty(d.properties.st_nm)) {
|
|
return state2lang[d.properties.st_nm];
|
|
} else {
|
|
return undefined;
|
|
}
|
|
}
|
|
|
|
function stateOrDistrictOrLanguage(d) {
|
|
if (typeof d.properties.district !== 'undefined') {
|
|
return "district"
|
|
} else {
|
|
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")
|
|
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 => stateOrDistrictOrLanguage(d))
|
|
.attr("fill", function(d) {
|
|
if (stateOrDistrictOrLanguage(d) === "language") {
|
|
return languages[d.properties.lang_name.toLowerCase()].color;
|
|
}
|
|
})
|
|
.each(function(d) {
|
|
if (stateOrDistrictOrLanguage(d) === "district") {
|
|
const districtLang = district2langFunc(d);
|
|
if (typeof districtLang !== 'undefined') {
|
|
districtLang.districts.push(d)
|
|
}
|
|
}
|
|
// Hide map load spinner after map has loaded
|
|
document.getElementById("mapLoadSpinner").classList.add("hide");
|
|
document.querySelector("svg").classList.add("show");
|
|
|
|
})
|
|
.append("title") // Tooltip
|
|
.text(d => d.properties.district);
|
|
|
|
states.append("text")
|
|
.attr("x", function(d) {
|
|
if (stateOrDistrictOrLanguage(d) == "language") {
|
|
rtv = projection(d3.geoCentroid(d))[0];
|
|
if (d.properties.lang_name == "Kannada") {
|
|
rtv -= 20;
|
|
}
|
|
if (d.properties.lang_name == "Tamil") {
|
|
rtv += 20;
|
|
}
|
|
if (d.properties.lang_name == "Maithali") {
|
|
rtv += 10;
|
|
}
|
|
if (d.properties.lang_name == "Konkani") {
|
|
rtv -= 15;
|
|
}
|
|
return rtv
|
|
}
|
|
})
|
|
.attr("y", function(d) {
|
|
if (stateOrDistrictOrLanguage(d) == "language") {
|
|
rtv = projection(d3.geoCentroid(d))[1]
|
|
if (d.properties.lang_name == "Kannada") {
|
|
rtv += 15;
|
|
}
|
|
if (d.properties.lang_name == "Tamil") {
|
|
rtv -= 20;
|
|
}
|
|
if (d.properties.lang_name == "Gujarati") {
|
|
rtv -= 10;
|
|
}
|
|
if (d.properties.lang_name == "Mizo") {
|
|
rtv += 20;
|
|
}
|
|
if (d.properties.lang_name == "Nepali") {
|
|
rtv -= 10;
|
|
}
|
|
|
|
return rtv
|
|
}
|
|
})
|
|
.attr("text-anchor", "middle")
|
|
.attr("fill", "black")
|
|
.attr("class", "translationText")
|
|
.attr("id", function(d) {
|
|
if (stateOrDistrictOrLanguage(d) == "language") {
|
|
return d.properties.lang_code+"Text"
|
|
} else {
|
|
d3.select(this).remove()
|
|
}
|
|
})
|
|
.text(function(d) {
|
|
if (stateOrDistrictOrLanguage(d) == "language") {
|
|
return d.properties.lang_name;
|
|
} else {
|
|
d3.select(this).remove() // Only add this attribute if the element is a language
|
|
}
|
|
});
|
|
|
|
// Romanization
|
|
states.append("text")
|
|
.attr("x", d => stateOrDistrictOrLanguage(d) == "language" ?
|
|
document.getElementById(d.properties.lang_code + "Text").getAttribute("x") :
|
|
projection(d3.geoCentroid(d))[0])
|
|
.attr("y", d => stateOrDistrictOrLanguage(d) == "language" ?
|
|
parseFloat(document.getElementById(d.properties.lang_code + "Text").getAttribute("y")) + parseFloat(getComputedStyle(document.getElementsByClassName('translationText')[0]).getPropertyValue('font-size')) :
|
|
projection(d3.geoCentroid(d))[1])
|
|
.attr("text-anchor", "middle")
|
|
.attr("fill", "black")
|
|
.attr("class", "romanizationText")
|
|
.attr("id", function(d) {
|
|
if (stateOrDistrictOrLanguage(d) == "language") {
|
|
return d.properties.lang_code+"Romanization"
|
|
} else {
|
|
d3.select(this).remove()
|
|
}
|
|
})
|
|
.each(function(d) {
|
|
if (!stateOrDistrictOrLanguage(d) == "language") {
|
|
d3.select(this).remove() // Only add this attribute if the element is a language
|
|
}
|
|
});
|
|
|
|
// Language
|
|
states.append("text")
|
|
.attr("x", d => stateOrDistrictOrLanguage(d) == "language" ?
|
|
document.getElementById(d.properties.lang_code + "Text").getAttribute("x") :
|
|
projection(d3.geoCentroid(d))[0])
|
|
.attr("y", d => stateOrDistrictOrLanguage(d) == "language" ?
|
|
parseFloat(document.getElementById(d.properties.lang_code + "Text").getAttribute("y")) - parseFloat(getComputedStyle(document.getElementsByClassName('translationText')[0]).getPropertyValue('font-size')) :
|
|
projection(d3.geoCentroid(d))[1])
|
|
.attr("text-anchor", "middle")
|
|
.attr("fill", "black")
|
|
.attr("class", "languageText")
|
|
.attr("id", function(d) {
|
|
if (stateOrDistrictOrLanguage(d) == "language") {
|
|
return d.properties.lang_code+"Language"
|
|
} else {
|
|
d3.select(this).remove()
|
|
}
|
|
})
|
|
.each(function(d) {
|
|
if (!stateOrDistrictOrLanguage(d) == "language") {
|
|
d3.select(this).remove() // Only add this attribute if the element is a language
|
|
}
|
|
})
|
|
.text(function(d) {
|
|
if (stateOrDistrictOrLanguage(d) == "language") {
|
|
return d.properties.lang_name;
|
|
} else {
|
|
d3.select(this).remove() // Only add this attribute if the element is a language
|
|
}
|
|
})
|
|
let allLangs = []
|
|
|
|
const coordinates = [77.69916967457782,23.389970772934166];
|
|
const [xCoord, yCoord] = projection(coordinates);
|
|
|
|
// svg.append("text")
|
|
// .attr("x", xCoord)
|
|
// .attr("y", yCoord)
|
|
// .attr("class", "testClass")
|
|
// .attr("text-anchor", "middle")
|
|
// .attr("font-size", "12px")
|
|
// .attr("fill", "black")
|
|
// .text("Hello, Map!");
|
|
// 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
|
|
// outerBound.properties["lang_code"]= lang.code
|
|
// 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_with_languages_min.json").then(drawMap)
|