Having fun with Swiftmap‘s categorical color scheme.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- D3 modules for d3-request and d3-queue -->
<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://d3js.org/d3-queue.v3.min.js"></script>
<!-- jeezy -->
<script src="https://unpkg.com/jeezy@1.12.17/lib/jeezy.js"></script>
<script src="https://unpkg.com/swiftmap@0.1.22/dist/swiftmap.min.js"></script>
<script>
// Create the color scheme.
var scheme = swiftmap.schemeCategorical()
.from(d => d.state)
.to({
"Uttar Pradesh": "steelblue"
});
// Load the data.
d3.queue()
.defer(d3.json, "india_state.json")
.defer(d3.csv, "india_state_population.csv")
.await(ready);
function ready(error, geo, tab){
// Initialize and draw the map.
var map = swiftmap.map("#map")
.layerPolygons(geo, d => d.properties.ST_NM)
.draw();
// Add data to the scheme...
scheme.data(tab, d => d.state)
// ...and fill the layer.
map.layers[0].polygons
.transition().duration(500)
.style("fill", scheme)
// Get a list of unique states whose population is greater than 10 million.
var states = tab.filter(d => +d.population > 1e7).map(d => d.state);
// Every second, change the scheme and refill the layer.
setInterval(function(){
// Update the object passed to scheme.to().
var obj = {};
obj[jz.arr.random(states)] = "steelblue";
// Refill the layer, with a half-second transition between fills.
map.layers[0].polygons
.transition().duration(500)
.style("fill", scheme.to(obj));
}, 1000);
// Make it resizable.
window.onresize = () => map.resize();
}
</script>
</body>
</html>state,population,growth_2001_2011,population_rural,population_urban,area,sex_ratio
Uttar Pradesh,207281477,20.10%,155111022,44470455,240928,908
Maharashtra,112372972,16.00%,61545441,50827531,307713,946
Bihar,103804637,25.10%,92075028,11729609,94163,916
West Bengal,91347736,13.90%,62213676,29134060,88752,947
Madhya Pradesh,72597565,20.30%,52537899,20059666,308245,931
Tamil Nadu,72138958,15.60%,37189229,34949729,130058,995
Rajasthan,68621012,21.40%,51540236,17080776,342239,926
Karnataka,61130704,15.70%,37552529,23578175,191791,968
Gujarat,60383628,19.20%,34670817,25712811,196024,918
Andhra Pradesh,49386799,11.10%,34776389,14610410,162968,993
Odisha,41947358,14.00%,34951234,6996124,155707,978
Telangana,35286757,17.87%,21585313,13608665,114840,988
Kerala,33387677,4.90%,17445506,15932171,38863,"1,084"
Jharkhand,32966238,22.30%,25036946,7929292,79714,947
Assam,31169272,16.90%,26780526,4388756,78438,954
Punjab,27704236,13.70%,17316800,10387436,50362,893
Chhattisgarh,25540196,22.60%,19603658,5936538,135191,991
Haryana,25353081,19.90%,16531493,8821588,44212,877
Jammu & Kashmir,12548926,23.70%,9134820,3414106,222236,883
Uttarakhand,10116752,19.20%,7025583,3091169,53483,963
Himachal Pradesh,6864602,12.80%,6167805,688704,55673,974
Tripura,3671032,14.70%,2710051,960981,10486,961
Meghalaya,2964007,27.80%,2368971,595036,22429,986
Manipur,2721756,18.70%,1899624,822132,22327,987
Nagaland,1980602,-0.50%,1406861,573741,16579,931
Goa,1457723,8.20%,551414,906309,3702,968
Arunanchal Pradesh,1382611,25.90%,1069165,313446,83743,920
Mizoram,1091014,22.80%,529037,561997,21081,975
Sikkim,607688,12.40%,455962,151726,7096,889
NCT of Delhi,18980000,21%,419319,16333916,1484,866
Puducherry,1244464,27.70%,394341,850123,479,"1,038"
Chandigarh,1055450,17.10%,29004,1025682,114,818
Andaman & Nicobar Island,379944,6.70%,244411,135533,8249,878
Dadara & Nagar Haveli,342853,55.50%,183024,159829,491,775
Daman & Diu,242911,53.50%,60331,182580,112,618
Lakshadweep,64429,6.20%,14121,50308,32,946