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.
99 lines
2.7 KiB
JavaScript
99 lines
2.7 KiB
JavaScript
const svg = d3.select("svg")
|
|
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
|
|
|
|
// 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,
|
|
}
|
|
|
|
//const districtColorMap = { // Should override state colors
|
|
// "Dakshina Kannada":
|
|
|
|
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);
|
|
|
|
const states = svg.selectAll("g")
|
|
.data(world.features)
|
|
.enter()
|
|
.append("g");
|
|
|
|
states.append("path")
|
|
.attr("d", path)
|
|
.attr("class", "state")
|
|
.attr("fill", d => 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)
|