Created
November 16, 2015 02:27
-
-
Save jowang0319/1102030211d75175d820 to your computer and use it in GitHub Desktop.
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 | |
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 | 26.9306 | RWA | Samoa | East Asia & Pacific | |||
Sao Tom_ and Principe | 77 | 86.88 | SMR | Democratic Republic of S�o Tom_ and Principe | Sub-Saharan Africa | |||
Saudi Arabia | 99 | 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 |
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">Child Deaths</div> | |
Under 5 mortality rates across the world. | |
</section> | |
<section class="step"> | |
<!-- case 1 --> | |
<div class="title">More text here</div> | |
Say something else here because this section seems to get triggered too soon. Bug? | |
</section> | |
<section class="step"> | |
<!-- case 2 --> | |
<div class="title">Look at Nigeria for Some Reason</div> | |
Something interesting to highlight, label, color. | |
</section> | |
<section class="step"> | |
<!-- case 3 --> | |
<div class="title">And here's Bosnia and Herzegovina</div> | |
It doesn't seem to have as much data. | |
</section> | |
<section class="step"> | |
<!-- case 4--> | |
<div class="title">These are Disasters</div> | |
Here are Rwanda and Haiti. One is genocide, one is a natural disaster. Guess which is which? | |
</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 { | |
font-family: sans-serif; | |
font-size: 11px; | |
} | |
circle{ | |
fill-opacity: 40%; | |
} | |
circle.unfocused{ | |
fill-opacity: 40%; | |
} | |
circle.focused { | |
fill: orange; | |
} |
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 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); | |
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) | |
.attr("y", margin.bottom / 3) | |
.attr("dy", "1em") | |
.style("text-anchor", "end") | |
.attr("class", "label") | |
.text("Year");*/ | |
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("Under 5 Mortality Rate");*/ | |
function draw_circles(data){ | |
console.log(data); | |
xScale.domain([ | |
d3.min(data,function(d){ | |
return +d.youthLiteracyRate; | |
}) - 2, | |
d3.max(data,function(d){ | |
return +d.youthLiteracyRate; | |
}) | |
]); | |
yScale.domain([ | |
d3.min(data,function(d){ | |
return + d.under5Mortality; | |
}) - 2, | |
d3.max(data,function(d){ | |
return + d.under5Mortality; | |
}) | |
]); | |
var circles = svg.selectAll("circle") | |
.data(data,function(d){return d.country;}) | |
circles | |
.enter() | |
.append("circle") | |
.attr("class","dots") | |
.attr("r", 0) | |
.attr("opacity",0) | |
.attr("id",function(d){ | |
return d.country; | |
}); | |
/*.attr("fill",function(d){ | |
if (d.country === "World"){ | |
return "rgba(255,0,153,0.5)"; | |
} else { | |
return "rgba(0,153,255,0.5)"; | |
} | |
})*/ | |
circles.transition().duration(1000).attr("cx", function(d) { | |
return xScale(+d.youthLiteracyRate); | |
}) | |
.attr("cy", function(d) { | |
return yScale(+d.under5Mortality); | |
}) | |
.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); | |
} | |
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); | |
if (country) { | |
var country = country.replace(/\s/g, '_'); | |
var dots = d3.select("#" + country ); | |
dots.classed("focused", true); | |
var lineGroup = d3.select("g.lines#" + country); | |
dots.moveToFront(); | |
} | |
} | |
// ******* Change the showX and showY function for some cases ******** | |
var update = function(value) { | |
var country = null; | |
var localdata = data; | |
switch(value) { | |
case 1: | |
console.log("in case", value); | |
localdata = data; | |
//yScale = d3.scale.linear().range([margin.top, height - margin.bottom]); | |
break; | |
case 2: | |
console.log("in case 2",country); | |
//yScale = d3.scale.sqrt().range([margin.top, height - margin.bottom]); | |
localdata = data; | |
country = "Iraq"; | |
break; | |
case 3: | |
console.log("in case 3",country); | |
//yScale = d3.scale.sqrt().range([margin.top, height - margin.bottom]); | |
localdata = data; | |
country = "Niger"; | |
break; | |
case 4: | |
console.log("in case 4",country,"10 lowest"); | |
country = null; | |
localdata = data.sort(function(a,b){ | |
return a.youthLiteracyRate - b.youthLiteracyRate; | |
}).slice(0,10); | |
console.log(localdata); | |
break; | |
default: | |
country = null; | |
focus_country(country); | |
draw_circles(data); | |
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. | |
} | |
// 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