Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Week 11: Choropleth Map
Country CountryCode recent year
Afghanistan AFG 21.2 2011
Albania ALB 69.3 2009
Argentina ARG 78.3 2005
Armenia ARM 54.9 2010
Australia AUS 72.3 2005
Austria AUT 69.6
Azerbaijan AZE 51.1
Burundi BDI 21.9
Belgium BEL 70.4
Benin BEN 12.9
Burkina Faso BFA 16.2
Bangladesh BGD 62
Bulgaria BGR 69.2
Bosnia and Herzegovina BIH 45.8
Belarus BLR 63.1
Belize BLZ 55.2
Bolivia BOL 60.6
Brazil BRA 80.6
Bhutan BTN 65.6
Botswana BWA 52.8
Central African Republic CAF 15.2
Chile CHL 58.4
China CHN 87.9
Cote d'Ivoire CIV 18.2
Cameroon CMR 23.4
Congo, Rep. COG 44.7
Colombia COL 79.1
Comoros COM 19.4
Cabo Verde CPV 61.3
Costa Rica CRI 76.2
Cuba CUB 74.3
Czech Republic CZE 86.3
Germany DEU 66.2
Djibouti DJI 19
Dominican Republic DOM 71.9
Algeria DZA 55.9
Egypt, Arab Rep. EGY 60.3
Eritrea ERI 8.4
Spain ESP 65.7
Estonia EST 63.4
Ethiopia ETH 28.6
Fiji FJI 44.3
France FRA 76.4
Micronesia, Fed. Sts. FSM 55
Gabon GAB 31.1
United Kingdom GBR 84
Georgia GEO 53.4
Ghana GHA 34.3
Guinea GIN 5.6
Gambia, The GMB 13.3
GuineaBissau GNB 14.2
Equatorial Guinea GNQ 12.6
Grenada GRD 54
Guatemala GTM 54.1
Guyana GUY 42.5
Hong Kong SAR, China HKG 79.5
Honduras HND 73.2
Haiti HTI 34.5
Indonesia IDN 61.9
India IND 54.8
Ireland IRL 64.8
Iran, Islamic Rep. IRN 77.42
Iraq IRQ 52.5
Jamaica JAM 72.3
Jordan JOR 61.2
Japan JPN 54.3
Kazakhstan KAZ 51
Kenya KEN 45.5
Kyrgyz Republic KGZ 36.3
Cambodia KHM 50.5
Kiribati KIR 22.3
St. Kitts and Nevis KNA 54
Korea, Rep. KOR 80
Lao PDR LAO 49.8
Lebanon LBN 53.7
Liberia LBR 20.2
Libya LBY 41.9
St. Lucia LCA 55.5
Sri Lanka LKA 68.4
Lesotho LSO 47
Lithuania LTU 62.9
Morocco MAR 67.4
Moldova MDA 59.5
Madagascar MDG 39.8
Maldives MDV 34.7
Mexico MEX 72.5
Marshall Islands MHL 44.6
Macedonia, FYR MKD 40.2
Mali MLI 9.8
Myanmar MMR 46
Montenegro MNE 39.4
Mongolia MNG 54.9
Mozambique MOZ 11.6
Mauritania MRT 11.4
Malawi MWI 46.1
Namibia NAM 55.1
Niger NER 13.9
Nigeria NGA 15.1
Nicaragua NIC 80.4
Netherlands NLD 69
Norway NOR 88.4
Nepal NPL 48.7
Oman OMN 24.4
Pakistan PAK 35.4
Panama PAN 52.2
Peru PER 74
Philippines PHL 55.1
Palau PLW 22.26
Papua New Guinea PNG 32.4
Korea, Dem. Rep. PRK 70.6
Portugal PRT 67.1
Paraguay PRY 79.4
Romania ROU 69.8
Russian Federation RUS 68
Rwanda RWA 51.6
Saudi Arabia SAU 23.8
Sudan SDN 9
Senegal SEN 17.8
Solomon Islands SLB 34.6
Sierra Leone SLE 16.6
El Salvador SLV 72.5
Somalia SOM 14.6
Serbia SRB 60.8
South Sudan SSD 4
Sao Tome and Principe STP 38.4
Suriname SUR 47.6
Swaziland SWZ 65.2
Syrian Arab Republic SYR 53.9
Chad TCD 4.8
Togo TGO 15.2
Thailand THA 79.3
Tajikistan TJK 27.9
Turkmenistan TKM 48
TimorLeste TLS 22.3
Tonga TON 34.1
Trinidad and Tobago TTO 42.5
Tunisia TUN 62.5
Turkey TUR 73
Tuvalu TUV 30.5
Tanzania TZA 34.4
Uganda UGA 30
Ukraine UKR 65.4
Uruguay URY 78
United States USA 76.4
Uzbekistan UZB 64.9
St. Vincent and the Grenadines VCT 48
Vietnam VNM 77.8
Vanuatu VUT 49
West Bank and Gaza PSE 52.5
Samoa WSM 28.7
Yemen, Rep. YEM 27.7
Congo, Dem. Rep. COD 20.4
Zambia ZMB 40.8
Zimbabwe ZWE 58.5
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var v=d.d3_calcType(c,t,j,k,o,r),w=a.append("g").attr("class",l+"legendCells"),x=w.selectAll("."+l+"cell").data(v.data),y=x.enter().append("g",".cell").attr("class",l+"cell").style("opacity",1e-6);shapeEnter=y.append(e).attr("class",l+"swatch"),shapes=x.select("g."+l+"cell "+e),d.d3_addEvents(y,u),x.exit().transition().style("opacity",0).remove(),d.d3_drawShapes(e,shapes,g,f,h,b),d.d3_addText(w,y,v.labels,l);var z=x.select("text"),A=shapes[0].map(function(a){return a.getBBox()});m?shapes.attr("class",function(a){return l+"swatch "+v.feature(a)}):"line"==e?shapes.style("stroke",v.feature):shapes.style("fill",v.feature);var B,C,D="start"==q?0:"middle"==q?.5:1;"vertical"===s?(B=function(a,b){return"translate(0, "+b*(A[b].height+i)+")"},C=function(a,b){return"translate("+(A[b].width+A[b].x+p)+","+(A[b].y+A[b].height/2+5)+")"}):"horizontal"===s&&(B=function(a,b){return"translate("+b*(A[b].width+i)+",0)"},C=function(a,b){return"translate("+(A[b].width*D+A[b].x)+","+(A[b].height+A[b].y+p+8)+")"}),d.d3_placement(s,x,B,z,C,q),d.d3_title(a,w,n,l),x.transition().style("opacity",1)}var b,c=d3.scale.linear(),e="rect",f=15,g=15,h=10,i=2,j=[5],k=[],l="",m=!1,n="",o=d3.format(".01f"),p=10,q="middle",r="to",s="vertical",t=!1,u=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(b){return arguments.length?(c=b,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(j=b),a):a},a.shape=function(c,d){return arguments.length?(("rect"==c||"circle"==c||"line"==c||"path"==c&&"string"==typeof d)&&(e=c,b=d),a):a},a.shapeWidth=function(b){return arguments.length?(f=+b,a):a},a.shapeHeight=function(b){return arguments.length?(g=+b,a):a},a.shapeRadius=function(b){return arguments.length?(h=+b,a):a},a.shapePadding=function(b){return arguments.length?(i=+b,a):a},a.labels=function(b){return arguments.length?(k=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(q=b),a):a},a.labelFormat=function(b){return arguments.length?(o=b,a):a},a.labelOffset=function(b){return arguments.length?(p=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(r=b,a):a},a.useClass=function(b){return arguments.length?((b===!0||b===!1)&&(m=b),a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(s=b),a):a},a.ascending=function(b){return arguments.length?(t=!!b,a):a},a.classPrefix=function(b){return arguments.length?(l=b,a):a},a.title=function(b){return arguments.length?(n=b,a):a},d3.rebind(a,u,"on"),a}},{"./legend":2}],2:[function(a,b,c){b.exports={d3_identity:function(a){return a},d3_mergeLabels:function(a,b){if(0===b.length)return a;a=a?a:[];for(var c=b.length;c<a.length;c++)b.push(a[c]);return b},d3_linearLegend:function(a,b,c){var d=[];if(b.length>1)d=b;else for(var e=a.domain(),f=(e[e.length-1]-e[0])/(b-1),g=0;b>g;g++)d.push(e[0]+g*f);var h=d.map(c);return{data:d,labels:h,feature:function(b){return a(b)}}},d3_quantLegend:function(a,b,c){var d=a.range().map(function(d){var e=a.invertExtent(d);b(e[0]),b(e[1]);return b(e[0])+" "+c+" "+b(e[1])});return{data:a.range(),labels:d,feature:this.d3_identity}},d3_ordinalLegend:function(a){return{data:a.domain(),labels:a.domain(),feature:function(b){return a(b)}}},d3_drawShapes:function(a,b,c,d,e,f){"rect"===a?b.attr("height",c).attr("width",d):"circle"===a?b.attr("r",e):"line"===a?b.attr("x1",0).attr("x2",d).attr("y1",0).attr("y2",0):"path"===a&&b.attr("d",f)},d3_addText:function(a,b,c,d){b.append("text").attr("class",d+"label"),a.selectAll("g.cell text").data(c).text(this.d3_identity)},d3_calcType:function(a,b,c,d,e,f){var g=a.ticks?this.d3_linearLegend(a,c,e):a.invertExtent?this.d3_quantLegend(a,e,f):this.d3_ordinalLegend(a);return g.labels=this.d3_mergeLabels(g.labels,d),b&&(g.labels=this.d3_reverse(g.labels),g.data=this.d3_reverse(g.data)),g},d3_reverse:function(a){for(var b=[],c=0,d=a.length;d>c;c++)b[c]=a[d-c-1];return b},d3_placement:function(a,b,c,d,e,f){b.attr("transform",c),d.attr("transform",e),"horizontal"===a&&d.style("text-anchor",f)},d3_addEvents:function(a,b){var c=this;a.on("mouseover.legend",function(a){c.d3_cellOver(b,a,this)}).on("mouseout.legend",function(a){c.d3_cellOut(b,a,this)}).on("click.legend",function(a){c.d3_cellClick(b,a,this)})},d3_cellOver:function(a,b,c){a.cellover.call(c,b)},d3_cellOut:function(a,b,c){a.cellout.call(c,b)},d3_cellClick:function(a,b,c){a.cellclick.call(c,b)},d3_title:function(a,b,c,d){if(""!==c){a.append("text").attr("class",d+"legendTitle").text(c);var e=a.select("."+d+"legendTitle").map(function(a){return a[0].getBBox().height})[0],f=-b.map(function(a){return a[0].getBBox().x})[0];b.attr("transform","translate("+f+","+(e+10)+")")}}}},{}],3:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var s=d.d3_calcType(c,q,h,i,l,o),t=a.append("g").attr("class",j+"legendCells"),u=t.selectAll("."+j+"cell").data(s.data),v=u.enter().append("g",".cell").attr("class",j+"cell").style("opacity",1e-6);shapeEnter=v.append(e).attr("class",j+"swatch"),shapes=u.select("g."+j+"cell "+e),d.d3_addEvents(v,r),u.exit().transition().style("opacity",0).remove(),"line"===e?(d.d3_drawShapes(e,shapes,0,f),shapes.attr("stroke-width",s.feature)):d.d3_drawShapes(e,shapes,s.feature,s.feature,s.feature,b),d.d3_addText(t,v,s.labels,j);var w,x,y=u.select("text"),z=shapes[0].map(function(a,b){var d=a.getBBox(),f=c(s.data[b]);return"line"===e&&"horizontal"===p?d.height=d.height+f:"line"===e&&"vertical"===p&&(d.width=d.width),d}),A=d3.max(z,function(a){return a.height+a.y}),B=d3.max(z,function(a){return a.width+a.x}),C="start"==n?0:"middle"==n?.5:1;"vertical"===p?(w=function(a,b){var c=d3.sum(z.slice(0,b+1),function(a){return a.height});return"translate(0, "+(c+b*g)+")"},x=function(a,b){return"translate("+(B+m)+","+(z[b].y+z[b].height/2+5)+")"}):"horizontal"===p&&(w=function(a,b){var c=d3.sum(z.slice(0,b+1),function(a){return a.width});return"translate("+(c+b*g)+",0)"},x=function(a,b){return"translate("+(z[b].width*C+z[b].x)+","+(A+m)+")"}),d.d3_placement(p,u,w,y,x,n),d.d3_title(a,t,k,j),u.transition().style("opacity",1)}var b,c=d3.scale.linear(),e="rect",f=15,g=2,h=[5],i=[],j="",k="",l=d3.format(".01f"),m=10,n="middle",o="to",p="vertical",q=!1,r=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(b){return arguments.length?(c=b,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(h=b),a):a},a.shape=function(c,d){return arguments.length?(("rect"==c||"circle"==c||"line"==c)&&(e=c,b=d),a):a},a.shapeWidth=function(b){return arguments.length?(f=+b,a):a},a.shapePadding=function(b){return arguments.length?(g=+b,a):a},a.labels=function(b){return arguments.length?(i=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(n=b),a):a},a.labelFormat=function(b){return arguments.length?(l=b,a):a},a.labelOffset=function(b){return arguments.length?(m=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(o=b,a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(p=b),a):a},a.ascending=function(b){return arguments.length?(q=!!b,a):a},a.classPrefix=function(b){return arguments.length?(j=b,a):a},a.title=function(b){return arguments.length?(k=b,a):a},d3.rebind(a,r,"on"),a}},{"./legend":2}],4:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var t=d.d3_calcType(b,r,i,j,m,p),u=a.append("g").attr("class",k+"legendCells"),v=u.selectAll("."+k+"cell").data(t.data),w=v.enter().append("g",".cell").attr("class",k+"cell").style("opacity",1e-6);shapeEnter=w.append(c).attr("class",k+"swatch"),shapes=v.select("g."+k+"cell "+c),d.d3_addEvents(w,s),v.exit().transition().style("opacity",0).remove(),d.d3_drawShapes(c,shapes,f,e,g,t.feature),d.d3_addText(u,w,t.labels,k);var x,y,z=v.select("text"),A=shapes[0].map(function(a){return a.getBBox()}),B=d3.max(A,function(a){return a.height}),C=d3.max(A,function(a){return a.width}),D="start"==n?0:"middle"==n?.5:1;"vertical"===q?(x=function(a,b){return"translate(0, "+b*(B+h)+")"},y=function(a,b){return"translate("+(C+o)+","+(A[b].y+A[b].height/2+5)+")"}):"horizontal"===q&&(x=function(a,b){return"translate("+b*(C+h)+",0)"},y=function(a,b){return"translate("+(A[b].width*D+A[b].x)+","+(B+o)+")"}),d.d3_placement(q,v,x,z,y,n),d.d3_title(a,u,l,k),v.transition().style("opacity",1)}var b=d3.scale.linear(),c="path",e=15,f=15,g=10,h=5,i=[5],j=[],k="",l="",m=d3.format(".01f"),n="middle",o=10,p="to",q="vertical",r=!1,s=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(c){return arguments.length?(b=c,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(i=b),a):a},a.shapePadding=function(b){return arguments.length?(h=+b,a):a},a.labels=function(b){return arguments.length?(j=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(n=b),a):a},a.labelFormat=function(b){return arguments.length?(m=b,a):a},a.labelOffset=function(b){return arguments.length?(o=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(p=b,a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(q=b),a):a},a.ascending=function(b){return arguments.length?(r=!!b,a):a},a.classPrefix=function(b){return arguments.length?(k=b,a):a},a.title=function(b){return arguments.length?(l=b,a):a},d3.rebind(a,s,"on"),a}},{"./legend":2}],5:[function(a,b,c){d3.legend={color:a("./color"),size:a("./size"),symbol:a("./symbol")}},{"./color":1,"./size":3,"./symbol":4}]},{},[5]);
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
body {
font-family: Helvetica, sans-serif;
padding: 40px;
}
.countries {
stroke: #fff;
stroke-width:1px;
}
.legendLinear text {
font-size: 9px;
}
</style>
<body>
<h2>Contraceptive Prevalence Worldwide</h2>
<p>Source: <a href="http://data.worldbank.org/indicator/SP.DYN.CONU.ZS?page=6">World Bank</a>. Data shown is most recent data since 2005 for countries with data available.</p>
<div id="vis"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="d3-legend.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="world-data.js"></script>
</body>
</html>
var width = 1000,
height = 600;
var svg = d3.select('#vis').append('svg')
.attr('width', width)
.attr('height', height);
var projection = d3.geo.mercator()
.scale(150) // mess with this if you want
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
//var colorScale = d3.scale.ordinal().range(['#105B63', '#9ADEB4', '#FFD34E', '#DB9E36', '#BD4932']);
var colorScale = d3.scale.linear().range(["#FF7F66", "#2185C5"]).interpolate(d3.interpolateLab);
var countryById = d3.map();
var myTooltip = d3.select("body")
.append("div")
.attr("class", "myTooltip");
// we use queue because we have 2 data files to load.
queue()
.defer(d3.json, "countries.json")
.defer(d3.csv, "contraceptive-data-recent-only.csv", typeAndSet) // process
.await(loaded);
function typeAndSet(d) {
d.recent = +d.recent;
countryById.set(d.CountryCode, d);
// console.log("countryById", countryById);
// console.log("d", d);
return d;
}
function getColor(d) {
// console.log("getColor d", d);
var dataRow = countryById.get(d.id);
// console.log("dataRow", dataRow);
// console.log("d.id", d.id);
console.log("d", d);
if (dataRow) {
return colorScale(dataRow.recent);
} else {
console.log("no dataRow", d);
return "#EBEBEB";
}
}
function getText(d) {
var dataRow = countryById.get(d.id);
if (dataRow) {
console.log(dataRow);
return dataRow.Country + ":" + dataRow.recent;
} else {
console.log("no dataRow", d);
return d.properties.name + ": No data.";
}
}
function loaded(error, world, data) {
console.log("world", world);
console.log("data", data);
colorScale.domain(d3.extent(data, function(d) {return d.recent;}));
var countries = topojson.feature(world, world.objects.units).features;
svg.selectAll('path.countries')
.data(countries)
.enter()
.append('path')
.attr('class', 'countries')
.attr('d', path)
.attr('fill', function(d,i) {
return getColor(d);
})
.append("title")
.text(function(d) {
return getText(d);
});
var linear = colorScale;
svg.append("g")
.attr("class", "legendLinear")
.attr("transform", "translate(20, 475)");
var legendLinear = d3.legend.color()
.shapeWidth(30)
.orient('horizontal')
.scale(linear);
svg.select(".legendLinear")
.call(legendLinear);
}
/*======================================================================
Mouse Events
======================================================================*/
// [element]
// .on("mouseover", mouseoverFunc)
// .on("mousemove", mousemoveFunc)
// .on("mouseout", mouseoutFunc);
//
//
// function mouseoverFunc(d) {
// console.log("moused over", d.x);
//// myTooltip
//// .style("display", null)
//// .html("<p><span class='tooltipHeader'>" + d.x + "</span><br>"+ d.method + ": " + d3.format("%")(d.y) + "</p>");
////
// }
//
// function mousemoveFunc(d) {
// myTooltip
// .style("top", (d3.event.pageY - 5) + "px")
// .style("left", (d3.event.pageX + 10) + "px");
// }
//
// function mouseoutFunc(d) {
// return myTooltip.style("display", "none"); // this sets it to invisible!
// }
/*======================================================================
======================================================================*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.