From c98af5a5ae90447cb4e8137722af3c37cf75e6c9 Mon Sep 17 00:00:00 2001
From: Aadhavan Srinivasan <aadhavan@twomorecents.org>
Date: Wed, 26 Feb 2025 12:09:45 -0500
Subject: [PATCH] Draw states after districts; add 'fill: none' CSS to states;
store a map of color to all features with that color
---
index.html | 12 +++++++++---
index.js | 25 +++++++++++++++++++------
2 files changed, 28 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index a728727..faeb434 100644
--- a/index.html
+++ b/index.html
@@ -21,17 +21,23 @@
padding: 2em;
}
.state {
+ stroke: black;
+ fill: none;
+ stroke-width: 1;
+ }
+
+ .district {
stroke: white;
stroke-width: 0.5;
transition: fill 0.3s;
}
- .state:hover {
+ .district:hover {
stroke-width: 1.5;
}
- .stateText {
+ .districtText {
visibility: hidden;
}
- .state:hover ~ .stateText {
+ .district:hover ~ .districtText {
visibility: visible;
}
</style>
diff --git a/index.js b/index.js
index 98e6b54..7c27975 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,5 @@
const svg = d3.select("svg")
-const map1 = new Map()
+const colorToDistrict = new Map()
const tamilColor = "#75d795" // Tamil
const malayalamColor = "#ff7c7c" // Malayalam
@@ -106,8 +106,14 @@ const districtColorMap = { // Should override state colors
"Saharanpur": urduColor,
"Shamli": urduColor,
"Hapur": urduColor,
+}
-
+function stateOrDistrict(d) {
+ if (typeof d.properties.district !== 'undefined') {
+ return "district"
+ } else {
+ return "state"
+ }
}
function drawMap(world) {
@@ -123,10 +129,17 @@ function drawMap(world) {
states.append("path")
.attr("d", path)
- .attr("class", "state")
+ .attr("class", d => stateOrDistrict(d))
.attr("fill", d => districtColorMap.hasOwnProperty(d.properties.district) ?
districtColorMap[d.properties.district] :
colorMap[d.properties.st_nm])
+ .each(function(d) {
+ if (!colorToDistrict.hasOwnProperty(this.getAttribute("fill"))) {
+ colorToDistrict[this.getAttribute("fill")] = [d]
+ } else {
+ colorToDistrict[this.getAttribute("fill")].push(d)
+ }
+ })
.append("title") // Tooltip
.text(d => d.properties.district);
@@ -136,11 +149,11 @@ function drawMap(world) {
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.attr("fill", "black")
- .attr("class", "stateText")
+ .attr("class", "districtText")
.attr("id", d => d.properties.district+"Text")
.text(d => d.properties.district);
}
-d3.json("india_with_districts_without_states.json").then(drawMap)
+d3.json("india_with_districts.json").then(drawMap)
+console.log(colorToDistrict)
-console.log(map1)