Skip to content

Instantly share code, notes, and snippets.

@HarryStevens
Last active Apr 26, 2018
Embed
What would you like to do?
Swiftmap Bubble Scheme
license: gpl-3.0
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: "Helvetica Neue", sans-serif;
}
#select-wrapper {
position: absolute;
padding: 5px;
background: rgba(255, 255, 255, .75);
}
#select-wrapper .select-title {
font-size: .8em;
}
#map {
width: 100%;
height: 100vh;
}
/* Swiftmap exposes the .point class */
#map .point {
fill-opacity: .75;
fill: steelblue;
stroke: steelblue;
stroke-width: 2px;
}
</style>
</head>
<body>
<div id="select-wrapper">
<div class="select-title">Select metric</div>
<select id="select">
<option value="growth">Growth</option>
<option value="density">Population density</option>
<option value="population">Population</option>
</select>
</div>
<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>
<script src="https://unpkg.com/swiftmap@0.1.22/dist/swiftmap.min.js"></script>
<script>
// Create the map.
var map = swiftmap.map("#map");
// In this example, each metric has its own value function,
// which will be passed to scheme.from() when the dropdown changes.
var f = {
growth: d => +d.growth_2001_2011.replace("%", ""),
density: d => +d.population / +d.area,
population: d => +d.population
};
// Create the bubble schemes.
var scheme = swiftmap.schemeContinuous()
.from(f.growth)
.to([3, 30]);
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 geospatial data to your map.
// Then draw the map and bubbles.
map
.layerPolygons(geo, d => d.properties.ST_NM)
.draw()
.drawPoints();
map.layers[0].points
.attr("r", scheme);
// When the dropdown changes...
var sel = document.getElementById("select");
sel.onchange = () => {
// ...update the scheme with the appropriate value function...
scheme.from(f[sel.value]);
// ...and redraw the bubbles with transition.
map.layers[0].points
.transition()
.attr("r", scheme);
}
// It's easy to resize a Swiftmap.
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