DimsumPanda · November 18, 2015 02:39
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="line.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 Mortality</div>
        One of the Millenium Development Goals established in 2000 is to reduce child mortality across the world. In September 25, 2015 a set 17 Sustainable Development Goals (SDG) were adopted by the United Nations' world leaders and will continue to drive progress.
        (Source: <a href="http://www.undp.org/content/undp/en/home/mdgoverview/post-2015-development-agenda.html">UNDP</a>)
      </section>
      <section class="step">
        <!-- case 1 -->
        <div class="title"> </div>
        The number of under-five deaths has declined from about 12.7 million in 1990 to around 5.9 million in 2015. (Source: UNICEF)
      </section>
      <section class="step">
        <!-- case 2 -->
        <div class="title">Some countries have low child mortality rates... </div>
          Luxembourg has the lowest Child Mortality Rate in 2015 with 1.9 child deaths per 1,000 live births.
      </section>
      <section class="step">
        <!-- case 3 -->
        <div class="title">...while other countries have much higher child mortality rates.</div>
        Angola has the highest Child Mortality Rate in 2015 with 156.9 child deaths per 1,000 live births.
      </section>
        <section class="step">
        <!-- case 4-->
        <div class="title">Sub-Saharan Africa</div>
        This region has the highest child mortality rates in the world. However, the annual rate of reduction has increased from 1.6 percent in 1990s to 4.1 percent in 2000-2015.
      </section>
      <section class="step">
        <!-- case 5-->
        <div class="title"></div>
        Sierra Leone has the highest cummulative child mortality rates from 1990-2015.
      </section>

      <section class="step">
        <!-- case 6-->
        <div class="title">How come some countries reduce their child mortality rates more than others?</div>
        Malawi has the highest rate of change from 1990 to 2015 among the countries in Sub-Saharan Africa. The country decreased its child mortality rates by 73.6%.

      </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="line_chart_refactor.js"></script>
 <script src="scroller_settings.js"></script>
 </body>
 </html>
diff --git a/line.css b/line.css
 .axis path,
 .axis line {
  fill: none;
  stroke: none;
  shape-rendering: crispEdges;
 }

 path.line {
  fill: none;
  stroke-width: 1px;
  stroke-opacity: 80%;
 }

 .line.normal {
  stroke: gray;
 }

 .line.unfocused{
  stroke-opacity: 40%;
 }

 .line.focused {
  stroke-width: 2px;
  stroke-opacity: 100%;
  stroke: orange;
 }
diff --git a/line_chart_refactor.js b/line_chart_refactor.js


 var margin = {
 top: 50,
 right: 10,
 bottom: 70,
 left: 70
 };

 var width = 600;
 var height = 500;

 //Set up date formatting and years
 var dateFormat = d3.time.format("%Y");

 //Set up scales
 var xScale = d3.time.scale()
 .range([margin.left, width - margin.right - margin.left]);

 var yScale = d3.scale.sqrt()
 .range([margin.top, height - margin.bottom]);

 //Configure axis generators
 var xAxis = d3.svg.axis()
 .scale(xScale)
 .orient("bottom")
 .ticks(15)
 .tickFormat(function (d) {
    return dateFormat(d);
 })
 .innerTickSize(0);

 var yAxis = d3.svg.axis()
 .scale(yScale)
 .orient("left")
 .innerTickSize(0);

 //Configure line generator
 // each line dataset must have a d.year and a d.rate for this to work.
 var line = d3.svg.line()
 .x(function (d) {
    return xScale(dateFormat.parse(d.year));
 })
 .y(function (d) {
    return yScale(+d.rate);
 });


 //Create the empty SVG image
 var svg = d3.select("#vis")
 .append("svg")
 .attr("width", width)
 .attr("height", height);

 // Add axes

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

 var years = [];

 function make_data(rawdata) {

    years = d3.keys(rawdata[0]).slice(1, 65);
    console.log(years);

    //Create a new, empty array to hold our restructured dataset
    var dataset = [];

    //Loop once for each row in data
    rawdata.forEach(function (d, i) {

        var IMRs = [];

        years.forEach(function (y) { //Loop through all the years - and get the rates for this data element

            if (d[y]) { /// What we are checking is if the "y" value - the year string from our array, which would translate to a column in our csv file - is empty or not.

                IMRs.push({ //Add a new object to the new rates data array - for year, rate. These are OBJECTS that we are pushing onto the array
                    year: y,
                    rate: d[y], // this is the value for, for example, d["2004"]
                    Country: d.Country
                });
            }

        });
        dataset.push({ // At this point we are accessing one index of data from our original csv "data", above and we have created an array of year and rate data from this index. We then create a new object with the Country value from this index and the array that we have made from this index.
            country: d.Country,
            rates: IMRs // we just built this from the current index.
        });

    });

    return dataset;
 }

 function draw_lines(dataset) {

    console.log(dataset);

    //Set scale domains - max and min of the years
    xScale.domain(
        d3.extent(years, function (d) {
            return dateFormat.parse(d);
        }));

    // max of rates to 0 (reversed, remember)
    yScale.domain([
        d3.max(dataset, function (d) {
            return d3.max(d.rates, function (d) {
                return +d.rate;
            });
        }),
        0
    ]);

    //Make a group for each country
    var groups = svg.selectAll("g.lines")
        .data(dataset, function(d) {return d.country;}); // key value!

    groups
        .enter()
        .append("g")
        .attr("class", "lines")
        .attr("id", function (d) {
            return d.country.replace(/\s/g, '_');
        });

    groups.exit().transition().duration(1000).attr("opacity", 0).remove();

    //Within each group, create a new line/path,
    //binding just the rates data to each one
    var lines = groups.selectAll("path")
        .data(function (d) { // because there's a group with data already...
            return [d.rates]; // it has to be an array for the line function
        });

    lines
        .enter()
        .append("path")
        .attr("class", "line")
        .attr("d", line)
        .classed("normal", true)
        .classed("focused", false); // gives gray color

    lines.exit().transition().duration(1000).attr("opacity", 0).remove();

    svg.select('.x.axis').transition().duration(300).call(xAxis);

    // same for yAxis but with more transform and a title
    svg.select(".y.axis").transition().duration(300).call(yAxis);

 }






