lmelgar · November 16, 2015 17:16
diff --git a/index.html b/index.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 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">What's this one?</div>
          Something interesting to highlight, label, color.
      </section>
      <section class="step">
        <!-- case 3 -->
        <div class="title">Maybe Another One.</div>
        Check out this highlight. Make sure to undo the previous one.
      </section>
      <section class="step">
        <!-- case 4-->
        <div class="title">Maybe Yet Another.</div>
        Check out this highlight. Make sure to undo the previous one.
      </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.js"></script>
 <script src="scroller_settings.js"></script>
 </body>
 </html>
diff --git a/infantmort.csv b/infantmort.csv
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: 0.7px;
  stroke-opacity: 70%;
 }

 .line.normal {
  stroke: gray;
 }

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

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


 // setup the vis - borrowed and adapted from Halina's code

    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.linear()
    .range([margin.top, height - margin.bottom]);

    //Configure axis generators
    var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(5)
    .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);

    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 draw_lines(data) {

    var years = d3.keys(data[0]).slice(2, 14); //
    console.log(years);

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

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

        var infantMort = [];

        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.

                infantMort.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,
                    Region: d.Region
                });
            }

        });
        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: infantMort // we just built this from the current index.
        });

    });

    //Uncomment to log the original data to the console
    //console.log(data);

    //Uncomment to log the newly restructured dataset to the console
    console.log("dataset",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
    ]);


    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/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
 // Settings object

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

 var settings = {
  // could be used to save settings for styling things.
 }

 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);
        line.moveToFront();
    }
 }

 // ******* Change the showX and showY function for some cases ********
 var update = function(value) {
  var country = null;
  switch(value) {
    case 0:
      console.log("in case", value);
      country = null;
    case 1:
      console.log("in case", value);
      break;
    case 2:
      console.log("in case 2");
      data = data.filter(function (d)
          {return Region = "Sub-Saharan Africa";
      });
      break;
    case 3:
      console.log("in case 3");
      country = "Angola";
      break;
    case 4:
      console.log("in case 4");
      country = "Spain";
      break;
    default:
      country = null;
      focus_country(country);
      break;
  }
  focus_country(country); // this applies a highlight on a country.
 }
 // setup scroll functionality

 var data = []; // make this global

 function display(error, mydata) {
  if (error) {
    console.log(error);
  } else {
    console.log(data);
    data = mydata; // assign to global

    draw_lines(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, "infantmort.csv")
  .await(display);
	<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 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">What's this one?</div>
	Something interesting to highlight, label, color.
	</section>
	<section class="step">
	<!-- case 3 -->
	<div class="title">Maybe Another One.</div>
	Check out this highlight. Make sure to undo the previous one.
	</section>
	<section class="step">
	<!-- case 4-->
	<div class="title">Maybe Yet Another.</div>
	Check out this highlight. Make sure to undo the previous one.
	</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.js"></script>
	<script src="scroller_settings.js"></script>
	</body>
	</html>
Country	Region	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012	2013
Afghanistan	South Asia	130.6	134.1	126	117.8	116.8	116	114.6	110.5	108.5	108.4	104.6	103.2	99.3	97.4
Albania	Europe & Central Asia	26	25	23.9	23	22.1	21.3	20.2	19.3	18.2	17.3	16.3	15.8	15.4	14.7
Algeria	Middle East & North Africa	40	39.8	39.1	40.1	34.5	32.8	31.3	29.8	28.7	27.6	26.5	26	25.4	24.9
Andorra	Europe & Central Asia	4.3	4.4	4.6	4.6	4.8	4.8	3.1	3.1	3.1	3	3	2.9	2.9	2.8
Angola	Sub-Saharan Africa	208.9	211.2	210.9	204.2	199.3	197.4	195.1	191	187	183.6	177.7	174.3	171.1	165.9
Antigua and Barbuda	Latin America & Caribbean	15.6	14.7	14.4	13.3	12.8	12.5	12.1	11.4	10.9	10.9	10.2	10.2	9.6	9.5
Argentina	Latin America & Caribbean	20.2	19.8	19.3	18.5	18	17.1	16.4	15.8	15.3	14.9	14.4	14.1	13.7	13.5
Armenia	Europe & Central Asia	30.7	28.9	27.2	25.7	24.3	23.1	21.9	20.9	19.9	18.8	18	17.2	16.5	15.9
Australia	East Asia & Pacific	6.3	6	6	6	5.8	5.6	5.7	5.3	5.2	4.8	4.7	4.5	4.3	4
Austria	Europe & Central Asia	5.9	5.5	5.5	5.2	5	4.9	4.8	4.6	4.6	4.6	4.5	4.1	4	3.9
Azerbaijan	Europe & Central Asia	76.9	70.8	65.3	60	55.1	51.4	47.8	44.9	42.2	40.1	38	36.5	35.1	33.7
Bahamas	Latin America & Caribbean	16.2	16	15.9	15.6	15.6	15.1	15.2	14.7	14.4	13.9	13.5	13.3	13.2	12.7
Bahrain	Middle East & North Africa	13.2	12.3	12.1	11.8	11.6	11.3	10.4	10	9.4	8.6	7.8	7.2	6.7	6.1
Bangladesh	South Asia	86.8	82.3	78	74.6	73.6	70.1	64.9	58.1	55.4	52.2	49.2	46.6	43.3	40.6
Barbados	Latin America & Caribbean	16.4	16.6	16.8	16.5	16.2	16	15.7	15.5	15.1	15	14.7	14.8	14.4	14.3
Belarus	Europe & Central Asia	14.2	12.9	11.6	10.7	9.9	9.3	8.4	7.8	7.1	6.3	6	5.4	5.2	4.9
Belgium	Europe & Central Asia	5.8	5.6	5.4	5.2	5	4.9	4.9	4.7	4.5	4.7	4.4	4.4	4.4	4.4
Belize	Latin America & Caribbean	25	24.2	23.4	22.9	22.3	21.6	20.9	20.3	19.8	18.9	18.2	17.8	17.2	16.7
Benin	Sub-Saharan Africa	148.3	148.9	135.2	128	120.4	115.1	109.6	105.6	102.9	99.2	95.1	91.1	86.5	84.2
Bhutan	South Asia	80	77.2	70.4	66.2	62.2	58.3	54.7	51.2	47.8	44.9	42.4	40	37.8	35.9
Bolivia	Latin America & Caribbean	77.3	72.9	68.1	64.2	60.1	56.7	53.5	50.8	48.2	45.9	44	41.9	40.2	38.6
Bosnia and Herzegovina	Europe & Central Asia	9.1	8.5	8.2	8.4	8.6	8.5	8.7	8.8	8.6	8.2	7.8	7.1	6.9	6.5
Botswana	Sub-Saharan Africa	91.8	87.5	86.6	82.5	72.7	63.8	58.9	57.7	57	55	52.3	50.3	47	46.5
Brazil	Latin America & Caribbean	32.5	30.4	28.4	26.4	24.6	22.9	21.6	20	18.7	17.5	16.6	15.4	14.4	13.6
Brunei Darussalam	East Asia & Pacific	9.3	9.1	9.1	9.1	9	8.6	8.7	9	9.2	9.3	9.7	9.6	9.9	10.1
Bulgaria	Europe & Central Asia	21.1	20.1	19.2	18.1	17	15.8	14.9	14.3	13.5	13.2	12.9	12.7	12	11.7
Burkina Faso	Sub-Saharan Africa	184.8	181.2	172	170.5	162.4	153.7	146.2	137	127.7	124	113.8	106.5	99.8	96.1
Burundi	Sub-Saharan Africa	153.3	149.2	134.7	127.7	120.9	114.5	108.5	102.9	97.7	93	89.1	85.7	82.7	80.1
Cabo Verde	Sub-Saharan Africa	35	31.3	29.6	28.1	27.7	27.7	27.8	28	28.2	28.2	27.7	27.4	26.7	25.8
Cambodia	East Asia & Pacific	116.9	104.9	89.3	77.3	68.2	61.4	56.3	52.1	48.6	46.8	43.6	41.2	38.7	37.2
Cameroon	Sub-Saharan Africa	152.8	151.8	136.4	131	126.7	122.4	118.7	114.7	110.7	107.4	102.6	99.4	96.3	93.3
Canada	North America	6.4	6.2	6.2	6.1	6.1	6.2	6	6	5.8	5.7	5.5	5.4	5.3	5.1
Central African Republic	Sub-Saharan Africa	177.6	175.4	170	167.6	171.1	166.6	160.9	159.6	158.6	154.5	151.4	151.4	141.3	136.1
Chad	Sub-Saharan Africa	178.3	180.3	179.1	176.7	176.1	173.2	168.2	165.6	163.2	159.5	156.4	152.3	147.7	143.6
Chile	Latin America & Caribbean	11.1	10.4	9.8	9.6	9.3	9.1	9	8.9	8.7	8.7	8.6	8.7	8.4	8.1
China	East Asia & Pacific	37	34.3	31.2	28.6	26	23.7	21.4	19.8	18.4	16.8	15.7	14.6	13.3	12.6
Colombia	Latin America & Caribbean	25.3	24.5	23.7	22.8	22.4	21.7	21.1	20.5	19.7	19	18.4	18.1	17.4	16.9
Comoros	Sub-Saharan Africa	97	97.3	97.4	97.4	96.5	95.1	93.3	91.3	89.2	86.8	84.2	81.6	79.2	76.8
Congo	Sub-Saharan Africa	116.4	116.2	114.8	111.7	105.2	89.5	83.2	76.6	68.8	63.3	58.7	54.7	51.1	47.9
Cook Islands	East Asia & Pacific	17	15.3	15.9	13.9	14.3	14.4	11.4	11.3	11	10.5	10.7	10.5	7.9	8.3
Costa Rica	Latin America & Caribbean	13.1	12.3	11.7	11	10.6	10.4	10.5	10.4	10.3	10	10.2	10.2	9.8	9.7
Croatia	Europe & Central Asia	8.3	8.1	7.7	7.7	7.5	7.1	6.6	6.1	5.8	5.5	5.1	4.8	4.8	4.5
Cuba	Latin America & Caribbean	8.1	7.9	7.8	7.4	7	6.7	6.6	6.4	6.4	6.7	7	7	6.6	6.4
Cyprus	Europe & Central Asia	6.6	6.2	5.8	5.7	5.2	4.8	4.7	4.4	4	3.8	3.9	3.7	3.6	3.6
Czech Republic	Europe & Central Asia	7	6.3	5.9	5.6	5.2	5	4.9	4.5	4.2	4.3	4	3.9	3.9	3.6
Cote d'Ivoire	Sub-Saharan Africa	140.8	140.4	139.1	136.3	132.4	126.8	122.3	119.1	115.6	111.3	107.8	104.6	100.1	96.5
Democratic Republic of the Congo	Sub-Saharan Africa	169.1	169.1	174	163	166.4	154.5	141.4	135	129.3	125.1	121.8	129	119.4	115.7
Denmark	Europe & Central Asia	5.7	5.6	5.5	5.2	5	4.9	4.9	4.6	4.2	4.1	3.8	3.6	3.6	3.4
Djibouti	Middle East & North Africa	105.2	99.9	96.1	90.1	87.4	92.8	83.4	81.6	81.6	76.6	74.5	73.1	84.7	68.8
Dominica	Latin America & Caribbean	16.5	15.9	15.5	15.6	15.3	14	13.7	13.3	12.9	12.6	12.3	12.3	11.3	11.2
Dominican Republic	Latin America & Caribbean	41.1	39.7	38.4	37.4	36.2	35.1	34.4	33.3	32.3	31.7	30.7	30	29.2	28.2
Ecuador	Latin America & Caribbean	33.9	32.6	31.6	30.3	29.3	28.5	27.8	27	26.4	25.6	24.6	23.8	23	22.4
Egypt	Middle East & North Africa	43.6	40.7	37.5	34.5	32.1	29.9	28.1	26.9	25.2	23.9	22.9	22.4	22	21.5
El Salvador	Latin America & Caribbean	32.6	30.9	29.1	27.7	25.9	24.3	22.4	20.7	19.4	18.2	17.4	16.7	16	15.5
Equatorial Guinea	Sub-Saharan Africa	141.7	135.2	132.1	128.1	124.3	123	115.3	113	111.3	108	101.9	101	101.2	94.1
Eritrea	Sub-Saharan Africa	100.8	80.7	75.9	72.7	67.6	65.1	64.8	61.8	59	57.9	55.1	53	52.8	49.3
Estonia	Europe & Central Asia	10.8	10.1	9.2	8.4	7.9	7.2	6.7	5.9	5.4	5	4.5	4	3.7	3.5
Ethiopia	Sub-Saharan Africa	138.9	131	129.7	124.5	117.4	108.7	103.4	91	86.3	82.1	74.9	69.1	66.1	63.3
Fiji	East Asia & Pacific	25	23.9	24.3	23.9	23	22.8	23.2	22.9	23.1	23.4	23.4	23.9	23.8	23.8
Finland	Europe & Central Asia	4.4	4.3	4.1	4	3.8	3.7	3.5	3.4	3.2	3.2	3	2.8	2.7	2.7
France	Europe & Central Asia	5.3	5.4	5.1	5	4.7	4.6	4.4	4.5	4.4	4.4	4.2	4.3	4.3	4.3
Gabon	Sub-Saharan Africa	82.4	84.5	80.8	81	76.9	73	71.8	69.7	66.5	64.3	62	59.5	56.9	54.9
Gambia	Sub-Saharan Africa	115.2	109.7	105.3	102.2	97	93.9	91.2	88.1	84.7	81.9	79.2	76.8	73.8	71.2
Georgia	Europe & Central Asia	36.4	33.9	31.2	28.7	26.3	24.2	22.2	20.5	18.8	17.5	16.1	15	14	13.3
Germany	Europe & Central Asia	5.4	5.3	5.2	5	4.9	4.8	4.6	4.7	4.4	4.3	4.2	4.1	4	3.8
Ghana	Sub-Saharan Africa	101.7	96.5	93.5	86.3	85.3	84.7	84.5	83.8	83.5	83	82.4	80.5	79.1	77.8
Greece	Europe & Central Asia	7.7	7.5	6.8	6.5	5.9	5.4	5.2	5	4.7	4.9	4.5	4.5	4.5	4.5
Grenada	Latin America & Caribbean	15.8	15.1	15.1	15	14.5	14.4	14.2	13.6	13.3	12.9	12.6	12.6	12.3	11.9
Guatemala	Latin America & Caribbean	50.5	48.2	46.4	44.5	42.6	41	39.6	38	36.7	35.5	34.4	33.2	32	30.8
Guinea	Sub-Saharan Africa	189.6	177.6	158.6	150.4	136.3	132.1	128.6	122.3	118.4	115.1	109.2	106.3	103.3	99
Guinea-Bissau	Sub-Saharan Africa	181.9	169.1	166.3	178.7	171.1	151.8	147.4	142.4	139.6	136.3	131.7	128.6	125.7	120.7
Guyana	Latin America & Caribbean	50.7	49.6	48.6	47.6	46.9	46.2	44.8	43.9	43.2	42.1	41.1	39.9	38.4	37.8
Haiti	Latin America & Caribbean	103.3	100.3	97.4	94.6	91.8	89.1	86.9	84.8	82.6	80.5	180.1	76.4	74.6	72.5
Honduras	Latin America & Caribbean	38.3	36.7	34.9	33.4	31.8	30.5	29.4	28.2	26.9	25.8	24.8	23.7	22.9	22
Hungary	Europe & Central Asia	11.4	10.8	10	9.3	8.7	8.2	8	7.5	7	6.8	6.7	6.5	6.2	6.2
Iceland	Europe & Central Asia	4	3.9	3.4	3.2	3.3	3	2.9	2.8	2.7	2.5	2.3	2.2	2.3	2.2
India	South Asia	89.4	86.8	82.8	80	76.9	72.7	71	67.7	65.3	63.2	59.6	57	54.1	51.8
Indonesia	East Asia & Pacific	52.6	49.9	46.4	44.4	43.1	42.4	41.1	36.7	35.3	34.2	33.8	32	30.7	29.7
Iran	Middle East & North Africa	35	32.8	30.9	29	26.9	25.3	23.8	22.4	20.9	19.7	19	17.9	17.3	16.6
Iraq	Middle East & North Africa	43.8	43.1	42.5	41.6	41.2	40	39.5	38.4	37.8	37.6	36.4	35.3	34.5	33.6
Ireland	Europe & Central Asia	7.1	6.9	6.5	5.9	5.5	5.2	4.8	4.5	4.2	4.1	4.1	4	3.9	3.8
Israel	Middle East & North Africa	6.8	6.5	6.3	6.2	5.9	5.7	5.3	5.1	4.8	4.7	4.5	4.4	4.4	4.1
Italy	Europe & Central Asia	5.5	5.2	4.9	4.8	4.5	4.3	4.3	4.3	4.1	4.2	3.9	3.8	3.6	3.5
Jamaica	Latin America & Caribbean	23.8	23.5	23.4	22.9	22.5	21.9	20.9	20.1	19.3	18.7	17.8	17.6	17	16.6
Japan	East Asia & Pacific	4.5	4.3	4	4	3.9	3.7	3.6	3.5	3.4	3.3	3.1	3.5	3.1	2.9
Jordan	Middle East & North Africa	27.2	26.4	26	24.9	24.3	23.6	22.9	22	21.4	20.8	19.9	19.6	18.9	18.6
Kazakhstan	Europe & Central Asia	44.3	41.3	38.7	36.1	33.9	31.6	29.8	27.6	25.3	23.1	21.1	19.4	17.7	16.2
Kenya	Sub-Saharan Africa	107.8	105.3	102.7	99.4	96.9	94.4	91.5	88.2	84.6	81.6	78	74.8	72.3	70
Kiribati	East Asia & Pacific	71.3	70	68.6	68.3	67.3	66.7	66.5	65.2	64.1	63.5	62	60.6	59.2	57.3
Kuwait	Middle East & North Africa	12.6	12.4	12.3	12	11.8	11.7	11.5	11.5	11.1	10.9	10.6	10.1	9.7	9.4
Kyrgyzstan	Europe & Central Asia	49.6	47.4	45.2	43.3	41.3	39.6	37.8	36	33.7	31.9	29.8	27.5	25.7	23.8
Laos	East Asia & Pacific	117.4	110.7	107.6	109.5	108	99.5	92	91.7	78.9	76.8	75.3	75	72.9	71.2
Latvia	Europe & Central Asia	17.6	15.9	15.1	14	13.1	12.3	11.6	10.8	10.5	9.9	9.5	9	8.6	8.3
Lebanon	Middle East & North Africa	19.9	19	17.9	17.5	15.5	14.7	14.5	12.9	11.9	11.3	10.5	9.9	9.5	8.8
Lesotho	Sub-Saharan Africa	113.7	116.7	120.1	123.3	125.3	126.3	124.8	120.4	116.2	111.3	107.4	100.5	97.8	95.9
Liberia	Sub-Saharan Africa	190.6	161.7	143.3	132.2	123.4	110.9	104.4	97.8	91	85.9	101.3	82.5	74.2	70.3
Libya	Middle East & North Africa	28.6	27.5	26.4	25.4	24.2	22.8	21.3	20.1	18.7	17.6	16.6	16	15.4	14.5
Lithuania	Europe & Central Asia	12.1	11.7	11	10.5	10.4	9.9	9.4	8.7	8	7.3	6.5	5.8	5.4	4.9
Luxembourg	Europe & Central Asia	4.7	4.6	4.4	4	3.7	3.5	3.4	3.1	2.8	2.8	2.4	2.4	2.2	2
Macedonia	Europe & Central Asia	11.9	11.2	10	8.7	7.3	6.5	16.4	15.4	14.7	14.3	13.9	13.7	13	12.4
Madagascar	Sub-Saharan Africa	111.8	102.6	97.6	103.9	91.1	79.5	75.2	71.4	67.3	64.3	62.1	59.3	57.3	54.8
Malawi	Sub-Saharan Africa	174	162.4	151.2	140	129	119.5	108.7	100.2	92.3	84.8	81.2	74.8	69.9	67.7
Malaysia	East Asia & Pacific	10	9.4	8.8	8.4	8.2	8.3	8.3	8.1	8.4	8.4	8.5	8.5	8.4	8.3
Maldives	South Asia	43.6	39	35.8	30	26.2	23.2	20.3	17.9	15.5	14	12.8	11.7	10.6	9.7
Mali	Sub-Saharan Africa	210.6	212.9	191.7	183.5	175.6	165	157.6	150.4	142.7	141.8	134.8	127.8	121	118.3
Malta	Middle East & North Africa	7.9	7.6	7.3	7.3	7.1	7.2	7	6.7	6.5	6.4	6.3	6.2	6	6.1
Marshall Islands	East Asia & Pacific	39.3	39.8	40.1	41	39.5	39.5	39.7	39.8	39.5	39.2	39.1	39.2	38.5	38.3
Mauritania	Sub-Saharan Africa	110.6	111	109.5	112.7	114.8	104.3	103.4	102.2	100.4	99	98.4	95.2	91	88.
Mauritius	Sub-Saharan Africa	19.1	17.4	16.3	15.6	15.5	15.6	16	16.1	16.2	15.8	15.7	15.3	14.8	14.
Mexico	Latin America & Caribbean	25.6	24	22.6	21.7	20.7	19.4	18.9	18.3	17.9	17.4	16.9	16	15.3	14.6
Micronesia	East Asia & Pacific	52.5	51.9	51	49.8	48.1	47	45.8	44.8	43.1	41.5	40.5	38.9	37.5	36.4
Moldova	Europe & Central Asia	30.7	28.5	26.3	25	23.3	21.7	20.8	19.7	18.6	17.6	17	16.5	15.9	15.7
Monaco	Europe & Central Asia	3.7	3.5	3.2	6	5.9	2.9	3.5	4.4	6	8	7.7	5.3	3.3	2.3
Mongolia	East Asia & Pacific	65	61.2	57.4	53	49.5	45.8	42.6	40.1	37.7	35.7	34.3	33.3	32.3	31.6
Montenegro	Europe & Central Asia	13.9	13.3	12.5	11.9	10.9	10.4	9.6	8.9	8	7.6	6.6	6	5.6	5.3
Morocco	Middle East & North Africa	51	48.6	46.6	44.6	42.7	41	39.3	37.8	36.4	34.9	33.4	32	30.6	29.5
Mozambique	Sub-Saharan Africa	162.7	154	146.9	141.9	136.2	133.6	121	115.6	110.7	105.5	103.2	97.6	89.8	86.3
Myanmar	East Asia & Pacific	77.9	80.5	74.5	71.4	71.7	66.4	64.7	63.6	58.4	56.4	54.3	54.5	52.4	50
Namibia	Sub-Saharan Africa	75.9	77.4	78.7	78.5	76.9	73.1	68.4	64.9	62	60.3	56.1	52.1	49.5	49.5
Nauru		40.2	40.8	41	40.2	39.7	39.4	40.2	41.4	42.2	37.6	38.9	39.2	40.2	34.2
Nepal	South Asia	79.5	77.5	70.4	74.7	70.8	58.7	53.9	52	51.1	48.4	46.5	45.7	45.7	39.9
Netherlands	Europe & Central Asia	6.1	6.1	6	5.7	5.6	5.4	5.2	5.2	5.1	4.6	4.4	4.4	4.3	4.1
New Zealand	East Asia & Pacific	7.4	7.2	7.1	6.7	6.8	6.5	6.6	6.4	6.3	6.2	6.4	6.5	6.3	6.2
Nicaragua	Latin America & Caribbean	40.9	38.6	36.6	35.1	33.3	31.7	30.3	29.1	27.9	26.7	25.8	25.1	24.2	23.4
Niger	Sub-Saharan Africa	213.4	229	207.9	207.3	200.3	165.1	155.9	146.5	137.3	127	119	111.4	105.1	99.7
Nigeria	Sub-Saharan Africa	201.4	190	170.8	177.7	160.2	163.2	147.3	140.5	137	131	127.8	123.9	117.8	113.7
Niue		32	30.4	30.2	30.5	28.5	29.5	29.5	33.2	37	40.1	43.5	45.3	47.6	45.3
North Korea	East Asia & Pacific	61.5	52.9	45.3	38.9	34.8	33	32.5	32.8	32.9	32.7	31.9	30.4	28.6	27.1
Norway	Europe & Central Asia	4.9	4.6	4.5	4.4	4.1	4.1	3.9	3.7	3.6	3.4	3.1	3	2.8	2.8
Oman	Middle East & North Africa	16.3	15.4	14.7	13.9	13.1	12.7	12.5	12	11.6	11.5	11.2	11.2	11	11
Pakistan	South Asia	108.8	108.3	107	106	103.3	100.9	97.6	95.1	91.7	89.4	89.3	87.8	85.8	84.4
Palau	East Asia & Pacific	26.4	26	26.4	23.4	24	20.8	21.8	20.9	20.3	19.6	21.9	17.5	20	18.6
Panama	Latin America & Caribbean	25.8	25.4	24.7	24.1	23.4	22.8	22.2	21.7	20.9	20.5	19.9	19.2	18.5	17.7
Papua New Guinea	East Asia & Pacific	76.2	77.7	78.7	76.3	74.2	73.1	71	70	68.7	67.3	65.6	64.3	62.7	60.9
Paraguay	Latin America & Caribbean	33.2	32.1	31.2	30.1	29.1	28.2	27.5	26.5	25.7	25.1	23.9	23.3	22.6	21.7
Peru	Latin America & Caribbean	39.9	36.7	34.2	31.6	29.4	27.5	25.6	23.9	22.2	20.7	19.5	18.3	17.5	16.6
Philippines	East Asia & Pacific	39.4	38.5	37.9	37.1	36.3	35.4	34.8	34.2	33.6	33	32.6	31.6	30.4	29.6
Poland	Europe & Central Asia	9.7	8.9	8.5	8.3	8	7.7	7.3	7	6.8	6.1	5.8	5.5	5.3	5.1
Portugal	Europe & Central Asia	7.1	6.6	6	5.6	5.1	4.8	4.3	4.2	4.2	4.1	4.1	3.8	3.8	3.8
Qatar	Middle East & North Africa	12.3	11.8	11.5	11.2	10.8	10.6	10.2	10	9.6	9.5	9.5	8.5	8.1	7.9
Romania	Europe & Central Asia	25.9	25.4	24.7	23.4	22.5	20.9	19.5	17.7	16.4	14.7	13.8	13	12.5	12
Russia	Europe & Central Asia	22.8	21.5	20.2	19.1	17.7	16.6	15.3	14.3	13.5	12.4	11.8	11	10.5	10.2
Rwanda	Sub-Saharan Africa	161.8	156.8	150.9	143.1	134	123	102.6	85.2	73.5	65.4	59.4	55.8	53.2	51.1
Samoa	East Asia & Pacific	21.7	21.1	20.6	20.1	19.4	19.3	19.2	18.9	18.6	18.5	18.4	18.5	18.4	18.2
San Marino	Europe & Central Asia	5.7	5.3	4.5	3.8	3.1	3	2.8	3.1	3.2	3.3	3.5	3.6	3.5	3.4
Sao Tome and Principe	Sub-Saharan Africa	86.1	82.8	79.1	74.9	71.2	67.7	65	62.2	59.3	57.5	55.5	54.2	52.6	51.2
Saudi Arabia	Middle East & North Africa	22.7	22	21.4	20.9	20.4	20	19.4	18.9	18.4	17.9	17.1	16.7	16.2	15.9
Senegal	Sub-Saharan Africa	135.3	142.3	140.2	114.8	101.3	94	87.6	81	75.2	70.4	65.3	60.5	56.9	54.2
Serbia	Europe & Central Asia	12.9	12.5	11.5	10.6	9.6	8.9	8.3	8.1	8	7.9	7.5	7.4	7.1	6.8
Seychelles	Sub-Saharan Africa	14	14.5	14.4	14.4	14.3	14.1	14.3	14.5	14.1	14	14.3	14.5	14.4	13.9
Sierra Leone	Sub-Saharan Africa	240.6	223.1	216.7	211.5	197.5	193.7	189.7	184.7	180.7	175.2	174	186.8	167.4	159.7
Singapore	East Asia & Pacific							4.5	4.1	6.6	6.2	5.8	5.7	5.6	5.5
Slovakia	Europe & Central Asia	8.5	8.3	7.9	7.8	7.5	7.1	12.2	11.5	11.1	10.8	10.1	9.6	9.4	8.9
Slovenia	Europe & Central Asia	3.7	3.4	3.4	3.3	2.9	2.9	5.5	5.2	5	4.8	4.7	4.3	4.1	3.8
Solomon Islands	East Asia & Pacific	33.7	33.2	32.4	31.7	31	30.1	34.1	34.4	34.5	34.6	35	35	34.8	34.3
Somalia	Sub-Saharan Africa	152	164	144	164.5	148.3	140.3	183.1	180	164.7	163.4	172.9	172.4	169.9	156.3
South Africa	Sub-Saharan Africa	68.3	63.1	55.4	47.8	45.2	44.6	75.1	77.6	79.9	80.2	79.8	78.4	75.9	71.9
South Korea	East Asia & Pacific	6.4	6.6	6.8	6.8	6.1	5.7	5.4	4.7	4.6	4.2	4	4	3.9	3.6
South Sudan	Sub-Saharan Africa	114.5	110	106.1	103.2	101	95.5	175.2	168.3	160.3	152.7	140.9	131.7	125.2	119.7
Spain	Europe & Central Asia	5	4.8	4.5	4.5	4.4	4.2	6.5	6.2	6.2	5.9	5.8	5.6	5.4	5.1
Sri Lanka	South Asia	11.7	11	10.5	10.2	9.9	9.4	16.4	15.4	14.8	14.5	13.9	13.5	12.8	12.2
St. Kitts and Nevis	Latin America & Caribbean	17	16.2	15.8	15	14.4	13.6	13.2	13	12.6	11.3	11	11.1	10.2	10.2
St. Lucia	Latin America & Caribbean	18.2	17.9	17.5	17.4	17.2	17	17.1	16.8	16.1	16	15.7	15.4	15	14.4
St. Vincent and the Grenadines	Latin America & Caribbean	22.3	22.3	22.5	22.2	22.2	21.8	21.9	21.5	21.1	20.8	20.2	19.8	19.3	19.2
Sudan	Sub-Saharan Africa	84.5	82.8	81.8	80.7	80	75.2	105.3	104.2	102.6	100.1	93.8	89.8	87.5	86
Suriname	Latin America & Caribbean	27.1	26.2	25.5	24.5	23.7	22.6	34.4	33.5	32.1	31.7	30.6	29.8	29	28
Swaziland	Sub-Saharan Africa	113.3	105.9	92	85.5	80.4	79.1	123.9	127	129.1	130.2	129.6	127.8	122.6	116.8
Sweden	Europe & Central Asia	3.1	3.2	3	2.9	2.9	2.9	4.5	4.3	4.1	3.8	3.4	3.6	3.3	3.2
Switzerland	Europe & Central Asia	4.7	4.5	4.4	4.3	4.2	4.2	5.7	5.7	5.6	5.4	5.4	5.3	5	4.8
Syria	Middle East & North Africa	16.4	15.8	15	14.8	14.9	14.5	22.9	22.1	21.3	20.4	19.6	8.8	18.1	17.1
Tajikistan	Europe & Central Asia	55.3	52.9	50.9	49.6	48.1	46.6	92.6	86.6	80.5	74.9	69.9	65.2	61.1	57.7
Tanzania	Sub-Saharan Africa	69.2	64.5	59.5	55.8	52.8	50.9	129.4	120.1	110.6	101.8	94	86.8	80.3	75
Thailand	East Asia & Pacific	15.6	15.1	14.8	14.1	13.8	13.2	22.7	21.7	20.7	19.6	18.8	17.9	17.2	16.6
Timor-Leste	East Asia & Pacific	66.2	62.5	59.8	57.7	55.8	54	103.9	99.9	95.6	91.1	86.7	81.8	75.7	70.5
Togo	Sub-Saharan Africa	96.5	93.4	91.1	88	85.4	82.6	121.9	117.6	110.4	108.4	106.2	102.9	101.2	98.
Tonga	East Asia & Pacific	14.3	13.9	13.5	13	12.7	12	17.8	17.6	17	16.5	15.8	15.4	14.9	14.5
Trinidad and Tobago	Latin America & Caribbean	24.8	24	23.4	22.5	21.9	21.3	28.6	28.6	28.1	27.4	27.1	26.5	26	25.5
Tunisia	Middle East & North Africa	19	17.9	17.1	16.3	15.6	15.1	31.1	29.1	27.3	25.4	24.1	22.7	21.1	20
Turkey	Europe & Central Asia	25.7	24.3	23.2	21.7	20.4	19.3	41.1	39	36.6	34.5	32.7	30.8	29.2	27.1
Turkmenistan	Europe & Central Asia	65.1	63.6	62.1	59.8	57.4	55.4	85.7	81.6	78	74.5	71.8	69.4	68.2	66.5
Tuvalu	East Asia & Pacific	34	34.6	34.9	29.9	29.9	29.5	42.2	39.8	41.2	39.8	38.5	35.9	37.2	33.5
Uganda	Sub-Saharan Africa	86.8	81.6	76.6	72.3	67.2	64.8	148.3	140.3	137.7	127.2	111.4	104.3	98.1	92.3
Ukraine	Europe & Central Asia	12.6	11.9	11.6	10.8	10.5	10	18.8	17.7	16.7	15.8	14.9	14.4	13.6	13.1
United Arab Emirates	Middle East & North Africa	8.9	8.7	8.4	8.5	8.5	8.2	11.3	11	10.7	10.3	9.9	9.6	9.4	9.1
United Kingdom	Europe & Central Asia	5.4	5.2	5.2	5	5	4.7	6.7	6.5	6.4	6.3	6.1	6	6	5.7
United States of America	North America	7.6	7.6	7.3	7	7	6.9	8.5	8.5	8.2	8.1	8.1	7.8	7.9	7.7
Uruguay	Latin America & Caribbean	13.1	12.5	12.3	11.9	11.6	11.1		16.9	16.5	15.8	15.5	14.8	14.2	13.8
Uzbekistan	Europe & Central Asia	51.4	49.7	47.7	46.4	45.3	44.1	42.9	66.1	63.7	61.4	59.4	57.3	55.1	53.3
Vanuatu	East Asia & Pacific	19.5	18.9	18.5	17.9	17.6	17.2	16.9	23	22.4	21.9	21.8	22	20.9	20.3
Venezuela	Latin America & Caribbean	17.2	16.7	16.2	16.1	15.7	15.3	14.9	21.4	20.6	20.2	19.8	19	18.4	17.7
Viet Nam	East Asia & Pacific	27.5	26.7	28	26.5	25.1	24.5	23.9	39	36.1	34.6	31.4	29.5	28.3	28.3
Yemen	Middle East & North Africa	66.3	63.5	61	57.9	55.6	53.1	50.4	99.4	91.1	85.8	83.9	81.1	75.2	72.4
Zambia	Sub-Saharan Africa	112.8	107.5	103	102.9	95.7	87.4	84.2	169.5	160.5	154.1	141.4	131.7	124.6	118.4
Zimbabwe	Sub-Saharan Africa	94	94.6	94.8	93.6	91.4	85.5	86.6	100.2	100.8	99.9	98.1	97	96.4	95.3
	.axis path,
	.axis line {
	fill: none;
	stroke: none;
	shape-rendering: crispEdges;
	}

	path.line {
	fill: none;
	stroke-width: 0.7px;
	stroke-opacity: 70%;
	}

	.line.normal {
	stroke: gray;
	}

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

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


	// setup the vis - borrowed and adapted from Halina's code

	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.linear()
	.range([margin.top, height - margin.bottom]);

	//Configure axis generators
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5)
	.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);

	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 draw_lines(data) {

	var years = d3.keys(data[0]).slice(2, 14); //
	console.log(years);

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

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

	var infantMort = [];

	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.

	infantMort.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,
	Region: d.Region
	});
	}

	});
	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: infantMort // we just built this from the current index.
	});

	});

	//Uncomment to log the original data to the console
	//console.log(data);

	//Uncomment to log the newly restructured dataset to the console
	console.log("dataset",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
	]);


	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;
	}
	// Settings object

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

	var settings = {
	// could be used to save settings for styling things.
	}

	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);
	line.moveToFront();
	}
	}

	// ***** Change the showX and showY function for some cases ******
	var update = function(value) {
	var country = null;
	switch(value) {
	case 0:
	console.log("in case", value);
	country = null;
	case 1:
	console.log("in case", value);
	break;
	case 2:
	console.log("in case 2");
	data = data.filter(function (d)
	{return Region = "Sub-Saharan Africa";
	});
	break;
	case 3:
	console.log("in case 3");
	country = "Angola";
	break;
	case 4:
	console.log("in case 4");
	country = "Spain";
	break;
	default:
	country = null;
	focus_country(country);
	break;
	}
	focus_country(country); // this applies a highlight on a country.
	}
	// setup scroll functionality

	var data = []; // make this global

	function display(error, mydata) {
	if (error) {
	console.log(error);
	} else {
	console.log(data);
	data = mydata; // assign to global

	draw_lines(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, "infantmort.csv")
	.await(display);