Skip to content

Instantly share code, notes, and snippets.

@maartenzam
Last active January 17, 2017 19:13
Show Gist options
  • Save maartenzam/8a7f9bed9715c0eb678a to your computer and use it in GitHub Desktop.
Save maartenzam/8a7f9bed9715c0eb678a to your computer and use it in GitHub Desktop.
Responsive CartoDB choropleth linked to strip plot

A choropleth map created in CartoDB.js linked to a D3.js strip plot. Open to view in full.

For now the link is only one way (hover/click on the map updates the strip plot). Data is also duplicated (it lives in CartoDB and in a csv).

Both map and plot are responsive and respond to resize. The map responsiveness comes from my block Responsive map with Cartodb/Leaflet.

Integretad live on tijd.be (Dutch) and on lecho.be (French).

html, body, #map {
height: 100%;
padding: 0;
margin: 0;
background-color: #fff;
font-family: 'Noto Serif', serif;
}
#map {
height: 400px;
padding: 0;
margin-top: 10px;
cursor: pointer;
}
div.cartodb-legend.choropleth {
border: none;
border-radius: 0;
padding: 0;
right: 0px;
bottom: 17px;
color: white;
background-color: transparent;
min-width: 211px;
box-shadow: none;
opacity: 1;
}
div.cartodb-legend ul li {
border: none;
color: #777;
border-radius: 0;
}
div.cartodb-legend.choropleth li.graph {
border-radius: 0px;
border: none;
}
.leaflet-bar a:first-child, .leaflet-bar a:last-child {
border-radius: 0;
}
div.cartodb-searchbox {
border-radius: 0;
border: none;
opacity: 1;
margin: 10px 10px 0 0;
width: 240px;
height: 32px;
}
div.cartodb-searchbox input.text {
width: 200px;
border: none;
line-height: 24px;
font-size: 16px;
}
g.axis.x path{
visibility: hidden;
}
.tick text {
color: #2c3b78;
opacity: 0.2;
}
var bigmapheight = 650,
smallmapheight = 400
mapbreakwidth = 720,
highzoom = 8,
lowzoom = 7;
var initzoom;
var x;
function main() {
var hlcolor = "#454443";
/*MAP STUFF*/
if ($("#map").width() > mapbreakwidth) {
initzoom = highzoom;
$("#map").height(bigmapheight);
}
else {
initzoom = lowzoom;
$("#map").height(smallmapheight);
}
var map = new L.Map('map', {
center: [50.45,4.45],
zoom: initzoom,
maxZoom: 12,
scrollWheelZoom: false
});
var cartocss = $("#choropleth").text();
var layerSource = {
user_name: 'mediafin',
type: 'cartodb',
sublayers: [{
sql: "SELECT * FROM huurwoningen",
cartocss: cartocss
}]
}
cartodb.createLayer(map, layerSource)
.addTo(map)
.on('done', function(layer) {
//add legend
var legend = new cdb.geo.ui.Legend({
type: "choropleth",
data: [
{ value: "8,4 %" },
{ value: "74,4 %" },
{ name: "color1", value: "#008837" },
{ name: "color2", value: "#a6dba0" },
{ name: "color3", value: "#f7f7f7" },
{ name: "color4", value: "#c2a5cf" },
{ name: "color5", value: "#7b3294" }
]
});
$('#map').append(legend.render().el);
var datalayer = layer.getSubLayer(0);
datalayer.setInteractivity('niscode');
datalayer.setInteraction(true);
var updategraph = function(e, latlng, pos, data) {
d3.selectAll(".municipline")
.style("stroke", function(d) {return d.color; })
.style("opacity", 0.6)
.attr("y1",50);
d3.select("#mun" + data.niscode)
.style("stroke", hlcolor)
.style("opacity", 1)
.attr("y1",5);
var name = d3.select("#mun" + data.niscode).data()[0].naam;
var huurpercentage = d3.select("#mun" + data.niscode).data()[0].huurperc;
var xcoord = d3.select("#mun" + data.niscode).attr("x1");
d3.select(".ttip")
.text(name + " " + huurpercentage + " %")
.attr("x", function() {
if (xcoord > width/2) {
return parseFloat(xcoord) - 5;
}
else {
return parseFloat(xcoord) + 5;
}
})
.style("opacity", 1)
.attr("text-anchor", function() {
if (xcoord > width/2) {
return "end"
}
else {
return "start"
}
});
}
datalayer.on('featureOver', updategraph);
datalayer.on('featureClick', updategraph);
//add searchbox
var v = cdb.vis.Overlay.create('search', map.viz, {})
v.show();
$('#map').append(v.render().el);
})
.on('error', function(err) {
alert("some error occurred: " + err);
});
//GRAPH STUFF
var svg = d3.select("#viz")
.append("svg");
var gaxis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + 150 + ")")
//initial draw
var width = $("#viz").width();
svg.attr("width", width).attr("height", 170);
d3.csv("huurperc.csv", function(error, data) {
data.forEach(function(d) {
d.huurperc = +d.huurperc;
if (d.huurperc < 20) { d.color = "#008837"; } else
if (d.huurperc < 30) { d.color = "#a6dba0"; } else
if (d.huurperc < 40) { d.color = "#ccc"; } else
if (d.huurperc < 50) { d.color = "#c2a5cf"; } else
{ d.color = "#7b3294"}
});
//Scale the range of the data
x = d3.scale.linear().range([5,width-5]);
x.domain(d3.extent(data, function(d) {return d.huurperc; }));
var xAxis = d3.svg.axis().scale(x);
gaxis.call(xAxis);
var lines = svg.selectAll("line.municipline")
.data(data)
.enter()
.append("line")
.attr("class", "municipline")
.attr("x1", function(d) { return x(d.huurperc) ; })
.attr("x2", function(d) { return x(d.huurperc) ; })
.attr("id", function(d) { return "mun" + d.NIS; })
.attr("y1", 50)
.attr("y2", 150)
.style("stroke", function(d) {
return d.color;
})
.style("stroke-width", 2)
.style("opacity", 0.6)
.on("mouseover", function(d) {
d3.selectAll("line.municipline")
.style("stroke", function(d) {return d.color; })
.style("opacity", 0.6)
.attr("y1", 50);
d3.select(this)
.style("stroke", hlcolor)
.style("opacity", 1)
.attr("y1", 5);
if (x(d.huurperc) > width/2) {
tooltip.attr("text-anchor", "end")
}
else {
tooltip.attr("text-anchor", "start")
}
tooltip.style("opacity", .9)
.text(d.naam + " " + d.huurperc + " %")
.attr("x", function() {
if (x(d.huurperc) > width/2) {
return x(d.huurperc) - 5;
}
else {
return x(d.huurperc) + 5;
}
})
})
.on("mouseout", function(d) {
d3.select(this)
.style("stroke", function(d) {return d.color; })
.style("opacity", 0.6)
.attr("y1", 50);
tooltip.style("opacity", 0);
});
var tooltip = svg.append("text")
.attr("class", "ttip")
.attr("y", 20)
.attr("x", 50)
.attr("text-anchor", "start")
.style("font-size", "18px")
.style("fill", hlcolor)
.style("opacity", 0);
function redraw() {
var newwidth = $("#container").width();
//Redraw map
if (newwidth < mapbreakwidth) {
map.setZoom(lowzoom);
$("#map").css('height', smallmapheight);
};
if (newwidth > mapbreakwidth) {
map.setZoom(highzoom);
$("#map").css('height', bigmapheight);
};
//Redraw chart
svg.attr("width", newwidth);
x = d3.scale.linear().range([5,newwidth-5]);
x.domain(d3.extent(data, function(d) {return d.huurperc; }));
var xAxis = d3.svg.axis().scale(x);
gaxis.call(xAxis);
svg.selectAll(".municipline")
.attr("x1", function(d) { return x(d.huurperc) ; })
.attr("x2", function(d) { return x(d.huurperc) ; })
.on("mouseover", function(d) {
d3.selectAll("line.municipline")
.style("stroke", function(d) {return d.color; })
.style("opacity", 0.6)
.attr("y1", 50);
d3.select(this)
.style("stroke", hlcolor)
.style("opacity", 1)
.attr("y1", 5);
if (x(d.huurperc) > newwidth/2) {
tooltip.attr("text-anchor", "end")
}
else {
tooltip.attr("text-anchor", "start")
}
tooltip.style("opacity", .9)
.text(d.naam + " " + d.huurperc + " %")
.attr("x", function() {
if (x(d.huurperc) > newwidth/2) {
return x(d.huurperc) - 5;
}
else {
return x(d.huurperc) + 5;
}
})
});
};
window.addEventListener("resize", redraw);
});
}
window.onload = main;
NIS huurperc naam nom
21001 58.9 Anderlecht Anderlecht
21002 47.6 Oudergem Auderghem
21003 46.9 Sint-Agatha-Berchem Berchem-Sainte-Agathe
21004 71.4 Brussel Bruxelles
21005 67.2 Etterbeek Etterbeek
21006 56.7 Evere Evere
21007 60 Vorst Forest
21008 54 Ganshoren Ganshoren
21009 71.1 Elsene Ixelles
21010 52.4 Jette Jette
21011 58.5 Koekelberg Koekelberg
21012 62.2 Sint-Jans-Molenbeek Molenbeek-Saint-Jean
21013 74.4 Sint-Gillis Saint-Gilles
21014 70.6 Sint-Joost-ten-Node Saint-Josse-ten-Noode
21015 61.8 Schaarbeek Schaerbeek
21016 49.1 Ukkel Uccle
21017 50.2 Watermaal-Bosvoorde Watermael-Boitsfort
21018 55.8 Sint-Lambrechts-Woluwe Woluwe-Saint-Lambert
21019 45.7 Sint-Pieters-Woluwe Woluwe-Saint-Pierre
23105 16.5 Affligem Affligem
23002 30 Asse Asse
23003 20.6 Beersel Beersel
23009 13.6 Bever Biévène
23016 27 Dilbeek Dilbeek
23098 43.2 Drogenbos Drogenbos
23023 14.3 Galmaarden Gammerages
23024 17.9 Gooik Gooik
23025 30.1 Grimbergen Grimbergen
23027 30.5 Halle Hal
23032 15.3 Herne Herne
23033 27.6 Hoeilaart Hoeilaart
23038 18.1 Kampenhout Kampenhout
23039 24.3 Kapelle-op-den-Bos Kapelle-op-den-Bos
23099 30.7 Kraainem Kraainem
23104 19 Lennik Lennik
23044 19.6 Liedekerke Liedekerke
23100 26.9 Linkebeek Linkebeek
23045 20.5 Londerzeel Londerzeel
23047 29.1 Machelen Machelen
23050 24.4 Meise Meise
23052 26.2 Merchtem Merchtem
23060 20.9 Opwijk Opwijk
23062 23.8 Overijse Overijse
23064 13.6 Pepingen Pepingen
23101 24.4 Sint-Genesius-Rode Rhode-Saint-Genèse
23097 18.3 Roosdaal Roosdaal
23077 31.4 Sint-Pieters-Leeuw Sint-Pieters-Leeuw
23081 23.2 Steenokkerzeel Steenokkerzeel
23086 20.5 Ternat Ternat
23088 31.5 Vilvoorde Vilvorde
23102 36.2 Wemmel Wemmel
23103 26.1 Wezembeek-Oppem Wezembeek-Oppem
23094 32.6 Zaventem Zaventem
23096 14.5 Zemst Zemst
24001 26.8 Aarschot Aarschot
24007 12.5 Begijnendijk Begijnendijk
24008 13.5 Bekkevoort Bekkevoort
24009 20.6 Bertem Bertem
24011 15.2 Bierbeek Bierbeek
24014 17.5 Boortmeerbeek Boortmeerbeek
24016 12.5 Boutersem Boutersem
24020 28.9 Diest Diest
24028 11.1 Geetbets Geetbets
24137 8.4 Glabbeek Glabbeek
24033 17.4 Haacht Haacht
24038 20.3 Herent Herent
24041 18.6 Hoegaarden Hoegaarden
24043 12.6 Holsbeek Holsbeek
24045 21.1 Huldenberg Huldenberg
24048 17.9 Keerbergen Keerbergen
24054 10.1 Kortenaken Kortenaken
24055 24.2 Kortenberg Kortenberg
24059 19 Landen Landen
24133 11 Linter Linter
24062 47.1 Leuven Louvain
24066 15.3 Lubbeek Lubbeek
24130 14.5 Zoutleeuw Léau
24134 17.5 Scherpenheuvel-Zichem Montaigu-Zichem
24086 18.5 Oud-Heverlee Oud-Heverlee
24094 14.5 Rotselaar Rotselaar
24104 29.7 Tervuren Tervuren
24135 14.1 Tielt-Winge Tielt-Winge
24107 27.1 Tienen Tirlemont
24109 19.6 Tremelo Tremelo
31003 22 Beernem Beernem
31004 43.4 Blankenberge Blankenberge
31005 34.6 Brugge Bruges
31006 19.6 Damme Damme
31012 16.3 Jabbeke Jabbeke
31043 37.2 Knokke-Heist Knokke-Heist
31022 23.3 Oostkamp Oostkamp
31033 25.9 Torhout Torhout
31040 21.6 Zedelgem Zedelgem
31042 22.9 Zuienkerke Zuienkerke
34002 17.2 Anzegem Anzegem
34003 25.4 Avelgem Avelgem
34022 32.2 Kortrijk Courtrai
34009 18.8 Deerlijk Deerlijk
34043 37.1 Spiere-Helkijn Espierres-Helchin
34013 20.7 Harelbeke Harelbeke
34023 23.8 Kuurne Kuurne
34025 18.5 Lendelede Lendelede
34027 30.1 Menen Menin
34040 25.7 Waregem Waregem
34041 19.6 Wevelgem Wevelgem
34042 21.7 Zwevegem Zwevegem
32003 26 Diksmuide Dixmude
32006 16.4 Houthulst Houthulst
32010 21 Koekelare Koekelare
32011 17.9 Kortemark Kortemark
32030 16 Lo-Reninge Lo-Reninge
38002 20 Alveringem Alveringem
38025 27.9 Veurne Furnes
38014 31.6 Koksijde Koksijde
38008 38.6 De Panne La Panne
38016 37.6 Nieuwpoort Nieuport
36006 18.3 Hooglede Hooglede
36007 17.7 Ingelmunster Ingelmunster
36008 21.9 Izegem Izegem
36010 17.7 Ledegem Ledegem
36011 19.8 Lichtervelde Lichtervelde
36012 19.2 Moorslede Moorslede
36015 28.7 Roeselare Roulers
36019 17 Staden Staden
37020 21.4 Ardooie Ardooie
37002 21.5 Dentergem Dentergem
37007 18.6 Meulebeke Meulebeke
37010 19.4 Oostrozebeke Oostrozebeke
37011 22.3 Pittem Pittem
37012 20.9 Ruiselede Ruiselede
37015 29.5 Tielt Tielt
37017 21.5 Wielsbeke Wielsbeke
37018 19.5 Wingene Wingene
35002 27.5 Bredene Bredene
35029 34.6 De Haan De Haan
35005 26 Gistel Gistel
35006 19.4 Ichtegem Ichtegem
35011 32.8 Middelkerke Middelkerke
35013 45.3 Oostende Ostende
35014 18.8 Oudenburg Oudenburg
33039 23 Heuvelland Heuvelland
33040 19.7 Langemark-Poelkapelle Langemark-Poelkapelle
33016 31.4 Mesen Messines
33021 23.1 Poperinge Poperinge
33041 20.1 Vleteren Vleteren
33029 26.9 Wervik Wervik
33011 30 Ieper Ypres
33037 19.1 Zonnebeke Zonnebeke
44001 24.9 Aalter Aalter
44012 21.6 De Pinte De Pinte
44011 28.3 Deinze Deinze
44013 24.8 Destelbergen Destelbergen
44019 27 Evergem Evergem
44021 49.6 Gent Gand
44020 21.3 Gavere Gavere
44029 25.7 Knesselare Knesselare
44034 26 Lochristi Lochristi
44036 25.7 Lovendegem Lovendegem
44040 24 Melle Melle
44043 23.9 Merelbeke Merelbeke
44045 22.9 Moerbeke Moerbeke
44048 24.4 Nazareth Nazareth
44049 25.9 Nevele Nevele
44052 17.2 Oosterzele Oosterzele
44064 25.5 Sint-Martens-Latem Sint-Martens-Latem
44072 28.1 Waarschoot Waarschoot
44073 29.3 Wachtebeke Wachtebeke
44080 27.9 Zomergem Zomergem
44081 25.3 Zulte Zulte
46003 27.5 Beveren Beveren
46013 25.5 Kruibeke Kruibeke
46014 33.4 Lokeren Lokeren
46021 35.9 Sint-Niklaas Saint-Nicolas
46020 21.4 Sint-Gillis-Waas Sint-Gillis-Waas
46024 25 Stekene Stekene
46025 32.3 Temse Tamise
42003 24.7 Berlare Berlare
42004 19.3 Buggenhout Buggenhout
42008 33 Hamme Hamme
42010 26.3 Laarne Laarne
42011 21.2 Lebbeke Lebbeke
42006 28.5 Dendermonde Termonde
42023 25.8 Waasmunster Waasmunster
42025 32.1 Wetteren Wetteren
42026 21.7 Wichelen Wichelen
42028 28.8 Zele Zele
41002 30.2 Aalst Alost
41011 25 Denderleeuw Denderleeuw
41082 17.8 Erpe-Mere Erpe-Mere
41018 21 Geraardsbergen Grammont
41024 17.7 Haaltert Haaltert
41027 16 Herzele Herzele
41034 21 Lede Lede
41048 25.9 Ninove Ninove
41063 15.8 Sint-Lievens-Houtem Sint-Lievens-Houtem
41081 21.3 Zottegem Zottegem
45035 27.9 Oudenaarde Audenarde
45059 15.4 Brakel Brakel
45062 9.5 Horebeke Horebeke
45060 19.3 Kluisbergen Kluisbergen
45017 21.9 Kruishoutem Kruishoutem
45063 14.5 Lierde Lierde
45064 15.3 Maarkedal Maarkedal
45041 28 Ronse Renaix
45061 16.5 Wortegem-Petegem Wortegem-Petegem
45057 20.5 Zingem Zingem
45065 15.4 Zwalm Zwalm
43002 25.2 Assenede Assenede
43005 38.1 Eeklo Eeklo
43007 25.5 Kaprijke Kaprijke
43010 26.3 Maldegem Maldegem
43014 21.3 Sint-Laureins Sint-Laureins
43018 36.8 Zelzate Zelzate
71002 21.6 As As
71004 20.8 Beringen Beringen
71034 33.2 Leopoldsburg Bourg-Léopold
71011 20.3 Diepenbeek Diepenbeek
71016 32 Genk Genk
71017 11.8 Gingelom Gingelom
71020 17.9 Halen Halen
71069 19.2 Ham Ham
71022 32.3 Hasselt Hasselt
71024 17.3 Herk-de-Stad Herck-la-Ville
71070 21 Heusden-Zolder Heusden-Zolder
71037 17.5 Lummen Lummen
71045 13.5 Nieuwerkerken Nieuwerkerken
71047 15.5 Opglabbeek Opglabbeek
71053 29.2 Sint-Truiden Saint-Trond
71057 21.2 Tessenderlo Tessenderlo
71066 21.5 Zonhoven Zonhoven
71067 23.7 Zutendaal Zutendaal
72003 16.3 Bocholt Bocholt
72004 23.6 Bree Bree
72041 23.4 Dilsen-Stokkem Dilsen-Stokkem
72037 21.7 Hamont-Achel Hamont-Achel
72038 17.2 Hechtel-Eksel Hechtel-Eksel
72039 22.5 Houthalen-Helchteren Houthalen-Helchteren
72018 17.7 Kinrooi Kinrooi
72020 23 Lommel Lommel
72021 26.2 Maaseik Maaseik
72040 14.8 Meeuwen-Gruitrode Meeuwen-Gruitrode
72025 22 Neerpelt Neerpelt
72029 20.1 Overpelt Overpelt
72030 21.3 Peer Peer
73001 17.2 Alken Alken
73006 26 Bilzen Bilzen
73109 25.8 Voeren Fourons
73022 14.9 Heers Heers
73028 17.9 Herstappe Herstappe
73032 19.8 Hoeselt Hoeselt
73040 21.1 Kortessem Kortessem
73042 25.8 Lanaken Lanaken
73009 17.8 Borgloon Looz
73107 29.2 Maasmechelen Maasmechelen
73066 17.2 Riemst Riemst
73083 25.9 Tongeren Tongres
73098 15.6 Wellen Wellen
12002 20.6 Berlaar Berlaar
12005 18 Bonheiden Bonheiden
12007 23.3 Bornem Bornem
12009 31.8 Duffel Duffel
12014 24.7 Heist-op-den-Berg Heist-op-den-Berg
12021 35.9 Lier Lierre
12025 35.5 Mechelen Malines
12026 17.3 Nijlen Nijlen
12029 23.7 Putte Putte
12030 21.7 Puurs Puurs
12034 22.2 Sint-Amands Sint-Amands
12035 22 Sint-Katelijne-Waver Sint-Katelijne-Waver
12040 29.2 Willebroek Willebroek
13001 23.2 Arendonk Arendonk
13002 37.2 Baarle-Hertog Baerle-Duc
13003 16.6 Balen Balen
13004 21.1 Beerse Beerse
13006 18.8 Dessel Dessel
13008 27.1 Geel Geel
13010 19.9 Grobbendonk Grobbendonk
13011 30.7 Herentals Herentals
13012 24.2 Herenthout Herenthout
13013 19.3 Herselt Herselt
13014 26.1 Hoogstraten Hoogstraten
13016 21.1 Hulshout Hulshout
13017 20.9 Kasterlee Kasterlee
13053 20.3 Laakdal Laakdal
13019 19.9 Lille Lille
13021 17.5 Meerhout Meerhout
13023 23.9 Merksplas Merksplas
13025 25.9 Mol Mol
13029 22.8 Olen Olen
13031 16 Oud-Turnhout Oud-Turnhout
13035 23.4 Ravels Ravels
13036 16.2 Retie Retie
13037 24.5 Rijkevorsel Rijkevorsel
13040 37.6 Turnhout Turnhout
13044 21.4 Vorselaar Vorselaar
13046 17.9 Vosselaar Vosselaar
13049 22.1 Westerlo Westerlo
11001 20.1 Aartselaar Aartselaar
11002 47.9 Antwerpen Anvers
11004 22.3 Boechout Boechout
11005 32.4 Boom Boom
11007 42.4 Borsbeek Borsbeek
11008 27.1 Brasschaat Brasschaat
11009 20.3 Brecht Brecht
11013 25.3 Edegem Edegem
11016 20 Essen Essen
11018 22.6 Hemiksem Hemiksem
11021 15.8 Hove Hove
11022 22.2 Kalmthout Kalmthout
11023 19.7 Kapellen Kapellen
11024 21.2 Kontich Kontich
11025 21.7 Lint Lint
11057 26.9 Malle Malle
11029 31.6 Mortsel Mortsel
11030 21.6 Niel Niel
11035 18.2 Ranst Ranst
11037 18.4 Rumst Rumst
11038 26.1 Schelle Schelle
11039 17.8 Schilde Schilde
11040 23.5 Schoten Schoten
11044 21.7 Stabroek Stabroek
11050 22.4 Wijnegem Wijnegem
11052 25.8 Wommelgem Wommelgem
11053 24.1 Wuustwezel Wuustwezel
11054 19.8 Zandhoven Zandhoven
11055 18.2 Zoersel Zoersel
11056 30.9 Zwijndrecht Zwijndrecht
25005 19.6 Bevekom Beauvechain
25015 21.6 Kasteelbrakel Braine-le-Château
25014 28.6 Eigenbrakel Braine-l’Alleud
25117 24.7 Chastre Chastre
25018 24.2 Chaumont-Gistoux Chaumont-Gistoux
25023 29.4 Court-Saint-Etienne Court-Saint-Etienne
25031 25.3 Genepiën Genappe
25037 22.8 Graven Grez-Doiceau
25118 17.2 Hélécine Hélécine
25043 18.4 Incourt Incourt
25044 22.5 Itter Ittre
25048 28.5 Geldenaken Jodoigne
25050 29.7 Terhulpen La Hulpe
25119 23.4 Lasne Lasne
25068 31.2 Mont-Saint-Guibert Mont-Saint-Guibert
25072 41.5 Nijvel Nivelles
25120 14.7 Orp-Jauche Orp-Jauche
25121 51.1 Ottignies-Louvain-la-Neuve Ottignies-Louvain-la-Neuve
25084 23.4 Perwijs Perwez
25122 12.3 Ramillies Ramillies
25123 25.6 Rebecq Rebecq
25091 26 Rixensart Rixensart
25105 30.7 Tubeke Tubize
25107 21.6 Villers-la-Ville Villers-la-Ville
25124 21.5 Walhain Walhain
25110 26.9 Waterloo Waterloo
25112 35.1 Waver Wavre
52074 33 Aiseau-Presles Aiseau-Presles
52010 41 Chapelle-lez-Herlaimont Chapelle-lez-Herlaimont
52011 44.5 Charleroi Charleroi
52012 40 Châtelet Châtelet
52015 31.3 Courcelles Courcelles
52018 42.1 Farciennes Farciennes
52021 32 Fleurus Fleurus
52022 35.3 Fontaine-l'Evêque Fontaine-l’Evêque
52025 22.9 Gerpinnes Gerpinnes
52075 24.1 Les Bons Villers Les Bons Villers
52043 34 Manage Manage
52048 25.4 Montigny-le-Tilleul Montigny-le-Tilleul
52055 22.3 Pont-à-Celles Pont-à-Celles
52063 32.9 Seneffe Seneffe
53014 35.3 Boussu Boussu
53082 30.5 Colfontaine Colfontaine
53020 30.9 Dour Dour
53028 31.6 Frameries Frameries
53039 30.2 Hensies Hensies
53083 16.9 Honnelles Honnelles
53044 21.8 Jurbeke Jurbise
53046 24.7 Lens Lens
53053 43.5 Bergen Mons
53065 32.5 Quaregnon Quaregnon
53068 32.9 Quiévrain Quiévrain
53084 20.1 Quévy Quévy
53070 37.5 Saint-Ghislain Saint-Ghislain
54010 33 Komen-Waasten Comines-Warneton
54007 32.8 Moeskroen Mouscron
55004 30.4 's Gravenbrakel Braine-le-Comte
55050 26.2 Ecaussinnes Ecaussinnes
55010 33.2 Edingen Enghien
55022 36.4 La Louvière La Louvière
55035 25.5 Le Roeulx Le Roeulx
55023 22.7 Lessen Lessines
55039 16.6 Opzullik Silly
55040 29.7 Zinnik Soignies
56001 27.9 Anderlues Anderlues
56005 35.6 Beaumont Beaumont
56011 31.9 Binche Binche
56016 36.1 Chimay Chimay
56022 29.7 Erquelinnes Erquelinnes
56085 23.7 Estinnes Estinnes
56029 28.3 Froidchapelle Froidchapelle
56086 21.5 Ham-sur-Heure-Nalinnes Ham-sur-Heure-Nalinnes
56044 23.2 Lobbes Lobbes
56049 27.9 Merbes-le-Château Merbes-le-Château
56051 31.7 Momignies Momignies
56087 28.6 Morlanwelz Morlanwelz
56088 30.5 Sivry-Rance Sivry-Rance
56078 32.1 Thuin Thuin
57003 32.8 Antoing Antoing
57093 23.2 Brunehaut Brunehaut
57018 20.6 Celles Celles
57027 27.2 Estaimpuis Estaimpuis
57094 28.9 Leuze-en-Hainaut Leuze-en-Hainaut
57095 16.9 Mont-de-l‰ÛªEnclus Mont-de-l’Enclus
57062 25.2 Pecq Pecq
57064 29.3 Péruwelz Péruwelz
57072 20.5 Rumes Rumes
57081 40.8 Doornik Tournai
51004 30.8 Aat Ath
51008 27.4 Beloeil Beloeil
51009 26.4 Bernissart Bernissart
51012 25.9 Brugelette Brugelette
51014 23.5 Chièvres Chièvres
51017 18.4 Elzele Ellezelles
51019 19.5 Vloesberg Flobecq
51065 17.8 Frasnes-lez-Anvaing Frasnes-lez-Anvaing
61003 28.8 Amay Amay
61079 20.7 Anthisnes Anthisnes
61010 13.6 Burdinne Burdinne
61012 19.7 Clavier Clavier
61080 32.9 Engis Engis
61019 19.4 Ferrières Ferrières
61024 24.5 Hamoir Hamoir
61031 42.5 Hoei Huy
61028 15 Héron Héron
61039 21.7 Marchin Marchin
61041 18.9 Modave Modave
61043 14.1 Nandrin Nandrin
61048 25 Ouffet Ouffet
61081 20.3 Tinlot Tinlot
61063 16.4 Verlaine Verlaine
61068 21 Villers-Le-Bouillet Villers-Le-Bouillet
61072 22.5 Wanze Wanze
62003 36.1 Ans Ans
62006 23.5 Awans Awans
62009 31.9 Aywaille Aywaille
62011 26.9 Bitsingen Bassenge
62015 30.1 Beyne-Heusay Beyne-Heusay
62119 26.6 Blégny Blégny
62022 24.4 Chaudfontaine Chaudfontaine
62026 31.1 Comblain-au-Pont Comblain-au-Pont
62027 25.3 Dalhem Dalhem
62032 30.3 Esneux Esneux
62120 34.9 Flémalle Flémalle
62038 37.1 Fléron Fléron
62118 38.4 Grâce-Hollogne Grâce-Hollogne
62051 34.1 Herstal Herstal
62060 20.3 Juprelle Juprelle
62063 51.4 Luik Liège
62121 17.9 Neupré Neupré
62079 34.2 Oupeye Oupeye
62093 35.7 Saint-Nicolas Saint-Nicolas
62096 44.5 Seraing Seraing
62099 29 Soumagne Soumagne
62100 25.6 Sprimont Sprimont
62122 28.7 Trooz Trooz
62108 40.9 Wezet Visé
63001 17.9 Amel Amblève
63003 32.7 Aubel Aubel
63004 26.5 Baelen Baelen
63012 20.1 Büllingen Bullange
63087 20.5 Burg-Reuland Burg-Reuland
63013 20.4 Bütgenbach Butgenbach
63020 43.9 Dison Dison
63023 44.1 Eupen Eupen
63035 30.9 Herve Herve
63038 23 Jalhay Jalhay
63040 42 Kelmis La Calamine
63045 28.5 Lierneux Lierneux
63046 30.6 Limburg Limbourg
63048 30.1 Lontzen Lontzen
63049 35.4 Malmedy Malmedy
63057 19.8 Olne Olne
63058 28.5 Pepinster Pepinster
63088 28.7 Plombières Plombières
63061 32.2 Raeren Raeren
63067 28 Sankt Vith Saint-Vith
63072 47.5 Spa Spa
63073 30.2 Stavelot Stavelot
63075 27.2 Stoumont Stoumont
63076 28.6 Theux Theux
63089 21.7 Thimister-Clermont Thimister-Clermont
63086 31.7 Trois-Ponts Trois-Ponts
63079 49.5 Verviers Verviers
63080 22.1 Weismes Waimes
63084 35.7 Welkenraedt Welkenraedt
64008 15.1 Berloz Berloz
64015 14 Braives Braives
64021 16.6 Crisnée Crisnée
64023 11.3 Donceel Donceel
64076 12.1 Faimes Faimes
64025 16.9 Fexhe-le-Haut-Clocher Fexhe-le-Haut-Clocher
64029 15.7 Geer Geer
64034 24.8 Hannuit Hannut
64047 18.8 Lijsem Lincent
64056 20.8 Oerle Oreye
64063 15.5 Remicourt Remicourt
64065 27.5 Saint-Georges-sur-Meuse Saint-Georges-sur-Meuse
64074 34.2 Borgworm Waremme
64075 21 Wasseiges Wasseiges
82003 36.1 Bastenaken Bastogne
82005 21.6 Bertogne Bertogne
82009 31 Fauvillers Fauvillers
82037 22.2 Gouvy Gouvy
82014 26.9 Houffalize Houffalize
82038 29.3 Sainte-Ode Sainte-Ode
82036 20.4 Vaux-sur-Sûre Vaux-sur-Sûre
82032 29.6 Vielsalm Vielsalm
83012 30.2 Durbuy Durbuy
83013 23.4 Erezée Erezée
83028 44 Hotton Hotton
83031 34.1 La Roche-en-Ardenne La Roche-en-Ardenne
83055 24.1 Manhay Manhay
83034 39.4 Marche-en-Famenne Marche-en-Famenne
83040 24.3 Nassogne Nassogne
83044 25.4 Rendeux Rendeux
83049 23.3 Tenneville Tenneville
84009 28.9 Bertrix Bertrix
84010 34 Bouillon Bouillon
84016 24.3 Daverdisse Daverdisse
84029 25.7 Herbeumont Herbeumont
84035 24.7 Libin Libin
84077 30.3 Libramont-Chevigny Libramont-Chevigny
84033 21.7 Léglise Léglise
84043 27.6 Neufchâteau Neufchâteau
84050 26 Paliseul Paliseul
84059 25.3 Saint-Hubert Saint-Hubert
84068 25.6 Tellin Tellin
84075 28 Wellin Wellin
85007 21.3 Chiny Chiny
85009 19.3 Etalle Etalle
85011 30 Florenville Florenville
85046 20.5 Habay Habay
85024 17.6 Meix-devant-Virton Meix-devant-Virton
85026 16.4 Musson Musson
85047 24.4 Rouvroy Rouvroy
85034 17.3 Saint-Léger Saint-Léger
85039 15.4 Tintigny Tintigny
85045 31.1 Virton Virton
81001 36 Aarlen Arlon
81003 15.5 Attert Attert
81004 30.7 Aubange Aubange
81013 30 Martelange Martelange
81015 20.9 Messancy Messancy
91005 24.6 Anhée Anhée
91013 27.8 Beauraing Beauraing
91015 23.4 Bièvre Bièvre
91030 37.9 Ciney Ciney
91034 44 Dinant Dinant
91054 22.7 Gedinne Gedinne
91059 25 Hamois Hamois
91142 32.1 Hastière Hastière
91064 24.7 Havelange Havelange
91072 24.3 Houyet Houyet
91103 24.4 Onhaye Onhaye
91114 29.1 Rochefort Rochefort
91120 21.6 Somme-Leuze Somme-Leuze
91143 30.7 Vresse-sur-Semois Vresse-sur-Semois
91141 24 Yvoir Yvoir
92003 31.4 Andenne Andenne
92006 20.8 Assesse Assesse
92035 21.8 Eghezée Eghezée
92138 17.8 Fernelmont Fernelmont
92045 22.7 Floreffe Floreffe
92048 29.1 Fosses-la-Ville Fosses-la-Ville
92142 29.3 Gembloux Gembloux
92054 19.9 Gesves Gesves
92140 25.3 Jemeppe-sur-Sambre Jemeppe-sur-Sambre
92141 18.2 La Bruyère La Bruyère
92087 23.3 Mettet Mettet
92094 44.2 Namen Namur
92097 20.2 Ohey Ohey
92101 25.1 Profondeville Profondeville
92137 33.2 Sambreville Sambreville
92114 20.5 Sombreffe Sombreffe
93010 27.9 Cerfontaine Cerfontaine
93014 34.6 Couvin Couvin
93018 22 Doische Doische
93022 27.2 Florennes Florennes
93056 30.6 Philippeville Philippeville
93088 19.9 Walcourt Walcourt
93090 32.4 Viroinval Viroinval
<!DOCTYPE html>
<html>
<head>
<title>Choropleth strip plot</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="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<link rel="stylesheet" href="huur.css" />
<link href='https://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>
<style type="cartocss/text" id="choropleth">
#huurwoningen{
polygon-fill: #0080ff;
polygon-opacity: 0.8;
line-color: #ccc;
line-width: 0.5;
line-opacity: 1;
}
#huurwoningen [ perchuur <= 75] {
polygon-fill: #7b3294;
}
#huurwoningen [ perchuur <= 50] {
polygon-fill: #c2a5cf;
}
#huurwoningen [ perchuur <= 40] {
polygon-fill: #eee;
}
#huurwoningen [ perchuur <= 30] {
polygon-fill: #a6dba0;
}
#huurwoningen [ perchuur <= 20] {
polygon-fill: #008837;
}
</style>
</head>
<body>
<div id="container">
<div id="map">
</div>
<div id="viz">
</div>
</div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="huur.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment