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 santaliColor = "#96bf60" // Santhali const sindhiColor = "#e89931" // Sindhi const awadhiColor = "#847fb5" // Awadhi 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: []}, santali: {name: "Santali", color: santaliColor, districts: []}, sindhi: {name: "Sindhi", color: sindhiColor, districts: []}, awadhi: {name: "Awadhi", color: awadhiColor, 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"], "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"], } 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 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) === "district") { return district2lang.hasOwnProperty(d.properties.district) ? district2lang[d.properties.district].color : state2lang[d.properties.st_nm].color } }) .each(function(d) { if (stateOrDistrictOrLanguage(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); // 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.json").then(drawMap)