Skip to content

Instantly share code, notes, and snippets.

@HarryStevens

HarryStevens/.block

Last active Apr 26, 2018
Embed
What would you like to do?
Swiftmap Sequential Scheme
license: gpl-3.0

In Swiftmap, schemes provide an interface for mapping attributes of your data to visual attributes. Typically, you will use a scheme to create a thematic map, such as a choropleth map.

Sequential schemes are used to assign styles or attributes of layer elements to discrete ranges in a series of values that progress from low to high. They are ideal for making choropleth maps. This map shows the change in population in each Indian state from 2001 to 2011.

See also categorical schemes.

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
#map {
width: 100%;
height: 100vh;
}
</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://d3js.org/d3-queue.v3.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");
// Create a sequential color scheme.
var scheme = swiftmap.schemeSequential()
.from(d => +d.growth_2001_2011.replace("%", ""))
.to(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#005a32"])
.breaks("q");
d3.queue()
.defer(d3.json, "india_state.json") // geospatial data
.defer(d3.csv, "india_state_population.csv") // tabular data
.await(ready);
function ready(error, geo, tab){
// Add data to the scheme.
scheme.data(tab, d => d.state);
// Add a polygons layer to your map and draw it.
map
.layerPolygons(geo, d => d.properties.ST_NM)
.draw();
// Fill the layer based on your color scheme.
map.layers[0].polygons
.style("fill", scheme);
// You can easily update the scheme to change the map's styling.
setTimeout(() => {
// Update the scheme...
scheme
.to(["#b35806", "#f1a340", "#fee0b6", "#f7f7f7", "#d8daeb", "#998ec3", "#542788"]);
// ...and refill the layer with a five-second transition.
map.layers[0].polygons.transition().duration(5000)
.style("fill", scheme);
}, 2000);
// Reszing Swiftmaps is easy.
window.onresize = () => map.resize();
}
</script>
</body>
</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.