| 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/[email protected]/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> |
| 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 |
