|
|
|
|
@ -3,18 +3,20 @@
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>GeoJSON Map with D3.js</title>
|
|
|
|
|
<title>Indian Translate</title>
|
|
|
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
background-color: #f4f4f4;
|
|
|
|
|
}
|
|
|
|
|
main {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
justify-content: space-evenly;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
border: 1px solid;
|
|
|
|
|
}
|
|
|
|
|
.state {
|
|
|
|
|
stroke: black;
|
|
|
|
|
@ -27,79 +29,19 @@
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<main>
|
|
|
|
|
<section id="textStuff">
|
|
|
|
|
<h1>Indian Translate</h1>
|
|
|
|
|
|
|
|
|
|
<svg width="1000" height="600"></svg>
|
|
|
|
|
<script>
|
|
|
|
|
const svg = d3.select("svg")
|
|
|
|
|
const map1 = new Map();
|
|
|
|
|
|
|
|
|
|
const color1 = "#75d795"
|
|
|
|
|
const color2 = "#ff7c7c"
|
|
|
|
|
const color3 = "#ffe77c"
|
|
|
|
|
const color4 = "#7c9dff"
|
|
|
|
|
|
|
|
|
|
// Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
|
|
|
|
|
const colorMap = {
|
|
|
|
|
"Tamil Nadu": color1,
|
|
|
|
|
"Kerala": color2,
|
|
|
|
|
"Karnataka": color3,
|
|
|
|
|
"Andhra Pradesh": color4,
|
|
|
|
|
"Maharashtra": color4,
|
|
|
|
|
"Goa": color3,
|
|
|
|
|
"Telangana": 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 projection = d3.geoMercator().fitSize([1000,600], world)
|
|
|
|
|
const path = d3.geoPath().projection(projection);
|
|
|
|
|
|
|
|
|
|
// 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));
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Load GeoJSON file
|
|
|
|
|
d3.json("india.json").then(drawMap)
|
|
|
|
|
<label for="toTranslate">Enter text to translate:
|
|
|
|
|
<input type="text" name="toTranslate"/>
|
|
|
|
|
</label>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
console.log(map1)
|
|
|
|
|
</script>
|
|
|
|
|
<svg width="800" height="600"></svg>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<script src="index.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
