Swiftmap is a JavaScript library for making data-driven maps.
xxxxxxxxxx
<html>
<head>
<style>
body {
margin: 0;
}
#map {
width: 100%;
height: 100vh;
}
#map .boundary {
stroke-width: 2px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-request.v1.min.js"></script>
<script src="https://unpkg.com/swiftmap@0.1.22/dist/swiftmap.min.js"></script>
<script>
// Create the map.
var map = swiftmap.map("#map");
d3.json("india_state.json", (error, data) => {
// Add geospatial data and draw it.
map
.layerPolygons(data)
.draw();
// Exposes DOM elements as D3 selections for styling.
var colors = ["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854", "#ffd92f"];
map.layers[0].polygons
.transition().duration(2000)
.style("fill", (d, i) => colors[i % colors.length] );
// Makes it easy to create resizable maps for responsive designs.
window.onresize = function(){ map.resize(); }
});
</script>
</body>
</html>
https://d3js.org/d3-collection.v1.min.js
https://d3js.org/d3-dispatch.v1.min.js
https://d3js.org/d3-dsv.v1.min.js
https://d3js.org/d3-request.v1.min.js
https://unpkg.com/swiftmap@0.1.22/dist/swiftmap.min.js