Skip to content

Instantly share code, notes, and snippets.

@andrewxhill

andrewxhill/choroplether.js

Created December 4, 2014 15:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewxhill/4188f09ad2ddb960dbdf to your computer and use it in GitHub Desktop.
Save andrewxhill/4188f09ad2ddb960dbdf to your computer and use it in GitHub Desktop.
Download ZIP
Choropleth Service
Raw
choroplether.js
function choroplether(data){
// get the currently selected style
cartodb.createVis('map', 'http://team.cartodb.com/api/v2/viz/d4c88194-7bc7-11e4-ab0a-0e853d047bba/viz.json')
.done(function(vis, layers) {
var subLayer = layers[1].getSubLayer(0);
var sql, style, arr = [], min, max, step;
for (i in data){
if(data[i].trim().length>0){
var d = data[i].split(',');
arr.push( "('"+d[0]+"',"+d[1]+")");
var k = parseFloat(d[1]);
if(k<min || min==null){min = k}
if(k>max || max==null){max = k}
}
// console.log(sql)
}
step = (max-min)/7;
sql = "WITH c AS (SELECT * FROM (VALUES "+arr.join(',')+") n (iso, val)) "
+ "SELECT c.val, c.iso, the_geom, the_geom_webmercator, cartodb_id FROM "
+ "choroplether t, c WHERE t.iso2 = c.iso";
style = "#choroplether{ polygon-fill: #0C2C84; polygon-opacity: 0.6; line-color: #0C2C84; line-width: 0.5; line-opacity: 1; } "
+ "#choroplether [ val <= "+(max-step)+"] { polygon-fill: #225EA8; } "
+ "#choroplether [ val <= "+(max-2*step)+"] { polygon-fill: #1D91C0; } "
+ "#choroplether [ val <= "+(max-3*step)+"] { polygon-fill: #41B6C4; } "
+ "#choroplether [ val <= "+(max-4*step)+"] { polygon-fill: #7FCDBB; } "
+ "#choroplether [ val <= "+(max-5*step)+"] { polygon-fill: #C7E9B4; } "
+ "#choroplether [ val <= "+(max-6*step)+"] { polygon-fill: #FFFFCC; } "
subLayer.set({sql: sql, cartocss: style});
console.log(style)
})
.error(function(err) {
console.log(err);
});
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Choropleth Service</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body, #map{
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
</head>
<body>
<div id="map"></div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script src="choroplether.js"></script>
<script type="data/html" id="data">
CA,11
RS,14
ER,10
BL,8
LE,18
GB,5
GG,17
MJ,1
LH,3
HA,16
LO,20
LS,10
GI,17
RE,13
RQ,4
TO,2
VI,11
UY,13
VC,19
NT,5
RN,1
TT,0
PC,12
SB,14
NF,7
US,6
AL,7
ES,8
BY,2
VT,5
BU,9
AF,13
CW,19
CY,18
AU,1
EZ,17
FG,3
DO,18
WS,18
LA,6
GH,15
GJ,18
GV,16
WZ,11
GQ,11
BO,1
GY,13
HR,2
QA,14
SP,12
TP,8
ID,15
AC,13
BB,0
BH,8
BK,20
BN,7
BT,15
CD,8
CN,9
MO,0
MP,16
RO,2
CO,20
GL,15
GT,3
MB,17
JM,18
JO,1
MH,15
MK,5
AA,16
AV,13
MD,1
NI,7
NL,4
NR,1
PA,0
LT,6
SN,15
SY,13
AQ,14
TS,10
TV,5
UG,14
UV,18
EN,5
RW,1
AG,13
AJ,13
AM,10
KG,13
AO,9
AR,12
CF,13
CT,4
BG,14
CE,10
CV,3
AS,16
BA,4
BD,7
MC,11
MN,17
BF,8
IM,18
BV,1
CG,9
CS,18
CU,7
ET,4
EG,11
DA,14
DJ,16
LU,15
HK,12
NG,1
BM,16
EI,6
EK,14
BP,6
CM,19
WF,4
BE,17
BR,12
BX,8
CB,12
CK,1
AY,10
CH,7
DR,6
EC,17
CI,19
CJ,3
FI,5
HO,17
SE,3
FJ,14
FK,15
FM,10
FP,19
LG,6
BC,11
FR,13
GA,3
LY,6
MF,6
ST,4
ZI,2
GM,11
LI,18
IZ,7
MA,10
GR,2
HU,5
IC,2
TD,10
KS,17
IN,3
IR,20
IS,4
KU,9
TK,17
GP,3
IT,12
IV,2
KR,20
MG,15
RB,17
JA,15
KE,5
KN,2
PO,16
KZ,9
ML,4
MR,2
MT,14
MU,8
CQ,4
MZ,5
MI,6
SO,11
FO,16
AN,8
NP,16
MV,18
MX,17
TW,13
MY,1
NC,17
NE,17
FS,10
HM,14
SG,0
IO,2
KT,17
NH,17
NS,13
NU,15
WI,3
PM,9
PE,17
PL,19
ZA,18
NZ,1
TB,1
GK,12
JE,9
NO,4
SA,17
PK,15
SI,16
SL,13
PU,2
SC,11
PP,11
SF,19
TX,4
RP,12
SU,16
TZ,1
TU,2
SW,10
SZ,2
VE,4
TN,7
WA,2
TH,1
TI,1
TL,17
UK,4
UP,9
UZ,14
VM,3
VQ,7
YM,15
AE,4
PS,19
RM,4
SH,8
SM,16
SV,18
SX,4
</script>
<script>
function main(){
var data = $('#data').html().split('\n');
choroplether(data);
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment