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; } 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)