In Swiftmap, continuous schemes are used to map values of data to corresponding visual attributes along a continuum. You can use a continuous scheme to make a bubble map where the radius of each bubbble corresponds to the magnitude of each datum.
See also:
<!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>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