jowang0319 · November 16, 2015 02:27
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!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>
diff --git a/mfreeman_scroller.js b/mfreeman_scroller.js

 /**
 * 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;
 }


diff --git a/scatter.css b/scatter.css
 .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;
 }
diff --git a/scatter.js b/scatter.js

 //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);


 }
























diff --git a/scroller.js b/scroller.js

 // 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);
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
	<!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>

	/**
	* 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;
	}
	.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;
	}

	//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);


	}

	// 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);