Created
November 16, 2015 20:50
-
-
Save jowang0319/56c1a815be4b33d1e8d9 to your computer and use it in GitHub Desktop.
scrolling
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
ShortName | youthLiteracyRate | under5Mortality | country | adolescentFertilityRate | ISO3 | LongName | Region | |
---|---|---|---|---|---|---|---|---|
Afghanistan | 32 | 96.7 | Afghanistan | 82.2638 | AFG | Islamic State of Afghanistan | South Asia | |
Albania | 99 | 14.9 | Albania | 21.1438 | ALB | Republic of Albania | Europe & Central Asia | |
Algeria | 89 | 25.8 | Algeria | 11.1112 | DZA | People's Democratic Republic of Algeria | Middle East & North Africa | |
Angola | 66 | 167.1 | Angola | 171.2734 | AGO | People's Republic of Angola | Sub-Saharan Africa | |
Argentina | 99 | 13.3 | Argentina | 63.9136 | ARG | Argentine Republic | Latin America & Caribbean | |
Armenia | 100 | 15.5 | Armenia | 24.5562 | ARM | Republic of Armenia | Europe & Central Asia | |
Azerbaijan | 100 | 34.2 | Azerbaijan | 56.1272 | AZE | Republic of Azerbaijan | Europe & Central Asia | |
Bahrain | 98 | 6.9 | Bahrain | 13.6638 | BHR | Kingdom of Bahrain | Middle East & North Africa | |
Bangladesh | 82 | 41.6 | Bangladesh | 84.43 | BGD | People's Republic of Bangladesh | South Asia | |
Belarus | 100 | 5 | Belarus | 20.129 | BLR | Republic of Belarus | Europe & Central Asia | |
Benin | 31 | 104.8 | Benin | 87.405 | BEN | Republic of Benin | Sub-Saharan Africa | |
Bhutan | 68 | 36 | Bhutan | 25.209 | BTN | Kingdom of Bhutan | South Asia | |
Bolivia | 99 | 41.3 | Bolivia | 71.863 | BOL | Plurinational State of Bolivia | Latin America & Caribbean | |
Bosnia and Herzegovina | 100 | 6.1 | Bosnia and Herzegovina | 10.0562 | BIH | Bosnia and Herzegovina | Europe & Central Asia | |
Botswana | 98 | 46.6 | Botswana | 36.3236 | BWA | Republic of Botswana | Sub-Saharan Africa | |
Brazil | 99 | 16 | Brazil | 67.8778 | BRA | Federative Republic of Brazil | Latin America & Caribbean | |
Brunei | 100 | 9.9 | Brunei Darussalam | 21.4452 | BRN | Brunei Darussalam | East Asia & Pacific | |
Bulgaria | 98 | 11.5 | Bulgaria | 40.3382 | BGR | Republic of Bulgaria | Europe & Central Asia | |
Burkina Faso | 33 | 96.6 | Burkina Faso | 112.6558 | BFA | Burkina Faso | Sub-Saharan Africa | |
Burundi | 88 | 87.8 | Burundi | 29.4556 | BDI | Republic of Burundi | Sub-Saharan Africa | |
Cabo Verde | 98 | 25.9 | Cabo Verde | 74.1528 | CPV | Republic of Cabo Verde | Sub-Saharan Africa | |
Cambodia | 86 | 32.9 | Cambodia | 49.9346 | KHM | Kingdom of Cambodia | East Asia & Pacific | |
Cameroon | 76 | 93.9 | Cameroon | 111.346 | CMR | Republic of Cameroon | Sub-Saharan Africa | |
Central African Republic | 27 | 138.5 | Central African Republic | 95.7756 | CAF | Central African Republic | Sub-Saharan Africa | |
Chad | 44 | 147.1 | Chad | 144.594 | TCD | Republic of Chad | Sub-Saharan Africa | |
Chile | 99 | 8.4 | Chile | 48.7144 | CHL | Republic of Chile | Latin America & Caribbean | |
China | 100 | 12.3 | China | 7.4344 | CHN | People's Republic of China | East Asia & Pacific | |
Colombia | 99 | 16.9 | Colombia | 54.6654 | COL | Republic of Colombia | Latin America & Caribbean | |
Comoros | 87 | 78.3 | Comoros | 71.9988 | COM | Union of the Comoros | Sub-Saharan Africa | |
Dem. Rep. Congo | 53 | 49.6 | Congo, Dem. Rep. | 123.6202 | COD | Democratic Republic of the Congo | Sub-Saharan Africa | |
Congo | 77 | 104.8 | Congo, Rep. | 122.346 | COG | Republic of Congo | Sub-Saharan Africa | |
Costa Rica | 99 | 10 | Costa Rica | 58.0514 | CRI | Republic of Costa Rica | Latin America & Caribbean | |
Cote d'Ivoire | 39 | 99 | Cote d'Ivoire | 135.302 | CIV | Republic of C_te d'Ivoire | Sub-Saharan Africa | |
Croatia | 100 | 4.7 | Croatia | 10.68 | HRV | Republic of Croatia | Europe & Central Asia | |
Cuba | 100 | 5.7 | Cuba | 47.2252 | CUB | Republic of Cuba | Latin America & Caribbean | |
Cyprus | 100 | 3 | Cyprus | 5.2794 | CYP | Republic of Cyprus | Europe & Central Asia | |
Dominican Republic | 98 | 32.2 | Dominican Republic | 99.5292 | DOM | Dominican Republic | Latin America & Caribbean | |
Ecuador | 99 | 23 | Ecuador | 76.7488 | ECU | Republic of Ecuador | Latin America & Caribbean | |
Egypt | 86 | 25.8 | Egypt, Arab Rep. | 53.5396 | EGY | Arab Republic of Egypt | Middle East & North Africa | |
El Salvador | 97 | 18 | El Salvador | 66.1952 | SLV | Republic of El Salvador | Latin America & Caribbean | |
Equatorial Guinea | 99 | 100.3 | Equatorial Guinea | 112.0642 | GNQ | Republic of Equatorial Guinea | Sub-Saharan Africa | |
Eritrea | 89 | 49.7 | Eritrea | 58.3406 | ERI | State of Eritrea | Sub-Saharan Africa | |
Estonia | 100 | 3.5 | Estonia | 14.8994 | EST | Republic of Estonia | Europe & Central Asia | |
Ethiopia | 47 | 64.6 | Ethiopia | 63.6274 | ETH | Federal Democratic Republic of Ethiopia | Sub-Saharan Africa | |
Gabon | 89 | 54.8 | Gabon | 106.708 | PYF | Gabonese Republic | Sub-Saharan Africa | |
The Gambia | 66 | 73.6 | Gambia, The | 114.7038 | GAB | Republic of The Gambia | Sub-Saharan Africa | |
Georgia | 100 | 13.4 | Georgia | 43.9324 | GMB | Georgia | Europe & Central Asia | |
Ghana | 83 | 66.5 | Ghana | 68.8752 | DEU | Republic of Ghana | Sub-Saharan Africa | |
Greece | 99 | 4.7 | Greece | 8.1042 | GHA | Hellenic Republic | Europe & Central Asia | |
Guatemala | 92 | 31.1 | Guatemala | 82.72 | GUM | Republic of Guatemala | Latin America & Caribbean | |
Guinea | 22 | 100.4 | Guinea | 143.7726 | GTM | Republic of Guinea | Sub-Saharan Africa | |
Guinea-Bissau | 69 | 100.5 | Guinea-Bissau | 95.2424 | GIN | Republic of Guinea-Bissau | Sub-Saharan Africa | |
Guyana | 94 | 40.8 | Guyana | 89.2584 | GNB | Co-operative Republic of Guyana | Latin America & Caribbean | |
Haiti | 70 | 73.1 | Haiti | 40.47 | GUY | Republic of Haiti | Latin America & Caribbean | |
Honduras | 96 | 21.8 | Honduras | 67.0488 | HTI | Republic of Honduras | Latin America & Caribbean | |
Hungary | 99 | 6.2 | Hungary | 18.7178 | HKG | Hungary | Europe & Central Asia | |
India | 74 | 52.1 | India | 28.0568 | ISL | Republic of India | South Asia | |
Indonesia | 99 | 29.3 | Indonesia | 50.753 | IND | Republic of Indonesia | East Asia & Pacific | |
Iran | 98 | 16.8 | Iran, Islamic Rep. | 27.8554 | IDN | Islamic Republic of Iran | Middle East & North Africa | |
Iraq | 81 | 33.9 | Iraq | 81.6186 | IRN | Republic of Iraq | Middle East & North Africa | |
Israel | 99 | 4.2 | Israel | 10.8146 | IMN | State of Israel | Middle East & North Africa | |
Italy | 100 | 3.7 | Italy | 6.2324 | ISR | Italian Republic | Europe & Central Asia | |
Jamaica | 99 | 16.7 | Jamaica | 62.3322 | ITA | Jamaica | Latin America & Caribbean | |
Jordan | 99 | 19 | Jordan | 24.8826 | JPN | Hashemite Kingdom of Jordan | Middle East & North Africa | |
Kazakhstan | 100 | 16.4 | Kazakhstan | 29.981 | JOR | Republic of Kazakhstan | Europe & Central Asia | |
Kenya | 82 | 53.4 | Kenya | 92.843 | KAZ | Republic of Kenya | Sub-Saharan Africa | |
Dem. People's Rep. Korea | 100 | 27.4 | Korea, Dem. Rep. | 0.5994 | KIR | Democratic People's Republic of Korea | East Asia & Pacific | |
Kuwait | 99 | 9.4 | Kuwait | 10.8486 | KSV | State of Kuwait | Middle East & North Africa | |
Kyrgyz Republic | 100 | 24 | Kyrgyz Republic | 40.7962 | KWT | Kyrgyz Republic | Europe & Central Asia | |
Lao PDR | 79 | 71.3 | Lao PDR | 65.348 | KGZ | Lao People's Democratic Republic | East Asia & Pacific | |
Latvia | 100 | 8.4 | Latvia | 14.669 | LAO | Republic of Latvia | Europe & Central Asia | |
Lebanon | 99 | 8.9 | Lebanon | 13.1262 | LVA | Lebanese Republic | Middle East & North Africa | |
Lesotho | 92 | 93.6 | Lesotho | 91.3852 | LBN | Kingdom of Lesotho | Sub-Saharan Africa | |
Liberia | 37 | 76.3 | Liberia | 113.9902 | LSO | Republic of Liberia | Sub-Saharan Africa | |
Libya | 100 | 14.5 | Libya | 6.2694 | LBR | Socialist People's Libyan Arab Jamahiriya | Middle East & North Africa | |
Lithuania | 100 | 5.3 | Lithuania | 12.8092 | LIE | Republic of Lithuania | Europe & Central Asia | |
Madagascar | 64 | 53.4 | Madagascar | 120.168 | MKD | Republic of Madagascar | Sub-Saharan Africa | |
Malawi | 70 | 71.3 | Malawi | 138.595 | MDG | Republic of Malawi | Sub-Saharan Africa | |
Malaysia | 98 | 7.5 | Malaysia | 13.0802 | MWI | Malaysia | East Asia & Pacific | |
Maldives | 99 | 9.9 | Maldives | 8.338 | MYS | Republic of Maldives | South Asia | |
Mali | 39 | 122.7 | Mali | 177.1464 | MDV | Republic of Mali | Sub-Saharan Africa | |
Malta | 99 | 6.6 | Malta | 17.3048 | MLI | Republic of Malta | Middle East & North Africa | |
Mauritania | 48 | 90.2 | Mauritania | 80.8598 | MHL | Islamic Republic of Mauritania | Sub-Saharan Africa | |
Mauritius | 99 | 14.3 | Mauritius | 28.8782 | MRT | Republic of Mauritius | Sub-Saharan Africa | |
Mexico | 99 | 14.5 | Mexico | 64.7146 | MUS | United Mexican States | Latin America & Caribbean | |
Moldova | 100 | 16.4 | Moldova | 24.444 | FSM | Republic of Moldova | Europe & Central Asia | |
Mongolia | 99 | 24.7 | Mongolia | 17.6874 | MCO | Mongolia | East Asia & Pacific | |
Montenegro | 99 | 5.3 | Montenegro | 12.897 | MNG | Montenegro | Europe & Central Asia | |
Morocco | 74 | 29.7 | Morocco | 32.7784 | MNE | Kingdom of Morocco | Middle East & North Africa | |
Mozambique | 57 | 85.6 | Mozambique | 148.1392 | MAR | Republic of Mozambique | Sub-Saharan Africa | |
Myanmar | 96 | 53.5 | Myanmar | 17.1758 | MOZ | Republic of the Union of Myanmar | East Asia & Pacific | |
Namibia | 91 | 47.7 | Namibia | 78.5882 | MMR | Republic of Namibia | Sub-Saharan Africa | |
Nepal | 77 | 39 | Nepal | 73.7654 | NAM | Nepal | South Asia | |
Nicaragua | 89 | 23.5 | Nicaragua | 91.2078 | NZL | Republic of Nicaragua | Latin America & Caribbean | |
Niger | 15 | 104.1 | Niger | 206.045 | NIC | Republic of Niger | Sub-Saharan Africa | |
Nigeria | 58 | 116.6 | Nigeria | 114.468 | NER | Federal Republic of Nigeria | Sub-Saharan Africa | |
Oman | 98 | 11.7 | Oman | 9.6078 | NOR | Sultanate of Oman | Middle East & North Africa | |
Pakistan | 63 | 85.6 | Pakistan | 39.99 | OMN | Islamic Republic of Pakistan | South Asia | |
Panama | 97 | 18.1 | Panama | 76.9206 | PLW | Republic of Panama | Latin America & Caribbean | |
Papua New Guinea | 76 | 60.9 | Papua New Guinea | 56.07 | PAN | The Independent State of Papua New Guinea | East Asia & Pacific | |
Paraguay | 99 | 21.9 | Paraguay | 59.1124 | PNG | Republic of Paraguay | Latin America & Caribbean | |
Peru | 99 | 18.3 | Peru | 50.9086 | PRY | Republic of Peru | Latin America & Caribbean | |
Philippines | 98 | 29.6 | Philippines | 58.8826 | PER | Republic of the Philippines | East Asia & Pacific | |
Poland | 100 | 5.2 | Poland | 14.193 | PHL | Republic of Poland | Europe & Central Asia | |
Portugal | 99 | 3.8 | Portugal | 11.1172 | POL | Portuguese Republic | Europe & Central Asia | |
Qatar | 100 | 8.4 | Qatar | 11.2884 | PRI | State of Qatar | Middle East & North Africa | |
Romania | 99 | 12 | Romania | 36.206 | QAT | Romania | Europe & Central Asia | |
Russia | 100 | 10.4 | Russian Federation | 25.5276 | ROU | Russian Federation | Europe & Central Asia | |
Rwanda | 78 | 47.8 | Rwanda | 28.4676 | RUS | Republic of Rwanda | Sub-Saharan Africa | |
Samoa | 100 | 18.2 | Samoa | 26.9306 | RWA | Samoa | East Asia & Pacific | |
Sao Tom_ and Principe | 77 | 50.8 | Sao Tome and Principe | 86.88 | SMR | Democratic Republic of S�o Tom_ and Principe | Sub-Saharan Africa | |
Saudi Arabia | 99 | 15.5 | Saudi Arabia | 10.06 | STP | Kingdom of Saudi Arabia | Middle East & North Africa | |
Senegal | 59 | 52.5 | Senegal | 83.6376 | SAU | Republic of Senegal | Sub-Saharan Africa | |
Serbia | 99 | 6.9 | Serbia | 19.9722 | SEN | Republic of Serbia | Europe & Central Asia | |
Seychelles | 99 | 14 | Seychelles | 58.9794 | SRB | Republic of Seychelles | Sub-Saharan Africa | |
Sierra Leone | 54 | 133.4 | Sierra Leone | 122.4688 | SYC | Republic of Sierra Leone | Sub-Saharan Africa | |
Singapore | 100 | 2.8 | Singapore | 3.8712 | SLE | Republic of Singapore | East Asia & Pacific | |
Slovenia | 100 | 2.8 | Slovenia | 4.2084 | SVK | Republic of Slovenia | Europe & Central Asia | |
South Africa | 99 | 43.4 | South Africa | 48.7214 | SOM | Republic of South Africa | Sub-Saharan Africa | |
Spain | 100 | 4.3 | Spain | 8.733 | SSD | Kingdom of Spain | Europe & Central Asia | |
Sri Lanka | 99 | 10.2 | Sri Lanka | 16.569 | ESP | Democratic Socialist Republic of Sri Lanka | South Asia | |
Sudan | 85 | 74.2 | Sudan | 79.994 | VCT | Republic of the Sudan | Sub-Saharan Africa | |
Suriname | 99 | 22.6 | Suriname | 47.2984 | SDN | Republic of Suriname | Latin America & Caribbean | |
Swaziland | 95 | 67.6 | Swaziland | 79.9952 | SUR | Kingdom of Swaziland | Sub-Saharan Africa | |
Syrian Arab Republic | 94 | 15.3 | Syrian Arab Republic | 41.1662 | CHE | Syrian Arab Republic | Middle East & North Africa | |
Tajikistan | 100 | 47.8 | Tajikistan | 38.9126 | TWN | Republic of Tajikistan | Europe & Central Asia | |
Thailand | 97 | 13.1 | Thailand | 44.6664 | TZA | Kingdom of Thailand | East Asia & Pacific | |
Timor-Leste | 79 | 56.5 | Timor-Leste | 49.964 | THA | Democratic Republic of Timor-Leste | East Asia & Pacific | |
Togo | 73 | 83.3 | Togo | 91.8462 | TLS | Republic of Togo | Sub-Saharan Africa | |
Tonga | 100 | 17.3 | Tonga | 16.0212 | TGO | Kingdom of Tonga | East Asia & Pacific | |
Trinidad and Tobago | 100 | 21.5 | Trinidad and Tobago | 33.4818 | TON | Republic of Trinidad and Tobago | Latin America & Caribbean | |
Tunisia | 96 | 15.2 | Tunisia | 6.7884 | TTO | Republic of Tunisia | Middle East & North Africa | |
Turkey | 98 | 15.4 | Turkey | 30.021 | TUN | Republic of Turkey | Europe & Central Asia | |
Turkmenistan | 100 | 54.7 | Turkmenistan | 17.3494 | TUR | Turkmenistan | Europe & Central Asia | |
Uganda | 85 | 60.3 | Uganda | 120.7472 | TUV | Republic of Uganda | Sub-Saharan Africa | |
Ukraine | 100 | 10 | Ukraine | 26.419 | UGA | Ukraine | Europe & Central Asia | |
United Arab Emirates | 97 | 7.4 | United Arab Emirates | 28.4394 | UKR | United Arab Emirates | Middle East & North Africa | |
Uruguay | 99 | 11.1 | Uruguay | 57.2492 | USA | Oriental Republic of Uruguay | Latin America & Caribbean | |
Uzbekistan | 100 | 41.8 | Uzbekistan | 18.0354 | URY | Republic of Uzbekistan | Europe & Central Asia | |
Vanuatu | 95 | 28.4 | Vanuatu | 44.1226 | UZB | Republic of Vanuatu | East Asia & Pacific | |
Venezuela | 99 | 15.7 | Venezuela, RB | 80.2826 | VUT | Rep�blica Bolivariana de Venezuela | Latin America & Caribbean | |
Vietnam | 97 | 22.9 | Vietnam | 37.0902 | VEN | Socialist Republic of Vietnam | East Asia & Pacific | |
Yemen | 78 | 46 | Yemen, Rep. | 63.7318 | WBG | Republic of Yemen | Middle East & North Africa | |
Zambia | 58 | 70.2 | Zambia | 98.1738 | YEM | Republic of Zambia | Sub-Saharan Africa | |
Zimbabwe | 92 | 74.5 | Zimbabwe | 111.8664 | ZMB | Republic of Zimbabwe | Sub-Saharan Africa | |
World | 86.69655172 | 39.4137931 | 56.00922483 |
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> | |
<html> | |
<head> | |
<title>Scrolling Sections</title> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> | |
<link rel="stylesheet" href="scatter.css" /> | |
<style> | |
.container { | |
width: 890px; | |
} | |
#graphic { | |
padding-top: 60px; | |
} | |
#sections { | |
position: relative; | |
display: inline-block; | |
width: 250px; | |
top: 0px; | |
z-index: 90; | |
padding-bottom: 250px; | |
} | |
.step { | |
margin-bottom: 200px; | |
font-family: "TiemposTextWeb-Regular","Georgia"; | |
font-size: 16px; | |
line-height: 23px; | |
color: #767678; | |
} | |
#sections .title { | |
font-family: Arial,Helvetica,"san-serif"; | |
font-size: 16px; | |
font-weight: bold; | |
margin-bottom: 2px; | |
color: #262626; | |
line-height: 1.2em; | |
} | |
#extra-space { | |
height: 300px; | |
} | |
#vis { | |
display: inline-block; | |
position: fixed; | |
top: 60px; | |
z-index: 1; | |
margin-left: 0; | |
font-size: 10px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div id='graphic'> | |
<div id='sections'> | |
<section class="step"> | |
<!-- case 0 --> | |
<div class="title">Women's role of children health</div> | |
The relationship between female education and the under five mortality rate, colored by region. | |
</section> | |
<section class="step"> | |
<!-- case 1 --> | |
<div class="title">Afghanistan</div> | |
Afghanistan is the only country with the most serious problem of under 5 children death from South Asia. | |
</section> | |
<section class="step"> | |
<!-- case 2 --> | |
<div class="title">Angola</div> | |
Angola is an outlier in the plot as it has the highest under five mortality rate although the female literacy rate is over 60 percent. | |
</section> | |
<section class="step"> | |
<!-- case 3 --> | |
<div class="title">Top ten countries with lowest female youth literacy rate</div> | |
They also have relatively high under five mortality rate. | |
</section> | |
<section class="step"> | |
<!-- case 4--> | |
<div class="title">Top ten countries with highest female youth literacy rate</div> | |
Most of them are from European and Central Asia, but the under five mortality rate varies a lot, why? | |
</section> | |
<section class="step"> | |
<!-- case 5--> | |
<div class="title">How does female education related to children health?</div> | |
It contributes to : | |
</br> population growth | |
</br> GDP | |
</br> Medical care | |
</br> Family health | |
</br> Children education | |
</section> | |
<section class="step"> | |
<!-- case 6--> | |
<div class="title">For example...</div> | |
Higher literacy rate contributes to lower female adolescent fertility rate. | |
</section> | |
</div> | |
<div id='vis'> | |
</div> | |
<div id="extra-space"> | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> | |
<script src="http://d3js.org/queue.v1.min.js"></script> | |
<script src="mfreeman_scroller.js"></script> | |
<script src="scatter.js"></script> | |
<script src="scroller.js"></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
/** | |
* scroller - handles the details | |
* of figuring out which section | |
* the user is currently scrolled | |
* to. | |
* | |
*/ | |
function scroller() { | |
var windowHeight; | |
var container = d3.select('body'); | |
// Set height | |
var height = $('.step:last').height() | |
var marginBottom = parseInt($('.step:last').css('margin-bottom')) | |
var newHeight = $(window).height() - height - marginBottom | |
$('.step:last').height(newHeight) | |
console.log('height ', height, ' new height ', newHeight) | |
// event dispatcher | |
var dispatch = d3.dispatch("active", "progress"); | |
// d3 selection of all the | |
// text sections that will | |
// be scrolled through | |
var sections = null; | |
// array that will hold the | |
// y coordinate of each section | |
// that is scrolled through | |
var sectionPositions = []; | |
var currentIndex = -1; | |
// y coordinate of | |
var containerStart = 0; | |
/** | |
* scroll - constructor function. | |
* Sets up scroller to monitor | |
* scrolling of els selection. | |
* | |
* @param els - d3 selection of | |
* elements that will be scrolled | |
* through by user. | |
*/ | |
function scroll(els) { | |
sections = els; | |
// when window is scrolled call | |
// position. When it is resized | |
// call resize. | |
d3.select(window) | |
.on("scroll.scroller", position) | |
.on("resize.scroller", resize); | |
// manually call resize | |
// initially to setup | |
// scroller. | |
resize(); | |
// hack to get position | |
// to be called once for | |
// the scroll position on | |
// load. | |
d3.timer(function() { | |
position(); | |
return true; | |
}); | |
} | |
/** | |
* resize - called initially and | |
* also when page is resized. | |
* Resets the sectionPositions | |
* | |
*/ | |
function resize() { | |
// sectionPositions will be each sections | |
// starting position relative to the top | |
// of the first section. | |
sectionPositions = []; | |
var startPos; | |
sections.each(function(d,i) { | |
var top = this.getBoundingClientRect().top; | |
if(i === 0) { | |
startPos = top; | |
} | |
sectionPositions.push(top - startPos); | |
}); | |
containerStart = container.node().getBoundingClientRect().top + window.pageYOffset; | |
} | |
/** | |
* position - get current users position. | |
* if user has scrolled to new section, | |
* dispatch active event with new section | |
* index. | |
* | |
*/ | |
function position() { | |
var pos = window.pageYOffset - 10 - containerStart; | |
var sectionIndex = d3.bisect(sectionPositions, pos); | |
sectionIndex = Math.min(sections.size() - 1, sectionIndex); | |
if (currentIndex !== sectionIndex) { | |
dispatch.active(sectionIndex); | |
currentIndex = sectionIndex; | |
} | |
var prevIndex = Math.max(sectionIndex - 1, 0); | |
var prevTop = sectionPositions[prevIndex]; | |
var progress = (pos - prevTop) / (sectionPositions[sectionIndex] - prevTop); | |
dispatch.progress(currentIndex, progress); | |
} | |
/** | |
* container - get/set the parent element | |
* of the sections. Useful for if the | |
* scrolling doesn't start at the very top | |
* of the page. | |
* | |
* @param value - the new container value | |
*/ | |
scroll.container = function(value) { | |
if (arguments.length === 0) { | |
return container; | |
} | |
container = value; | |
return scroll; | |
}; | |
// Update function | |
scroll.update = function(action) { | |
if (arguments.length === 0) { | |
return update; | |
} | |
scroll.on('active', function(index) { | |
// highlight current step text | |
d3.selectAll('.step') | |
.style('opacity', function(d,i) { return i == index ? 1 : 0.1; }); | |
action(index) | |
}); | |
return scroll; | |
}; | |
// | |
// allows us to bind to scroller events | |
// which will interally be handled by | |
// the dispatcher. | |
d3.rebind(scroll, dispatch, "on"); | |
return scroll; | |
} | |
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
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis text, | |
.label { | |
font-family: sans-serif; | |
font-size: 11px; | |
} | |
circle{ | |
fill-opacity: 70%; | |
} | |
circle.unfocused{ | |
fill-opacity: 20%; | |
} | |
circle.focused { | |
fill-opacity:100%; | |
} |
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
//normal settings | |
var width = 700; | |
var height = 600; | |
var margin = {top:20,right:10,bottom:50,left:50}; | |
var colors = d3.scale.category10(); | |
var dotRadius = 6; | |
var xScale = d3.scale.linear() | |
.range([ margin.left, width - margin.right - margin.left ]); | |
var yScale = d3.scale.linear() | |
.range([ height - margin.bottom, margin.top ]); | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(5); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left") | |
.ticks(5); | |
var svg = d3.select("#vis") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var drawylabel = svg | |
.append('text') | |
.attr("transform", "rotate(-90)") | |
.attr("x", -margin.top) | |
.attr("y", -margin.left +103 ) | |
.attr("dy", "1em") | |
.style("text-anchor", "end") | |
.attr("class", "label"); | |
drawylabel.transition().duration(1000) | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (height - margin.bottom) + ")") | |
.call(xAxis) | |
.append("text") | |
.attr("x", width - margin.left - margin.right/2) | |
.attr("y", -15) | |
.attr("dy", "1em") | |
.style("text-anchor", "end") | |
.attr("class", "label") | |
.text("Female Youth Literacy Rate"); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + margin.left + ",0)") | |
.call(yAxis) | |
/*.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("x", -margin.top) | |
.attr("y", -2*margin.left / 3) | |
.attr("dy", "1em") | |
.style("text-anchor", "end") | |
.attr("class", "label") | |
.text(label);*/ | |
function draw_circles(data){ | |
//console.log(data); | |
xScale.domain([ | |
d3.min(data,function(d){ | |
return d.x; | |
}) - 4, | |
d3.max(data,function(d){ | |
return d.x; | |
}) | |
]); | |
yScale.domain([ | |
d3.min(data,function(d){ | |
return + d.y; | |
}) - 7, | |
d3.max(data,function(d){ | |
return + d.y; | |
}) +2 | |
]); | |
var circles = svg.selectAll("circle") | |
.data(data,function(d){return d.country;}) | |
circles | |
.enter() | |
/*.append("g") | |
.attr("id",function(d){ | |
return d.Region; | |
})*/ | |
.append("circle") | |
.attr("r", 0) | |
.attr("opacity",0) | |
.attr("id",function(d){ | |
return d.country; | |
}) | |
.attr("class","dots") | |
.attr("fill",function(d){ | |
return colors(d.Region); | |
}) | |
circles.transition().duration(1000).attr("cx", function(d) { | |
return xScale(+d.x); | |
}) | |
.attr("cy", function(d) { | |
return yScale(+d.y); | |
}) | |
.attr("r",dotRadius) | |
.attr("opacity",0.8); | |
circles.exit().transition().duration(1000).attr("r",0).attr("opacity",0).remove(); | |
svg.select('.x.axis').transition().duration(1000).call(xAxis); | |
svg.select('.y.axis').transition().duration(1000).call(yAxis); | |
} | |
function getData(data){ | |
data.forEach(function(d){ | |
d.x = +d.youthLiteracyRate; | |
d.y = +d.under5Mortality; | |
//d.region = d.Region.replace(/\s/g, '_') | |
}) | |
//console.log(data); | |
return data; | |
} | |
function getData2(data){ | |
data.forEach(function(d){ | |
d.x = +d.youthLiteracyRate; | |
d.y = +d.adolescentFertilityRate; | |
}) | |
//console.log(data); | |
return data; | |
} | |
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
ShortName | youthLiteracyRate | under5Mortality | country | adolescentFertilityRate | ISO3 | LongName | Region | |
---|---|---|---|---|---|---|---|---|
Afghanistan | 32 | 96.7 | Afghanistan | 82.2638 | AFG | Islamic State of Afghanistan | South Asia | |
Albania | 99 | 14.9 | Albania | 21.1438 | ALB | Republic of Albania | Europe & Central Asia | |
Algeria | 89 | 25.8 | Algeria | 11.1112 | DZA | People's Democratic Republic of Algeria | Middle East & North Africa | |
Angola | 66 | 167.1 | Angola | 171.2734 | AGO | People's Republic of Angola | Sub-Saharan Africa | |
Antigua and Barbuda | _ | 8.7 | Antigua and Barbuda | 47.4636 | ATG | Antigua and Barbuda | Latin America & Caribbean | |
Argentina | 99 | 13.3 | Argentina | 63.9136 | ARG | Argentine Republic | Latin America & Caribbean | |
Armenia | 100 | 15.5 | Armenia | 24.5562 | ARM | Republic of Armenia | Europe & Central Asia | |
Australia | _ | 4.1 | Australia | 14.966 | AUS | Commonwealth of Australia | East Asia & Pacific | |
Austria | _ | 3.9 | Austria | 7.972 | AUT | Republic of Austria | Europe & Central Asia | |
Azerbaijan | 100 | 34.2 | Azerbaijan | 56.1272 | AZE | Republic of Azerbaijan | Europe & Central Asia | |
The Bahamas | _ | 12.8 | Bahamas, The | 32.353 | BHS | Commonwealth of The Bahamas | Latin America & Caribbean | |
Bahrain | 98 | 6.9 | Bahrain | 13.6638 | BHR | Kingdom of Bahrain | Middle East & North Africa | |
Bangladesh | 82 | 41.6 | Bangladesh | 84.43 | BGD | People's Republic of Bangladesh | South Asia | |
Barbados | _ | 13.7 | Barbados | 44.4146 | BRB | Barbados | Latin America & Caribbean | |
Belarus | 100 | 5 | Belarus | 20.129 | BLR | Republic of Belarus | Europe & Central Asia | |
Belgium | _ | 4.3 | Belgium | 8.6962 | BEL | Kingdom of Belgium | Europe & Central Asia | |
Belize | _ | 17.5 | Belize | 68.211 | BLZ | Belize | Latin America & Caribbean | |
Benin | 31 | 104.8 | Benin | 87.405 | BEN | Republic of Benin | Sub-Saharan Africa | |
Bhutan | 68 | 36 | Bhutan | 25.209 | BTN | Kingdom of Bhutan | South Asia | |
Bolivia | 99 | 41.3 | Bolivia | 71.863 | BOL | Plurinational State of Bolivia | Latin America & Caribbean | |
Bosnia and Herzegovina | 100 | 6.1 | Bosnia and Herzegovina | 10.0562 | BIH | Bosnia and Herzegovina | Europe & Central Asia | |
Botswana | 98 | 46.6 | Botswana | 36.3236 | BWA | Republic of Botswana | Sub-Saharan Africa | |
Brazil | 99 | 16 | Brazil | 67.8778 | BRA | Federative Republic of Brazil | Latin America & Caribbean | |
Brunei | 100 | 9.9 | Brunei Darussalam | 21.4452 | BRN | Brunei Darussalam | East Asia & Pacific | |
Bulgaria | 98 | 11.5 | Bulgaria | 40.3382 | BGR | Republic of Bulgaria | Europe & Central Asia | |
Burkina Faso | 33 | 96.6 | Burkina Faso | 112.6558 | BFA | Burkina Faso | Sub-Saharan Africa | |
Burundi | 88 | 87.8 | Burundi | 29.4556 | BDI | Republic of Burundi | Sub-Saharan Africa | |
Cabo Verde | 98 | 25.9 | Cabo Verde | 74.1528 | CPV | Republic of Cabo Verde | Sub-Saharan Africa | |
Cambodia | 86 | 32.9 | Cambodia | 49.9346 | KHM | Kingdom of Cambodia | East Asia & Pacific | |
Cameroon | 76 | 93.9 | Cameroon | 111.346 | CMR | Republic of Cameroon | Sub-Saharan Africa | |
Canada | _ | 5.2 | Canada | 10.7086 | CAN | Canada | North America | |
Central African Republic | 27 | 138.5 | Central African Republic | 95.7756 | CAF | Central African Republic | Sub-Saharan Africa | |
Chad | 44 | 147.1 | Chad | 144.594 | TCD | Republic of Chad | Sub-Saharan Africa | |
Chile | 99 | 8.4 | Chile | 48.7144 | CHL | Republic of Chile | Latin America & Caribbean | |
China | 100 | 12.3 | China | 7.4344 | CHN | People's Republic of China | East Asia & Pacific | |
Colombia | 99 | 16.9 | Colombia | 54.6654 | COL | Republic of Colombia | Latin America & Caribbean | |
Comoros | 87 | 78.3 | Comoros | 71.9988 | COM | Union of the Comoros | Sub-Saharan Africa | |
Dem. Rep. Congo | 53 | 49.6 | Congo, Dem. Rep. | 123.6202 | COD | Democratic Republic of the Congo | Sub-Saharan Africa | |
Congo | 77 | 104.8 | Congo, Rep. | 122.346 | COG | Republic of Congo | Sub-Saharan Africa | |
Costa Rica | 99 | 10 | Costa Rica | 58.0514 | CRI | Republic of Costa Rica | Latin America & Caribbean | |
Cote d'Ivoire | 39 | 99 | Cote d'Ivoire | 135.302 | CIV | Republic of C�te d'Ivoire | Sub-Saharan Africa | |
Croatia | 100 | 4.7 | Croatia | 10.68 | HRV | Republic of Croatia | Europe & Central Asia | |
Cuba | 100 | 5.7 | Cuba | 47.2252 | CUB | Republic of Cuba | Latin America & Caribbean | |
Cyprus | 100 | 3 | Cyprus | 5.2794 | CYP | Republic of Cyprus | Europe & Central Asia | |
Czech Republic | _ | 3.7 | Czech Republic | 10.5782 | CZE | Czech Republic | Europe & Central Asia | |
Denmark | _ | 3.7 | Denmark | 4.2776 | DNK | Kingdom of Denmark | Europe & Central Asia | |
Djibouti | _ | 69.5 | Djibouti | 22.4692 | DJI | Republic of Djibouti | Middle East & North Africa | |
Dominican Republic | 98 | 32.2 | Dominican Republic | 99.5292 | DOM | Dominican Republic | Latin America & Caribbean | |
Ecuador | 99 | 23 | Ecuador | 76.7488 | ECU | Republic of Ecuador | Latin America & Caribbean | |
Egypt | 86 | 25.8 | Egypt, Arab Rep. | 53.5396 | EGY | Arab Republic of Egypt | Middle East & North Africa | |
El Salvador | 97 | 18 | El Salvador | 66.1952 | SLV | Republic of El Salvador | Latin America & Caribbean | |
Equatorial Guinea | 99 | 100.3 | Equatorial Guinea | 112.0642 | GNQ | Republic of Equatorial Guinea | Sub-Saharan Africa | |
Eritrea | 89 | 49.7 | Eritrea | 58.3406 | ERI | State of Eritrea | Sub-Saharan Africa | |
Estonia | 100 | 3.5 | Estonia | 14.8994 | EST | Republic of Estonia | Europe & Central Asia | |
Ethiopia | 47 | 64.6 | Ethiopia | 63.6274 | ETH | Federal Democratic Republic of Ethiopia | Sub-Saharan Africa | |
Fiji | _ | 23.2 | Fiji | 43.6644 | FJI | Republic of Fiji | East Asia & Pacific | |
Finland | _ | 2.6 | Finland | 6.9596 | FIN | Republic of Finland | Europe & Central Asia | |
France | _ | 4.4 | France | 9.2816 | FRA | French Republic | Europe & Central Asia | |
Gabon | 89 | 54.8 | Gabon | 106.708 | PYF | Gabonese Republic | Sub-Saharan Africa | |
The Gambia | 66 | 73.6 | Gambia, The | 114.7038 | GAB | Republic of The Gambia | Sub-Saharan Africa | |
Georgia | 100 | 13.4 | Georgia | 43.9324 | GMB | Georgia | Europe & Central Asia | |
Germany | _ | 3.9 | Germany | 7.4932 | GEO | Federal Republic of Germany | Europe & Central Asia | |
Ghana | 83 | 66.5 | Ghana | 68.8752 | DEU | Republic of Ghana | Sub-Saharan Africa | |
Greece | 99 | 4.7 | Greece | 8.1042 | GHA | Hellenic Republic | Europe & Central Asia | |
Grenada | _ | 12.5 | Grenada | 33.4268 | GRL | Grenada | Latin America & Caribbean | |
Guatemala | 92 | 31.1 | Guatemala | 82.72 | GUM | Republic of Guatemala | Latin America & Caribbean | |
Guinea | 22 | 100.4 | Guinea | 143.7726 | GTM | Republic of Guinea | Sub-Saharan Africa | |
Guinea-Bissau | 69 | 100.5 | Guinea-Bissau | 95.2424 | GIN | Republic of Guinea-Bissau | Sub-Saharan Africa | |
Guyana | 94 | 40.8 | Guyana | 89.2584 | GNB | Co-operative Republic of Guyana | Latin America & Caribbean | |
Haiti | 70 | 73.1 | Haiti | 40.47 | GUY | Republic of Haiti | Latin America & Caribbean | |
Honduras | 96 | 21.8 | Honduras | 67.0488 | HTI | Republic of Honduras | Latin America & Caribbean | |
Hungary | 99 | 6.2 | Hungary | 18.7178 | HKG | Hungary | Europe & Central Asia | |
Iceland | _ | 2.1 | Iceland | 7.307 | HUN | Republic of Iceland | Europe & Central Asia | |
India | 74 | 52.1 | India | 28.0568 | ISL | Republic of India | South Asia | |
Indonesia | 99 | 29.3 | Indonesia | 50.753 | IND | Republic of Indonesia | East Asia & Pacific | |
Iran | 98 | 16.8 | Iran, Islamic Rep. | 27.8554 | IDN | Islamic Republic of Iran | Middle East & North Africa | |
Iraq | 81 | 33.9 | Iraq | 81.6186 | IRN | Republic of Iraq | Middle East & North Africa | |
Ireland | _ | 3.8 | Ireland | 11.4516 | IRQ | Ireland | Europe & Central Asia | |
Israel | 99 | 4.2 | Israel | 10.8146 | IMN | State of Israel | Middle East & North Africa | |
Italy | 100 | 3.7 | Italy | 6.2324 | ISR | Italian Republic | Europe & Central Asia | |
Jamaica | 99 | 16.7 | Jamaica | 62.3322 | ITA | Jamaica | Latin America & Caribbean | |
Japan | _ | 2.9 | Japan | 4.3462 | JAM | Japan | East Asia & Pacific | |
Jordan | 99 | 19 | Jordan | 24.8826 | JPN | Hashemite Kingdom of Jordan | Middle East & North Africa | |
Kazakhstan | 100 | 16.4 | Kazakhstan | 29.981 | JOR | Republic of Kazakhstan | Europe & Central Asia | |
Kenya | 82 | 53.4 | Kenya | 92.843 | KAZ | Republic of Kenya | Sub-Saharan Africa | |
Kiribati | _ | 58.9 | Kiribati | 19.5494 | KEN | Republic of Kiribati | East Asia & Pacific | |
Dem. People's Rep. Korea | 100 | 27.4 | Korea, Dem. Rep. | 0.5994 | KIR | Democratic People's Republic of Korea | East Asia & Pacific | |
Korea | _ | 3.7 | Korea, Rep. | 1.7282 | PRK | Republic of Korea | East Asia & Pacific | |
Kuwait | 99 | 9.4 | Kuwait | 10.8486 | KSV | State of Kuwait | Middle East & North Africa | |
Kyrgyz Republic | 100 | 24 | Kyrgyz Republic | 40.7962 | KWT | Kyrgyz Republic | Europe & Central Asia | |
Lao PDR | 79 | 71.3 | Lao PDR | 65.348 | KGZ | Lao People's Democratic Republic | East Asia & Pacific | |
Latvia | 100 | 8.4 | Latvia | 14.669 | LAO | Republic of Latvia | Europe & Central Asia | |
Lebanon | 99 | 8.9 | Lebanon | 13.1262 | LVA | Lebanese Republic | Middle East & North Africa | |
Lesotho | 92 | 93.6 | Lesotho | 91.3852 | LBN | Kingdom of Lesotho | Sub-Saharan Africa | |
Liberia | 37 | 76.3 | Liberia | 113.9902 | LSO | Republic of Liberia | Sub-Saharan Africa | |
Libya | 100 | 14.5 | Libya | 6.2694 | LBR | Socialist People's Libyan Arab Jamahiriya | Middle East & North Africa | |
Lithuania | 100 | 5.3 | Lithuania | 12.8092 | LIE | Republic of Lithuania | Europe & Central Asia | |
Luxembourg | _ | 2 | Luxembourg | 6.5708 | LTU | Grand Duchy of Luxembourg | Europe & Central Asia | |
Madagascar | 64 | 53.4 | Madagascar | 120.168 | MKD | Republic of Madagascar | Sub-Saharan Africa | |
Malawi | 70 | 71.3 | Malawi | 138.595 | MDG | Republic of Malawi | Sub-Saharan Africa | |
Malaysia | 98 | 7.5 | Malaysia | 13.0802 | MWI | Malaysia | East Asia & Pacific | |
Maldives | 99 | 9.9 | Maldives | 8.338 | MYS | Republic of Maldives | South Asia | |
Mali | 39 | 122.7 | Mali | 177.1464 | MDV | Republic of Mali | Sub-Saharan Africa | |
Malta | 99 | 6.6 | Malta | 17.3048 | MLI | Republic of Malta | Middle East & North Africa | |
Mauritania | 48 | 90.2 | Mauritania | 80.8598 | MHL | Islamic Republic of Mauritania | Sub-Saharan Africa | |
Mauritius | 99 | 14.3 | Mauritius | 28.8782 | MRT | Republic of Mauritius | Sub-Saharan Africa | |
Mexico | 99 | 14.5 | Mexico | 64.7146 | MUS | United Mexican States | Latin America & Caribbean | |
Micronesia | _ | 37 | Micronesia, Fed. Sts. | 17.1252 | MEX | Federated States of Micronesia | East Asia & Pacific | |
Moldova | 100 | 16.4 | Moldova | 24.444 | FSM | Republic of Moldova | Europe & Central Asia | |
Mongolia | 99 | 24.7 | Mongolia | 17.6874 | MCO | Mongolia | East Asia & Pacific | |
Montenegro | 99 | 5.3 | Montenegro | 12.897 | MNG | Montenegro | Europe & Central Asia | |
Morocco | 74 | 29.7 | Morocco | 32.7784 | MNE | Kingdom of Morocco | Middle East & North Africa | |
Mozambique | 57 | 85.6 | Mozambique | 148.1392 | MAR | Republic of Mozambique | Sub-Saharan Africa | |
Myanmar | 96 | 53.5 | Myanmar | 17.1758 | MOZ | Republic of the Union of Myanmar | East Asia & Pacific | |
Namibia | 91 | 47.7 | Namibia | 78.5882 | MMR | Republic of Namibia | Sub-Saharan Africa | |
Nepal | 77 | 39 | Nepal | 73.7654 | NAM | Nepal | South Asia | |
Netherlands | _ | 4 | Netherlands | 4.2934 | NPL | Kingdom of the Netherlands | Europe & Central Asia | |
New Zealand | _ | 5.9 | New Zealand | 24.6234 | NCL | New Zealand | East Asia & Pacific | |
Nicaragua | 89 | 23.5 | Nicaragua | 91.2078 | NZL | Republic of Nicaragua | Latin America & Caribbean | |
Niger | 15 | 104.1 | Niger | 206.045 | NIC | Republic of Niger | Sub-Saharan Africa | |
Nigeria | 58 | 116.6 | Nigeria | 114.468 | NER | Federal Republic of Nigeria | Sub-Saharan Africa | |
Norway | _ | 2.8 | Norway | 6.0244 | MNP | Kingdom of Norway | Europe & Central Asia | |
Oman | 98 | 11.7 | Oman | 9.6078 | NOR | Sultanate of Oman | Middle East & North Africa | |
Pakistan | 63 | 85.6 | Pakistan | 39.99 | OMN | Islamic Republic of Pakistan | South Asia | |
Palau | 100 | 17.5 | Palau | PAK | Republic of Palau | East Asia & Pacific | ||
Panama | 97 | 18.1 | Panama | 76.9206 | PLW | Republic of Panama | Latin America & Caribbean | |
Papua New Guinea | 76 | 60.9 | Papua New Guinea | 56.07 | PAN | The Independent State of Papua New Guinea | East Asia & Pacific | |
Paraguay | 99 | 21.9 | Paraguay | 59.1124 | PNG | Republic of Paraguay | Latin America & Caribbean | |
Peru | 99 | 18.3 | Peru | 50.9086 | PRY | Republic of Peru | Latin America & Caribbean | |
Philippines | 98 | 29.6 | Philippines | 58.8826 | PER | Republic of the Philippines | East Asia & Pacific | |
Poland | 100 | 5.2 | Poland | 14.193 | PHL | Republic of Poland | Europe & Central Asia | |
Portugal | 99 | 3.8 | Portugal | 11.1172 | POL | Portuguese Republic | Europe & Central Asia | |
Qatar | 100 | 8.4 | Qatar | 11.2884 | PRI | State of Qatar | Middle East & North Africa | |
Romania | 99 | 12 | Romania | 36.206 | QAT | Romania | Europe & Central Asia | |
Russia | 100 | 10.4 | Russian Federation | 25.5276 | ROU | Russian Federation | Europe & Central Asia | |
Rwanda | 78 | 47.8 | Rwanda | 28.4676 | RUS | Republic of Rwanda | Sub-Saharan Africa | |
Samoa | 100 | 18.2 | Samoa | 26.9306 | RWA | Samoa | East Asia & Pacific | |
Sao Tom_ and Principe | 77 | 50.8 | Sao Tome and Principe | 86.88 | SMR | Democratic Republic of S�o Tom_ and Principe | Sub-Saharan Africa | |
Saudi Arabia | 99 | 15.5 | Saudi Arabia | 10.06 | STP | Kingdom of Saudi Arabia | Middle East & North Africa | |
Senegal | 59 | 52.5 | Senegal | 83.6376 | SAU | Republic of Senegal | Sub-Saharan Africa | |
Serbia | 99 | 6.9 | Serbia | 19.9722 | SEN | Republic of Serbia | Europe & Central Asia | |
Seychelles | 99 | 14 | Seychelles | 58.9794 | SRB | Republic of Seychelles | Sub-Saharan Africa | |
Sierra Leone | 54 | 133.4 | Sierra Leone | 122.4688 | SYC | Republic of Sierra Leone | Sub-Saharan Africa | |
Singapore | 100 | 2.8 | Singapore | 3.8712 | SLE | Republic of Singapore | East Asia & Pacific | |
Slovak Republic | _ | 7.7 | Slovak Republic | 20.8706 | SXM | Slovak Republic | Europe & Central Asia | |
Slovenia | 100 | 2.8 | Slovenia | 4.2084 | SVK | Republic of Slovenia | Europe & Central Asia | |
Solomon Islands | _ | 29.9 | Solomon Islands | 51.5598 | SVN | Solomon Islands | East Asia & Pacific | |
Somalia | _ | 146.1 | Somalia | 107.7876 | SLB | Somali Democratic Republic | Sub-Saharan Africa | |
South Africa | 99 | 43.4 | South Africa | 48.7214 | SOM | Republic of South Africa | Sub-Saharan Africa | |
South Sudan | _ | 99.2 | South Sudan | 73.1924 | ZAF | Republic of South Sudan | Sub-Saharan Africa | |
Spain | 100 | 4.3 | Spain | 8.733 | SSD | Kingdom of Spain | Europe & Central Asia | |
Sri Lanka | 99 | 10.2 | Sri Lanka | 16.569 | ESP | Democratic Socialist Republic of Sri Lanka | South Asia | |
Sudan | 85 | 74.2 | Sudan | 79.994 | VCT | Republic of the Sudan | Sub-Saharan Africa | |
Suriname | 99 | 22.6 | Suriname | 47.2984 | SDN | Republic of Suriname | Latin America & Caribbean | |
Swaziland | 95 | 67.6 | Swaziland | 79.9952 | SUR | Kingdom of Swaziland | Sub-Saharan Africa | |
Sweden | _ | 3 | Sweden | 5.541 | SWZ | Kingdom of Sweden | Europe & Central Asia | |
Switzerland | _ | 4.2 | Switzerland | 3.2754 | SWE | Switzerland | Europe & Central Asia | |
Syrian Arab Republic | 94 | 15.3 | Syrian Arab Republic | 41.1662 | CHE | Syrian Arab Republic | Middle East & North Africa | |
Tajikistan | 100 | 47.8 | Tajikistan | 38.9126 | TWN | Republic of Tajikistan | Europe & Central Asia | |
Thailand | 97 | 13.1 | Thailand | 44.6664 | TZA | Kingdom of Thailand | East Asia & Pacific | |
Timor-Leste | 79 | 56.5 | Timor-Leste | 49.964 | THA | Democratic Republic of Timor-Leste | East Asia & Pacific | |
Togo | 73 | 83.3 | Togo | 91.8462 | TLS | Republic of Togo | Sub-Saharan Africa | |
Tonga | 100 | 17.3 | Tonga | 16.0212 | TGO | Kingdom of Tonga | East Asia & Pacific | |
Trinidad and Tobago | 100 | 21.5 | Trinidad and Tobago | 33.4818 | TON | Republic of Trinidad and Tobago | Latin America & Caribbean | |
Tunisia | 96 | 15.2 | Tunisia | 6.7884 | TTO | Republic of Tunisia | Middle East & North Africa | |
Turkey | 98 | 15.4 | Turkey | 30.021 | TUN | Republic of Turkey | Europe & Central Asia | |
Turkmenistan | 100 | 54.7 | Turkmenistan | 17.3494 | TUR | Turkmenistan | Europe & Central Asia | |
Uganda | 85 | 60.3 | Uganda | 120.7472 | TUV | Republic of Uganda | Sub-Saharan Africa | |
Ukraine | 100 | 10 | Ukraine | 26.419 | UGA | Ukraine | Europe & Central Asia | |
United Arab Emirates | 97 | 7.4 | United Arab Emirates | 28.4394 | UKR | United Arab Emirates | Middle East & North Africa | |
United Kingdom | _ | 4.6 | United Kingdom | 16.7186 | ARE | United Kingdom of Great Britain and Northern Ireland | Europe & Central Asia | |
United States | _ | 6.9 | United States | 27.0666 | GBR | United States of America | North America | |
Uruguay | 99 | 11.1 | Uruguay | 57.2492 | USA | Oriental Republic of Uruguay | Latin America & Caribbean | |
Uzbekistan | 100 | 41.8 | Uzbekistan | 18.0354 | URY | Republic of Uzbekistan | Europe & Central Asia | |
Vanuatu | 95 | 28.4 | Vanuatu | 44.1226 | UZB | Republic of Vanuatu | East Asia & Pacific | |
Venezuela | 99 | 15.7 | Venezuela, RB | 80.2826 | VUT | Rep�blica Bolivariana de Venezuela | Latin America & Caribbean | |
Vietnam | 97 | 22.9 | Vietnam | 37.0902 | VEN | Socialist Republic of Vietnam | East Asia & Pacific | |
Yemen | 78 | 46 | Yemen, Rep. | 63.7318 | WBG | Republic of Yemen | Middle East & North Africa | |
Zambia | 58 | 70.2 | Zambia | 98.1738 | YEM | Republic of Zambia | Sub-Saharan Africa | |
Zimbabwe | 92 | 74.5 | Zimbabwe | 111.8664 | ZMB | Republic of Zimbabwe | Sub-Saharan Africa |
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
// For use with scroller_template.html and mfreeman_scroller.js. | |
// function to move a selection to the front/top, from | |
// https://gist.github.com/trtg/3922684 | |
d3.selection.prototype.moveToFront = function() { | |
return this.each(function(){ | |
this.parentNode.appendChild(this); | |
}); | |
}; | |
// Settings object | |
var settings = { | |
// could be used to save settings for styling things. | |
} | |
var data = []; // make this global | |
function focus_country(country) { | |
console.log("in focus", country); | |
// unfocus all, then focus one if given a name. | |
d3.selectAll("circle").classed("focused", false); | |
d3.selectAll("circle").classed("unfocused", false); | |
if (country) { | |
var country = country.replace(/\s/g, '_'); | |
d3.selectAll("circle").classed("unfocused",true); | |
var dots = d3.select("#" + country ); | |
dots.classed("unfocused",false).classed("focused", true); | |
var dotsgroup = d3.select("#" + country); | |
dots.moveToFront(); | |
} | |
} | |
/*function focus_region(region) { | |
console.log("in focus", region); | |
// unfocus all, then focus one if given a name. | |
d3.selectAll("g").classed("focused", false); | |
if (region) { | |
var region = region | |
var dots = d3.selectAll("#" + region); | |
dots.classed("focused", true); | |
var dotsgroup = d3.selectAll("#" + region); | |
dots.moveToFront(); | |
} | |
}*/ | |
function draw_label(yValue){ | |
drawylabel.text(yValue); | |
} | |
// ******* Change the showX and showY function for some cases ******** | |
var update = function(value) { | |
var country = null; | |
var localdata = getData(data); | |
//var region = null; | |
switch(value) { | |
case 1: | |
console.log("in case",value,country); | |
localdata = getData(data); | |
country = "Afghanistan"; | |
yValue = "Under Five Mortality Rate"; | |
//region: null; | |
break; | |
case 2: | |
console.log("in case",country); | |
//yScale = d3.scale.sqrt().range([margin.top, height - margin.bottom]); | |
localdata = getData(data); | |
country = "Angola"; | |
yValue = "Under Five Mortality Rate"; | |
//region = "Sub-Saharan Africa" | |
break; | |
case 3: | |
console.log("in case",value,country,"10 lowest"); | |
country = null; | |
localdata = getData(data).sort(function(a,b){ | |
return a.youthLiteracyRate - b.youthLiteracyRate; | |
}).slice(0,10); | |
console.log(localdata); | |
yValue = "Under Five Mortality Rate"; | |
//region: null; | |
break; | |
case 4: | |
console.log("in case",value,country,"10 hightest"); | |
country = null; | |
localdata = getData(data).sort(function(a,b){ | |
return b.youthLiteracyRate - a.youthLiteracyRate; | |
}).slice(0,10); | |
console.log(localdata); | |
yValue = "Under Five Mortality Rate"; | |
//region: null; | |
break; | |
case 5: | |
console.log("in case", value); | |
localdata = getData(data); | |
console.log(localdata); | |
yValue = "Under Five Mortality Rate"; | |
//region: null; | |
break; | |
case 6: | |
console.log("in case ", value); | |
localdata = getData2(data); | |
console.log(localdata); | |
yValue = "Adolescent Fertility Rate"; | |
//region: null; | |
break; | |
default: | |
country = null; | |
yValue = "Under Five Mortality Rate"; | |
focus_country(country); | |
draw_circles(getData(data)); | |
//region: null; | |
break; | |
} | |
focus_country(country); // this applies a highlight on a country. | |
draw_circles(localdata); // we can update the data if we want in the cases. | |
draw_label(yValue); | |
//focus_region(region); | |
} | |
// setup scroll functionality | |
function display(error, mydata) { | |
if (error) { | |
console.log(error); | |
} else { | |
data = mydata; // assign to global; call func in line_chart_refactor.js | |
console.log(data); | |
var scroll = scroller() | |
.container(d3.select('#graphic')); | |
// pass in .step selection as the steps | |
scroll(d3.selectAll('.step')); | |
// Pass the update function to the scroll object | |
scroll.update(update) | |
} | |
} | |
queue() | |
.defer(d3.csv, "data.csv") | |
.await(display); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment