Rockingcool
/
india-translator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added colors to the map (used four-color theorem, but did it manually)

Browse Source
resizeSvg
Aadhavan Srinivasan 2 months ago
parent 3a104140ab
commit bc3f69bfa3
1 changed files with 94 additions and 53 deletions
Show Stats Download Patch File Download Diff File

147
index.html
Unescape Escape View File

@ -1,64 +1,105 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoJSON Map with D3.js</title> <title>GeoJSON Map with D3.js</title>
<script src="https://d3js.org/d3.v7.min.js"></script> <script src="https://d3js.org/d3.v7.min.js"></script>
<style> <style>
body { body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
background-color: #f4f4f4; background-color: #f4f4f4;
} }
svg { svg {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.state { .state {
fill: lightblue; stroke: black;
stroke: black; stroke-width: 0.5;
stroke-width: 0.5; transition: fill 0.3s;
transition: fill 0.3s; }
} .state:hover {
.state:hover { stroke-width: 1.5;
fill: orange; }
} </style>
</style> </head>
</head> <body>
<body>
<svg width="1000" height="600"></svg> <svg width="1000" height="600"></svg>
<script> <script>
const svg = d3.select("svg") const svg = d3.select("svg")
const map1 = new Map(); const map1 = new Map();
function drawMap(world) { const color1 = "#75d795"
const projection = d3.geoMercator().fitSize([1000,600], world) const color2 = "#ff7c7c"
const path = d3.geoPath().projection(projection); const color3 = "#ffe77c"
const color4 = "#7c9dff"
// Draw the map // Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
svg.selectAll("path") const colorMap = {
.data(world.features) "Tamil Nadu": color1,
.enter() "Kerala": color2,
.append("path") "Karnataka": color3,
.attr("d", path) "Andhra Pradesh": color4,
.attr("class", "state") "Maharashtra": color4,
.append("title") // Tooltip "Goa": color3,
.text(d => d.properties.name) "Telangana": color2,
.each(function(d) { "Odisha": color3,
map1.set(d.properties.name, d3.geoCentroid(d)); "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"]
// Load GeoJSON file function drawMap(world) {
d3.json("india.json").then(drawMap) const projection = d3.geoMercator().fitSize([1000,600], world)
const path = d3.geoPath().projection(projection);
console.log(map1) // Draw the map
</script> 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));
})
</body> }
// Load GeoJSON file
d3.json("india.json").then(drawMap)
console.log(map1)
</script>
</body>
</html> </html>

Write Preview
Loading…
Cancel
Save