Last active
June 7, 2019 12:20
-
-
Save DimsumPanda/3362898c1386114463d4 to your computer and use it in GitHub Desktop.
Week 11: Choropleth Map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
country | ISO3 | mortality | |
---|---|---|---|
Angola | AGO | 156.9 | |
Chad | TCD | 138.7 | |
Somalia | SOM | 136.8 | |
Central African Republic | CAF | 130.1 | |
Sierra Leone | SLE | 120.4 | |
Mali | MLI | 114.7 | |
Nigeria | NGA | 108.8 | |
Benin | BEN | 99.5 | |
Congo, Dem. Rep. | COD | 98.3 | |
Niger | NER | 95.5 | |
Equatorial Guinea | GNQ | 94.1 | |
Guinea | GIN | 93.7 | |
Cote d'Ivoire | CIV | 92.6 | |
South Sudan | SSD | 92.6 | |
Guinea-Bissau | GNB | 92.5 | |
Afghanistan | AFG | 91.1 | |
Lesotho | LSO | 90.2 | |
Burkina Faso | BFA | 88.6 | |
Cameroon | CMR | 87.9 | |
Mauritania | MRT | 84.7 | |
Burundi | BDI | 81.7 | |
Pakistan | PAK | 81.1 | |
Mozambique | MOZ | 78.5 | |
Togo | TGO | 78.4 | |
Comoros | COM | 73.5 | |
Zimbabwe | ZWE | 70.7 | |
Sudan | SDN | 70.1 | |
Liberia | LBR | 69.9 | |
Haiti | HTI | 69 | |
Gambia, The | GMB | 68.9 | |
Lao PDR | LAO | 66.7 | |
Djibouti | DJI | 65.3 | |
Malawi | MWI | 64 | |
Zambia | ZMB | 64 | |
Ghana | GHA | 61.6 | |
Swaziland | SWZ | 60.7 | |
Ethiopia | ETH | 59.2 | |
Papua New Guinea | PNG | 57.3 | |
Kiribati | KIR | 55.9 | |
Uganda | UGA | 54.6 | |
Timor-Leste | TLS | 52.6 | |
South Asia | SAS | 52.5 | |
Turkmenistan | TKM | 51.4 | |
Gabon | GAB | 50.8 | |
Myanmar | MMR | 50 | |
Madagascar | MDG | 49.6 | |
Kenya | KEN | 49.4 | |
Tanzania | TZA | 48.7 | |
India | IND | 47.7 | |
Sao Tome and Principe | STP | 47.3 | |
Senegal | SEN | 47.2 | |
Eritrea | ERI | 46.5 | |
Namibia | NAM | 45.4 | |
Congo, Rep. | COG | 45 | |
Tajikistan | TJK | 44.8 | |
Botswana | BWA | 43.6 | |
Yemen, Rep. | YEM | 41.9 | |
Rwanda | RWA | 41.7 | |
South Africa | ZAF | 40.5 | |
Guyana | GUY | 39.4 | |
Uzbekistan | UZB | 39.1 | |
Bolivia | BOL | 38.4 | |
Bangladesh | BGD | 37.6 | |
Arab World | ARB | 36.76414509 | |
Marshall Islands | MHL | 36 | |
Nepal | NPL | 35.8 | |
Micronesia, Fed. Sts. | FSM | 34.7 | |
Bhutan | BTN | 32.9 | |
Iraq | IRQ | 32 | |
Azerbaijan | AZE | 31.7 | |
Dominican Republic | DOM | 30.9 | |
Guatemala | GTM | 29.1 | |
Cambodia | KHM | 28.7 | |
Solomon Islands | SLB | 28.1 | |
Philippines | PHL | 28 | |
Morocco | MAR | 27.6 | |
Vanuatu | VUT | 27.5 | |
Indonesia | IDN | 27.2 | |
Tuvalu | TUV | 27.1 | |
Pacific island small states | PSS | 26.64371194 | |
Algeria | DZA | 25.5 | |
Korea, Dem. Rep. | PRK | 24.9 | |
Cabo Verde | CPV | 24.5 | |
Egypt, Arab Rep. | EGY | 24 | |
Fiji | FJI | 22.4 | |
Mongolia | MNG | 22.4 | |
Nicaragua | NIC | 22.1 | |
Vietnam | VNM | 21.7 | |
Ecuador | ECU | 21.6 | |
Kyrgyz Republic | KGZ | 21.3 | |
Suriname | SUR | 21.3 | |
Dominica | DMA | 21.2 | |
West Bank and Gaza | PSE | 21.1 | |
Paraguay | PRY | 20.5 | |
Honduras | HND | 20.4 | |
Trinidad and Tobago | TTO | 20.4 | |
St. Vincent and the Grenadines | VCT | 18.3 | |
Jordan | JOR | 17.9 | |
Samoa | WSM | 17.5 | |
Panama | PAN | 17 | |
Peru | PER | 16.9 | |
El Salvador | SLV | 16.8 | |
Tonga | TON | 16.7 | |
Belize | BLZ | 16.5 | |
Brazil | BRA | 16.4 | |
Palau | PLW | 16.4 | |
Colombia | COL | 15.9 | |
Moldova | MDA | 15.8 | |
Jamaica | JAM | 15.7 | |
Iran, Islamic Rep. | IRN | 15.5 | |
Venezuela, RB | VEN | 14.9 | |
Saudi Arabia | SAU | 14.5 | |
St. Lucia | LCA | 14.3 | |
Armenia | ARM | 14.1 | |
Kazakhstan | KAZ | 14.1 | |
Albania | ALB | 14 | |
Tunisia | TUN | 14 | |
Seychelles | SYC | 13.6 | |
Mauritius | MUS | 13.5 | |
Turkey | TUR | 13.5 | |
Libya | LBY | 13.4 | |
Mexico | MEX | 13.2 | |
Barbados | BRB | 13 | |
Syrian Arab Republic | SYR | 12.9 | |
Argentina | ARG | 12.5 | |
Thailand | THA | 12.3 | |
Bahamas, The | BHS | 12.1 | |
Georgia | GEO | 11.9 | |
Grenada | GRD | 11.8 | |
Oman | OMN | 11.6 | |
Romania | ROU | 11.1 | |
China | CHN | 10.7 | |
St. Kitts and Nevis | KNA | 10.5 | |
Bulgaria | BGR | 10.4 | |
Brunei Darussalam | BRN | 10.2 | |
Uruguay | URY | 10.1 | |
Sri Lanka | LKA | 9.8 | |
Costa Rica | CRI | 9.7 | |
Russian Federation | RUS | 9.6 | |
Ukraine | UKR | 9 | |
Kuwait | KWT | 8.6 | |
Maldives | MDV | 8.6 | |
Lebanon | LBN | 8.3 | |
Antigua and Barbuda | ATG | 8.1 | |
Chile | CHL | 8.1 | |
Qatar | QAT | 8 | |
Latvia | LVA | 7.9 | |
Slovak Republic | SVK | 7.3 | |
Malaysia | MYS | 7 | |
United Arab Emirates | ARE | 6.8 | |
Serbia | SRB | 6.7 | |
United States | USA | 6.5 | |
Malta | MLT | 6.4 | |
Bahrain | BHR | 6.2 | |
Hungary | HUN | 5.9 | |
New Zealand | NZL | 5.7 | |
Cuba | CUB | 5.5 | |
Macedonia, FYR | MKD | 5.5 | |
Bosnia and Herzegovina | BIH | 5.4 | |
Lithuania | LTU | 5.2 | |
Poland | POL | 5.2 | |
Canada | CAN | 4.9 | |
Montenegro | MNE | 4.7 | |
Belarus | BLR | 4.6 | |
Greece | GRC | 4.6 | |
European Union | EUU | 4.429313968 | |
France | FRA | 4.3 | |
Croatia | HRV | 4.3 | |
United Kingdom | GBR | 4.2 | |
Belgium | BEL | 4.1 | |
Spain | ESP | 4.1 | |
Israel | ISR | 4 | |
Switzerland | CHE | 3.9 | |
Australia | AUS | 3.8 | |
Netherlands | NLD | 3.8 | |
Germany | DEU | 3.7 | |
Ireland | IRL | 3.6 | |
Portugal | PRT | 3.6 | |
Austria | AUT | 3.5 | |
Denmark | DNK | 3.5 | |
Italy | ITA | 3.5 | |
Monaco | MCO | 3.5 | |
Czech Republic | CZE | 3.4 | |
Korea, Rep. | KOR | 3.4 | |
Sweden | SWE | 3 | |
Estonia | EST | 2.9 | |
San Marino | SMR | 2.9 | |
Andorra | AND | 2.8 | |
Cyprus | CYP | 2.7 | |
Japan | JPN | 2.7 | |
Singapore | SGP | 2.7 | |
Norway | NOR | 2.6 | |
Slovenia | SVN | 2.6 | |
Finland | FIN | 2.3 | |
Iceland | ISL | 2 | |
Luxembourg | LUX | 1.9 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!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]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> | |
<style> | |
body { | |
font-family: Helvetica, sans-serif; | |
} | |
.countries { | |
stroke: #fff; | |
stroke-width:1px; | |
} | |
.countries:hover{ | |
opacity: .7; | |
} | |
.legendLinear text { | |
font-size: 9px; | |
} | |
/*.d3-tip { | |
font-weight: bold; | |
padding: 10px 15px; | |
background: rgba(255, 255, 255, 0.5); | |
color: #0099FF; | |
border-radius: 2px; | |
}*/ | |
svg { | |
display: block; | |
margin: auto; | |
} | |
</style> | |
<body> | |
<h2>Under-Five Mortality Rates (per 1000 live births) in the World in 2015</h2> | |
<p>Compared to the rest of the world, Sub-Saharan Africa and South Asia experience the highest rates of mortality in the World.</p> | |
<p>Source: <a href="http://data.worldbank.org/indicator/SH.DYN.MORT">WHO</a>. Data shown is most recent data 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="tooltip.js"></script> | |
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
<script> | |
var width = 1300, | |
height = 600; | |
// var tip = d3.tip() | |
// .attr('class', 'd3-tip') | |
// // .offset([-2, 0]) | |
// .html(function(d) { | |
// var dataRow = countryById.get(d.id); | |
// if (dataRow) { | |
// return d.properties.name + ": " + dataRow.mortality; | |
// } else { | |
// console.log("no dataRow", d); | |
// return d.properties.name + ": No data."; | |
// } | |
// }) | |
var svg = d3.select('#vis').append('svg') | |
.attr('width', width) | |
.attr('height', height) | |
.call(d3.behavior.zoom() | |
.on("zoom", redraw)) | |
.append("g"); | |
// .call(tip); | |
function redraw() { | |
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); | |
} | |
var projection = d3.geo.mercator() | |
.scale(225) // mess with this if you want | |
.translate([width / 2, height / 2]); | |
var path = d3.geo.path() | |
.projection(projection); | |
var colorScale = d3.scale.linear().range(["#d1e5f0","#b2182b"]).interpolate(d3.interpolateLab); | |
// var colorScale = d3.scale.linear().range(["#fff5f0", "#67000d"]).interpolate(d3.interpolateLab); | |
// var colorScale = d3.scale.category20(); | |
var countryById = d3.map(); | |
// we use queue because we have 2 data files to load. | |
queue() | |
.defer(d3.json, "countries.json") | |
.defer(d3.csv, "childMortality_2015.csv", typeAndSet) // process | |
.await(loaded); | |
function typeAndSet(d) { | |
d.mortality = +d.mortality; | |
countryById.set(d.ISO3, d); | |
return d; | |
} | |
function getColor(d) { | |
var dataRow = countryById.get(d.id); | |
if (dataRow) { | |
console.log(dataRow); | |
return colorScale(dataRow.mortality); | |
} else { | |
console.log("no dataRow", d); | |
return "rgba(0, 0, 0, 0.7)"; | |
} | |
} | |
function getText(d) { | |
var dataRow = countryById.get(d.id); | |
if (dataRow) { | |
return "<strong>" + d.properties.name + "</strong>" + ": " + dataRow.mortality; | |
} else { | |
console.log("no dataRow", d); | |
return "<strong>" + d.properties.name + "</strong>" + ": No data."; | |
} | |
} | |
function loaded(error, countries, mortalityRate) { | |
console.log(countries); | |
console.log(mortalityRate); | |
// console.log(malaria); | |
colorScale.domain(d3.extent(mortalityRate, function(d) {return d.mortality;})); | |
var countries = topojson.feature(countries, countries.objects.units).features; | |
// svg.append("rect").attr("width", "100%") | |
// .attr("height", "100%") | |
// .attr("fill", "rgba(166,206,227,0.2)"); | |
svg.selectAll('path.countries') | |
.data(countries) | |
.enter() | |
.append('path') | |
.attr('class', 'countries') | |
.attr('d', path) | |
// .on('mouseover', tip.show) | |
// .on('mouseout', tip.hide) | |
.attr('fill', function(d,i) { | |
console.log(d.properties.name); | |
return getColor(d); | |
}) | |
.call(d3.helper.tooltip( | |
function(d, i){ | |
return getText(d); | |
})); //tooltip based in an example from Roger Veciana: http://bl.ocks.org/rveciana/5181105 | |
// .append("title") | |
// .text(function(d) { | |
// return getText(d); | |
// }); | |
var linear = colorScale; | |
svg.append("g") | |
.attr("class", "legendLinear") | |
.attr("transform", "translate(20,20)"); | |
var legendLinear = d3.legend.color() | |
.shapeWidth(30) | |
.orient('horizontal') | |
.scale(linear); | |
svg.select(".legendLinear") | |
.call(legendLinear); | |
} | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//tooltip based in an example from Roger Veciana: http://bl.ocks.org/rveciana/5181105 | |
d3.helper = {}; | |
d3.helper.tooltip = function(accessor){ | |
return function(selection){ | |
var tooltipDiv; | |
var bodyNode = d3.select('body').node(); | |
selection.on("mouseover", function(d, i){ | |
// Clean up lost tooltips | |
d3.select('body').selectAll('div.tooltip').remove(); | |
// Append tooltip | |
tooltipDiv = d3.select('body').append('div').attr('class', 'tooltip'); | |
var absoluteMousePos = d3.mouse(bodyNode); | |
tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px') | |
.style('top', (absoluteMousePos[1] - 15)+'px') | |
.style('position', 'absolute') | |
.style('z-index', 1001) | |
.style('border-radius', '2px') | |
.style('color', '#0099FF') | |
.style('padding', '10px 15px') | |
.style('background', 'rgba(255, 255, 255, 0.7)'); | |
// Add text using the accessor function | |
var tooltipText = accessor(d, i) || ''; | |
// Crop text arbitrarily | |
//tooltipDiv.style('width', function(d, i){return (tooltipText.length > 80) ? '300px' : null;}) | |
// .html(tooltipText); | |
}) | |
.on('mousemove', function(d, i) { | |
// Move tooltip | |
var absoluteMousePos = d3.mouse(bodyNode); | |
tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px') | |
.style('top', (absoluteMousePos[1] - 15)+'px'); | |
var tooltipText = accessor(d, i) || ''; | |
tooltipDiv.html(tooltipText); | |
}) | |
.on("mouseout", function(d, i){ | |
// Remove tooltip | |
tooltipDiv.remove(); | |
}); | |
}; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment