diff --git a/testing_turfjs.js b/testing_turfjs.js new file mode 100644 index 0000000..2b9146d --- /dev/null +++ b/testing_turfjs.js @@ -0,0 +1,168 @@ +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)