diff --git a/median-U5MRbyCountry.csv b/median-U5MRbyCountry.csv
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/scroller_settings.js b/scroller_settings.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("path.line").classed("focused", false);
    if (country) {
        var country = country.replace(/\s/g, '_');
        var line = d3.select("g.lines#" + country + " path.line");
        line.classed("focused", true);
        var lineGroup = d3.select("g.lines#" + country);
        lineGroup.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");
      //yScale = d3.scale.sqrt().range([margin.top, height - margin.bottom]);
      localdata = data;
      country = "Luxembourg";
      break;
    case 3:
      console.log("in case 3");
      //yScale = d3.scale.sqrt().range([margin.top, height - margin.bottom]);
      localdata = data;
      country = "Angola";
      break;
    case 4:
      console.log("in case 5");
      country = "Angola";
      localdata = data.filter(function(d) {return d.country == "Angola" || d.country == "Benin" || d.country == "Botswana" || d.country == "Burkina Faso" || d.country == "Burundi" || d.country == "Cabo Verde" || d.country == "Cameroon" || d.country == "Central African Republic" || d.country == "Chad" || d.country == "Comoros" || d.country == "Congo" || d.country == "Cote d'Ivoire" || d.country == "Democratic Republic of the Congo" || d.country == "Equatorial Guinea" || d.country == "Eritrea" || d.country == "Ethiopia" || d.country == "Gabon" || d.country == "Gambia" || d.country == "Ghana" || d.country == "Guinea" || d.country == "Guinea-Bissau" || d.country == "Kenya" || d.country == "Lesotho" || d.country == "Liberia" || d.country == "Madagascar" || d.country == "Malawi" || d.country == "Mali" || d.country == "Mauritania" || d.country == "Mauritius" || d.country == "Mozambique" || d.country == "Namibia" || d.country == "Nauru" || d.country == "Niger" || d.country == "Nigeria" || d.country == "Niue" || d.country == "Rwanda" || d.country == "Saint Kitts and Nevis" || d.country == "Saint Lucia" || d.country == "Saint Vincent and the Grenadines" || d.country == "Senegal" || d.country == "Seychelles" || d.country == "Sierra Leone" || d.country == "Somalia" || d.country == "South Africa" || d.country == "South Sudan" || d.country == "Sudan" || d.country == "Swaziland" || d.country == "Togo" || d.country == "Uganda" || d.country == "United Republic of Tanzania" || d.country == "Zambia" || d.country == "Zimbabwe";});
      break;
      
    case 5:
      console.log("in case 4");
      country = "Sierra Leone";
      localdata = data;
      break;
    case 6:
      console.log("in case 5");
      country = "Malawi";
      localdata = data.filter(function(d) {return d.country == "Angola" || d.country == "Benin" || d.country == "Botswana" || d.country == "Burkina Faso" || d.country == "Burundi" || d.country == "Cabo Verde" || d.country == "Cameroon" || d.country == "Central African Republic" || d.country == "Chad" || d.country == "Comoros" || d.country == "Congo" || d.country == "Cote d'Ivoire" || d.country == "Democratic Republic of the Congo" || d.country == "Equatorial Guinea" || d.country == "Eritrea" || d.country == "Ethiopia" || d.country == "Gabon" || d.country == "Gambia" || d.country == "Ghana" || d.country == "Guinea" || d.country == "Guinea-Bissau" || d.country == "Kenya" || d.country == "Lesotho" || d.country == "Liberia" || d.country == "Madagascar" || d.country == "Malawi" || d.country == "Mali" || d.country == "Mauritania" || d.country == "Mauritius" || d.country == "Mozambique" || d.country == "Namibia" || d.country == "Nauru" || d.country == "Niger" || d.country == "Nigeria" || d.country == "Niue" || d.country == "Rwanda" || d.country == "Saint Kitts and Nevis" || d.country == "Saint Lucia" || d.country == "Saint Vincent and the Grenadines" || d.country == "Senegal" || d.country == "Seychelles" || d.country == "Sierra Leone" || d.country == "Somalia" || d.country == "South Africa" || d.country == "South Sudan" || d.country == "Sudan" || d.country == "Swaziland" || d.country == "Togo" || d.country == "Uganda" || d.country == "United Republic of Tanzania" || d.country == "Zambia" || d.country == "Zimbabwe";});
      break;      
    default:
      country = null;
      focus_country(country);
      draw_lines(localdata);
      break;
  }
  focus_country(country); // this applies a highlight on a country.
  draw_lines(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 {
    console.log(data);

    data = make_data(mydata); // assign to global; call func in line_chart_refactor.js

    console.log("after makedata", 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, "median-U5MRbyCountry.csv")
  .await(display);

diff --git a/thumbnail.png b/thumbnail.png
	<!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="line.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 Mortality</div>
	One of the Millenium Development Goals established in 2000 is to reduce child mortality across the world. In September 25, 2015 a set 17 Sustainable Development Goals (SDG) were adopted by the United Nations' world leaders and will continue to drive progress.
	(Source: <a href="http://www.undp.org/content/undp/en/home/mdgoverview/post-2015-development-agenda.html">UNDP</a>)
	</section>
	<section class="step">
	<!-- case 1 -->
	<div class="title"> </div>
	The number of under-five deaths has declined from about 12.7 million in 1990 to around 5.9 million in 2015. (Source: UNICEF)
	</section>
	<section class="step">
	<!-- case 2 -->
	<div class="title">Some countries have low child mortality rates... </div>
	Luxembourg has the lowest Child Mortality Rate in 2015 with 1.9 child deaths per 1,000 live births.
	</section>
	<section class="step">
	<!-- case 3 -->
	<div class="title">...while other countries have much higher child mortality rates.</div>
	Angola has the highest Child Mortality Rate in 2015 with 156.9 child deaths per 1,000 live births.
	</section>
	<section class="step">
	<!-- case 4-->
	<div class="title">Sub-Saharan Africa</div>
	This region has the highest child mortality rates in the world. However, the annual rate of reduction has increased from 1.6 percent in 1990s to 4.1 percent in 2000-2015.
	</section>
	<section class="step">
	<!-- case 5-->
	<div class="title"></div>
	Sierra Leone has the highest cummulative child mortality rates from 1990-2015.
	</section>

	<section class="step">
	<!-- case 6-->
	<div class="title">How come some countries reduce their child mortality rates more than others?</div>
	Malawi has the highest rate of change from 1990 to 2015 among the countries in Sub-Saharan Africa. The country decreased its child mortality rates by 73.6%.

	</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="line_chart_refactor.js"></script>
	<script src="scroller_settings.js"></script>
	</body>
	</html>
	.axis path,
	.axis line {
	fill: none;
	stroke: none;
	shape-rendering: crispEdges;
	}

	path.line {
	fill: none;
	stroke-width: 1px;
	stroke-opacity: 80%;
	}

	.line.normal {
	stroke: gray;
	}

	.line.unfocused{
	stroke-opacity: 40%;
	}

	.line.focused {
	stroke-width: 2px;
	stroke-opacity: 100%;
	stroke: orange;
	}


	var margin = {
	top: 50,
	right: 10,
	bottom: 70,
	left: 70
	};

	var width = 600;
	var height = 500;

	//Set up date formatting and years
	var dateFormat = d3.time.format("%Y");

	//Set up scales
	var xScale = d3.time.scale()
	.range([margin.left, width - margin.right - margin.left]);

	var yScale = d3.scale.sqrt()
	.range([margin.top, height - margin.bottom]);

	//Configure axis generators
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(15)
	.tickFormat(function (d) {
	return dateFormat(d);
	})
	.innerTickSize(0);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.innerTickSize(0);

	//Configure line generator
	// each line dataset must have a d.year and a d.rate for this to work.
	var line = d3.svg.line()
	.x(function (d) {
	return xScale(dateFormat.parse(d.year));
	})
	.y(function (d) {
	return yScale(+d.rate);
	});


	//Create the empty SVG image
	var svg = d3.select("#vis")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	// Add axes

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

	var years = [];

	function make_data(rawdata) {

	years = d3.keys(rawdata[0]).slice(1, 65);
	console.log(years);

	//Create a new, empty array to hold our restructured dataset
	var dataset = [];

	//Loop once for each row in data
	rawdata.forEach(function (d, i) {

	var IMRs = [];

	years.forEach(function (y) { //Loop through all the years - and get the rates for this data element

	if (d[y]) { /// What we are checking is if the "y" value - the year string from our array, which would translate to a column in our csv file - is empty or not.

	IMRs.push({ //Add a new object to the new rates data array - for year, rate. These are OBJECTS that we are pushing onto the array
	year: y,
	rate: d[y], // this is the value for, for example, d["2004"]
	Country: d.Country
	});
	}

	});
	dataset.push({ // At this point we are accessing one index of data from our original csv "data", above and we have created an array of year and rate data from this index. We then create a new object with the Country value from this index and the array that we have made from this index.
	country: d.Country,
	rates: IMRs // we just built this from the current index.
	});

	});

	return dataset;
	}

	function draw_lines(dataset) {

	console.log(dataset);

	//Set scale domains - max and min of the years
	xScale.domain(
	d3.extent(years, function (d) {
	return dateFormat.parse(d);
	}));

	// max of rates to 0 (reversed, remember)
	yScale.domain([
	d3.max(dataset, function (d) {
	return d3.max(d.rates, function (d) {
	return +d.rate;
	});
	}),
	0
	]);

	//Make a group for each country
	var groups = svg.selectAll("g.lines")
	.data(dataset, function(d) {return d.country;}); // key value!

	groups
	.enter()
	.append("g")
	.attr("class", "lines")
	.attr("id", function (d) {
	return d.country.replace(/\s/g, '_');
	});

	groups.exit().transition().duration(1000).attr("opacity", 0).remove();

	//Within each group, create a new line/path,
	//binding just the rates data to each one
	var lines = groups.selectAll("path")
	.data(function (d) { // because there's a group with data already...
	return [d.rates]; // it has to be an array for the line function
	});

	lines
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", line)
	.classed("normal", true)
	.classed("focused", false); // gives gray color

	lines.exit().transition().duration(1000).attr("opacity", 0).remove();

	svg.select('.x.axis').transition().duration(300).call(xAxis);

	// same for yAxis but with more transform and a title
	svg.select(".y.axis").transition().duration(300).call(yAxis);

	}

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

	// 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("path.line").classed("focused", false);
	if (country) {
	var country = country.replace(/\s/g, '_');
	var line = d3.select("g.lines#" + country + " path.line");
	line.classed("focused", true);
	var lineGroup = d3.select("g.lines#" + country);
	lineGroup.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");
	//yScale = d3.scale.sqrt().range([margin.top, height - margin.bottom]);
	localdata = data;
	country = "Luxembourg";
	break;
	case 3:
	console.log("in case 3");
	//yScale = d3.scale.sqrt().range([margin.top, height - margin.bottom]);
	localdata = data;
	country = "Angola";
	break;
	case 4:
	console.log("in case 5");
	country = "Angola";
	localdata = data.filter(function(d) {return d.country == "Angola" \|\| d.country == "Benin" \|\| d.country == "Botswana" \|\| d.country == "Burkina Faso" \|\| d.country == "Burundi" \|\| d.country == "Cabo Verde" \|\| d.country == "Cameroon" \|\| d.country == "Central African Republic" \|\| d.country == "Chad" \|\| d.country == "Comoros" \|\| d.country == "Congo" \|\| d.country == "Cote d'Ivoire" \|\| d.country == "Democratic Republic of the Congo" \|\| d.country == "Equatorial Guinea" \|\| d.country == "Eritrea" \|\| d.country == "Ethiopia" \|\| d.country == "Gabon" \|\| d.country == "Gambia" \|\| d.country == "Ghana" \|\| d.country == "Guinea" \|\| d.country == "Guinea-Bissau" \|\| d.country == "Kenya" \|\| d.country == "Lesotho" \|\| d.country == "Liberia" \|\| d.country == "Madagascar" \|\| d.country == "Malawi" \|\| d.country == "Mali" \|\| d.country == "Mauritania" \|\| d.country == "Mauritius" \|\| d.country == "Mozambique" \|\| d.country == "Namibia" \|\| d.country == "Nauru" \|\| d.country == "Niger" \|\| d.country == "Nigeria" \|\| d.country == "Niue" \|\| d.country == "Rwanda" \|\| d.country == "Saint Kitts and Nevis" \|\| d.country == "Saint Lucia" \|\| d.country == "Saint Vincent and the Grenadines" \|\| d.country == "Senegal" \|\| d.country == "Seychelles" \|\| d.country == "Sierra Leone" \|\| d.country == "Somalia" \|\| d.country == "South Africa" \|\| d.country == "South Sudan" \|\| d.country == "Sudan" \|\| d.country == "Swaziland" \|\| d.country == "Togo" \|\| d.country == "Uganda" \|\| d.country == "United Republic of Tanzania" \|\| d.country == "Zambia" \|\| d.country == "Zimbabwe";});
	break;

	case 5:
	console.log("in case 4");
	country = "Sierra Leone";
	localdata = data;
	break;
	case 6:
	console.log("in case 5");
	country = "Malawi";
	localdata = data.filter(function(d) {return d.country == "Angola" \|\| d.country == "Benin" \|\| d.country == "Botswana" \|\| d.country == "Burkina Faso" \|\| d.country == "Burundi" \|\| d.country == "Cabo Verde" \|\| d.country == "Cameroon" \|\| d.country == "Central African Republic" \|\| d.country == "Chad" \|\| d.country == "Comoros" \|\| d.country == "Congo" \|\| d.country == "Cote d'Ivoire" \|\| d.country == "Democratic Republic of the Congo" \|\| d.country == "Equatorial Guinea" \|\| d.country == "Eritrea" \|\| d.country == "Ethiopia" \|\| d.country == "Gabon" \|\| d.country == "Gambia" \|\| d.country == "Ghana" \|\| d.country == "Guinea" \|\| d.country == "Guinea-Bissau" \|\| d.country == "Kenya" \|\| d.country == "Lesotho" \|\| d.country == "Liberia" \|\| d.country == "Madagascar" \|\| d.country == "Malawi" \|\| d.country == "Mali" \|\| d.country == "Mauritania" \|\| d.country == "Mauritius" \|\| d.country == "Mozambique" \|\| d.country == "Namibia" \|\| d.country == "Nauru" \|\| d.country == "Niger" \|\| d.country == "Nigeria" \|\| d.country == "Niue" \|\| d.country == "Rwanda" \|\| d.country == "Saint Kitts and Nevis" \|\| d.country == "Saint Lucia" \|\| d.country == "Saint Vincent and the Grenadines" \|\| d.country == "Senegal" \|\| d.country == "Seychelles" \|\| d.country == "Sierra Leone" \|\| d.country == "Somalia" \|\| d.country == "South Africa" \|\| d.country == "South Sudan" \|\| d.country == "Sudan" \|\| d.country == "Swaziland" \|\| d.country == "Togo" \|\| d.country == "Uganda" \|\| d.country == "United Republic of Tanzania" \|\| d.country == "Zambia" \|\| d.country == "Zimbabwe";});
	break;
	default:
	country = null;
	focus_country(country);
	draw_lines(localdata);
	break;
	}
	focus_country(country); // this applies a highlight on a country.
	draw_lines(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 {
	console.log(data);

	data = make_data(mydata); // assign to global; call func in line_chart_refactor.js

	console.log("after makedata", 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, "median-U5MRbyCountry.csv")
	.await(display);