Renamed colors; added district colors
This commit is contained in:
166
index.js
166
index.js
@@ -1,65 +1,114 @@
|
||||
const svg = d3.select("svg")
|
||||
const map1 = new Map();
|
||||
const map1 = new Map()
|
||||
|
||||
const color1 = "#75d795" // Tamil
|
||||
const color2 = "#ff7c7c" // Malayalam
|
||||
const color3 = "#ffe77c" // Kannada
|
||||
const color4 = "#7c9dff" // Telugu
|
||||
const color5 = "#e0ff7c" // Marathi
|
||||
const color6 = "#9b7cff" // Konkani
|
||||
const color7 = "#d17cff" // Hindi
|
||||
const color8 = "#" // Gujarati
|
||||
const color9 = "#" // Marwari
|
||||
const color10 = "#" // Oriya
|
||||
const color11 = "#" // Bengali
|
||||
const color12 = "#" // Punjabi
|
||||
const color13 = "#" // Mizo
|
||||
const color14 = "#" // Assamese
|
||||
const color15 = "#" // Bhojpuri
|
||||
const color16 = "#" // Manipuri
|
||||
const color17 = "#" // Dogri (near Kashmir)
|
||||
|
||||
|
||||
const color13 = "#" // Tulu
|
||||
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": color1,
|
||||
"Kerala": color2,
|
||||
"Karnataka": color3,
|
||||
"Andhra Pradesh": color4,
|
||||
"Telangana": color4,
|
||||
"Maharashtra": color5,
|
||||
"Goa": color2,
|
||||
"Odisha": color10,
|
||||
"Gujarat": color8,
|
||||
"Rajasthan": color9,
|
||||
"Chhattisgarh": colorr7,
|
||||
"Jharkhand": color2,
|
||||
"West Bengal": color11,
|
||||
"Assam": color14,
|
||||
"Meghalaya": color3,
|
||||
"Tripura": color4,
|
||||
"Mizoram": color14,
|
||||
"Manipur": color16,
|
||||
"Nagaland": color1,
|
||||
"Arunachal Pradesh": color4,
|
||||
"Sikkim": color2,
|
||||
"Bihar": color3,
|
||||
"Madhya Pradesh": color7,
|
||||
"Uttar Pradesh": color7,
|
||||
"Uttarakhand": color2,
|
||||
"Haryana": color1,
|
||||
"Punjab": color12,
|
||||
"Himachal Pradesh": color3,
|
||||
"Ladakh": color1,
|
||||
"Jammu and Kashmir": color2,
|
||||
"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":
|
||||
const districtColorMap = { // Should override state colors
|
||||
"Dakshina Kannada": tuluColor,
|
||||
|
||||
const colors9 = ["#75d795", "#EFDFD8", "#D5F6FB", "#E5ECF8", "#F0EBD8", "#F7DFC2", "#B4D9EF", "#F8C57C", "#A4D8D8"]
|
||||
"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,
|
||||
|
||||
|
||||
}
|
||||
|
||||
function drawMap(world) {
|
||||
const mapWidth = document.getElementById("indiaMap").getAttribute("width")
|
||||
@@ -75,12 +124,11 @@ function drawMap(world) {
|
||||
states.append("path")
|
||||
.attr("d", path)
|
||||
.attr("class", "state")
|
||||
.attr("fill", d => colorMap[d.properties.st_nm])
|
||||
.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));
|
||||
});
|
||||
.text(d => d.properties.district);
|
||||
|
||||
states.append("text")
|
||||
.attr("x", d => projection(d3.geoCentroid(d))[0])
|
||||
|
Reference in New Issue
Block a user