This technique demonstrates calculating class ranges (i.e. breaks) for dynamically coloring a choropleth requested from data hosted on CartoDB.
The solution requires two requests:
Data are percentages of uninsured Americans in 2015. Darker blue indicates higher percentage.
Legend comes next.
xxxxxxxxxx
<html>
<head>
<title>Dynamic Classification of CartoDB Choropleth Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
background: #3d3d3d;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/1.0.1/simple_statistics.min.js"></script>
<script>
// instantiate our map
var map = new L.Map("map", {
center: [-6,-2],
zoom: 4.5
});
// request the (non-geometry) data first to calculate class ranges
$.getJSON('https://rgdonohue.cartodb.com/api/v2/sql?format=JSON&q=SELECT * FROM uninsured_adults_county', function(data) {
// push all the values into an array
var values = [];
data.rows.forEach(function(row,i) {
if(row.uninsured) {
values.push(row.uninsured);
}
});
// create array of range clusters
var clusters = ss.ckmeans(values, 7);
// pull out the low and high values from each cluster
var ranges = clusters.map(function(cluster){
return [cluster[0],cluster.pop()];
});
makeMap(ranges);
});
function makeMap(ranges) {
var colors = ['#eff3ff','#c6dbef','#9ecae1','#6baed6', '#4292c6','#2171b5','#084594'];
// build the cartoCSS
var cartoCSSRules = '#uninsured_adults_county{' +
'polygon-opacity: 0.8;' +
'polygon-comp-op: lighten;' +
'line-color: #FFF;' +
'line-width: 0.5;' +
'line-opacity: 1;' +
'}';
// loop backwards, high to low
for(var i = ranges.length; i--;) {
var value = ranges[i][1],
color = colors[i];
// build the individual rules
var thisRule = '#uninsured_adults_county [ uninsured <= ' +
value + '] { polygon-fill: ' + color + ';}'
// add them to the cartoCSS
cartoCSSRules += thisRule;
}
// source object for requesting the tiles
var countiesLayers = {
user_name: 'rgdonohue',
type: 'cartodb',
sublayers: [{
sql: "SELECT ST_Transform(the_geom, 2163) AS the_geom_webmercator, cartodb_id, uninsured FROM uninsured_adults_county WHERE statefp != '02' and statefp != '15' and statefp != '72'",
cartocss : cartoCSSRules
}, {
sql: "SELECT ST_Scale(ST_Translate(ST_Transform(the_geom, 102007),-1600000,-2300000),1,1) AS the_geom_webmercator, cartodb_id, uninsured FROM uninsured_adults_county WHERE statefp = '15'",
cartocss : cartoCSSRules
}, {
sql: "SELECT ST_Scale(ST_Translate(ST_Transform(the_geom, 102006),-3563330,-3883900),.7,.7) AS the_geom_webmercator, cartodb_id, uninsured FROM uninsured_adults_county WHERE statefp = '02'",
cartocss : cartoCSSRules
}]
};
cartodb.createLayer(map, countiesLayers)
.addTo(map)
.done(function(layers) {
// blam
})
.error(function(err) {
console.log("Oopsie Poopsie: " + err);
});
} // end makeMap()
</script>
</body>
</html>
Modified http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js to a secure url
https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js
https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/1.0.1/simple_statistics.min.js