From 1857dd43fcf8845de423072cc1b17f5a4f5e753c Mon Sep 17 00:00:00 2001 From: Aadhavan Srinivasan Date: Tue, 25 Feb 2025 22:28:58 -0500 Subject: [PATCH] Use the new districts file; display district name instead of state name --- index.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/index.js b/index.js index e16b92d..b83e2d2 100644 --- a/index.js +++ b/index.js @@ -5,6 +5,9 @@ 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 = { @@ -12,9 +15,9 @@ const colorMap = { "Kerala": color2, "Karnataka": color3, "Andhra Pradesh": color4, - "Maharashtra": color4, + "Telangana": color4, + "Maharashtra": color5, "Goa": color2, - "Telangana": color2, "Odisha": color3, "Gujarat": color1, "Rajasthan": color3, @@ -58,9 +61,9 @@ function drawMap(world) { .attr("class", "state") .attr("fill", d => colorMap[d.properties.name]) .append("title") // Tooltip - .text(d => d.properties.name) + .text(d => d.properties.district) .each(function(d) { - map1.set(d.properties.name, d3.geoCentroid(d)); + map1.set(d.properties.district, d3.geoCentroid(d)); }); states.append("text") @@ -70,8 +73,8 @@ function drawMap(world) { .attr("font-size", "12px") .attr("fill", "black") .attr("class", "stateText") - .attr("id", d => d.properties.name+"Text") - .text(d => d.properties.name); + .attr("id", d => d.properties.district+"Text") + .text(d => d.properties.district); // Draw the map // svg.selectAll("path") @@ -102,6 +105,6 @@ function drawMap(world) { } // Load GeoJSON file -d3.json("india.json").then(drawMap) +d3.json("india_with_districts.json").then(drawMap) console.log(map1)