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.
111 lines
3.0 KiB
JavaScript
111 lines
3.0 KiB
JavaScript
const svg = d3.select("svg")
|
|
const map1 = new Map();
|
|
|
|
const color1 = "#75d795"
|
|
const color2 = "#ff7c7c"
|
|
const color3 = "#ffe77c"
|
|
const color4 = "#7c9dff"
|
|
const color5 = "#e0ff7c"
|
|
const color6 = "#9b7cff"
|
|
|
|
|
|
// 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": color3,
|
|
"Gujarat": color1,
|
|
"Rajasthan": color3,
|
|
"Chhattisgarh": color1,
|
|
"Jharkhand": color2,
|
|
"West Bengal": color1,
|
|
"Assam": color2,
|
|
"Meghalaya": color3,
|
|
"Tripura": color4,
|
|
"Mizoram": color1,
|
|
"Manipur": color3,
|
|
"Nagaland": color1,
|
|
"Arunachal Pradesh": color4,
|
|
"Sikkim": color2,
|
|
"Bihar": color3,
|
|
"Madhya Pradesh": color2,
|
|
"Uttar Pradesh": color4,
|
|
"Uttarakhand": color2,
|
|
"Haryana": color1,
|
|
"Punjab": color4,
|
|
"Himachal Pradesh": color3,
|
|
"Ladakh": color1,
|
|
"Jammu and Kashmir": color2,
|
|
}
|
|
|
|
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.name])
|
|
.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);
|
|
|
|
// Draw the map
|
|
// svg.selectAll("path")
|
|
// .data(world.features)
|
|
// .enter()
|
|
// .append("path")
|
|
// .attr("d", path)
|
|
// .attr("class", "state")
|
|
// .attr("fill", d => colorMap[d.properties.name])
|
|
// .append("title") // Tooltip
|
|
// .text(d => d.properties.name)
|
|
// .each(function(d) {
|
|
// map1.set(d.properties.name, d3.geoCentroid(d));
|
|
// })
|
|
// .each(function(d) {
|
|
// const [x, y] = projection(d3.geoCentroid(d)); // Get centroid
|
|
//
|
|
// d3.select(this.parentNode) // Select the parent <svg> or <g> container
|
|
// .append("text") // Append text immediately after the path
|
|
// .attr("x", x)
|
|
// .attr("y", y)
|
|
// .attr("text-anchor", "middle")
|
|
// .attr("font-size", "12px")
|
|
// .attr("fill", "black")
|
|
// .text(d.properties.name);
|
|
// });
|
|
|
|
}
|
|
|
|
// Load GeoJSON file
|
|
d3.json("india_with_districts.json").then(drawMap)
|
|
|
|
console.log(map1)
|