DimsumPanda · November 30, 2015 21:26
diff --git a/highChildMortality1990.csv b/highChildMortality1990.csv
diff --git a/index.html b/index.html

 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

 <style>
 .container {
  width: 1200px;
 }

 h1 {
  font-size: 26px;
  padding: 0px 0 5px 0;
  line-height: 1.2em;
  color: #000;
  margin-bottom: 0px;
 }

 #lead {
  clear: both;
  width: 600px;
 }

 #lead p {
  color: #444;
  font-family: Georgia,Palatino,serif;
  font-size: 1.0em;
  line-height: 1.4em;
 }

 .chart {
  float: left;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top:0;
  padding-left:0;
 }

 svg {
  font-size: 9px;
 }

 .background {
  fill: none;
 }

 .area {
  fill: #99CCFF;
 }

 .line {
  fill: none;
  stroke: #334C80;
  stroke-width: 1.4px;
 }

 .title {
  font-size: 12px;
 }

 .axis line, .grid line {
  stroke-width: .5px;
  shape-rendering: crispEdges;
  stroke: none;
  opacity: 0.5;
  pointer-events: none;
 }

 .axis path {
  display: none;
 }

 .hidden {
  display:none;
  opacity: 0.0;
 }

 #button-wrap {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 5px;
 }

 .button {
  cursor: pointer;
  float: left;
  width: 100px;
  height: 30px;
  text-align: center;
  background: #fcfcfc;
  border: 1px solid #cecece;
  display: block;
  padding-top: 5px;
  margin-top: 10px;
  border-radius: 5px 5px 5px 5px;
 }

 .button.active {
  box-shadow: inset 0px 0px 7px rgba(0,0,0,0.18);
  pointer-events: none;
  background-color: #e6e6e6;
 }

 #count {
  border-radius: 5px 0px 0px 5px;
 }

 #name {
  border-radius: 0px 5px 5px 0px;
 }

 </style>

 </head>

 <body>

  <div class="container">
    <h1>Countries with the Highest Child Mortality Rates in Sub-Saharan Africa in 1990</h1>
    <div id="lead">
      <p>Although Niger had the highest child mortality rate in 1990, it has experienced the fifth steepest decline in child mortality in Sub-Saharan Africa from 1990 to 2015.</p>
      <p>Data Source: WHO.</p>

    </div>
    <div id="main">
      <div id="button-wrap">
        <div id="count1990" class="button active">Max in 1990</div>
        <div id="count2015" class="button">Max in 2015</div>
        <div id="rateOfChange" class="button">Rate of Change</div>
      </div>
      <div id="vis"></div>
    </div>
  </div> <!--! end of #container -->

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src="isotope.pkgd.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

  <script type="text/javascript">

  // Heavily simplified version of Jim Vallandingham's Coffee Script tutorial atThe National
  // https://flowingdata.com/2014/10/15/linked-small-multiples/

  var width = 200,
    height = 150,
    margin = {
      top: 15,
      right: 20,
      bottom: 40,
      left: 40
    };

  var data = [],
      circle = null,
      caption = null,
      curYear = null;

  var bisect = d3.bisector(function(d) {
    return d.date;
  }).left;

  var format = d3.time.format("%Y");
   var xScale = d3.time.scale().range([0, width]).clamp(true); //add clamp(true to remove extra space on the x-axis)
  var yScale = d3.scale.linear().range([height, 0]);

  var xValue = function(d) {
    return d.date;
  };
  var yValue = function(d) {
    return d.count;
  };

  var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(4)
    .outerTickSize(0)
    .tickSubdivide(1)
    .tickSize(-width);

  var area = d3.svg.area().x(function(d) {
    return xScale(xValue(d));
      }).y0(height).y1(function(d) {
      return yScale(yValue(d));
    });
  var line = d3.svg.line().x(function(d) {
      return xScale(xValue(d));
    }).y(function(d) {
      return yScale(yValue(d));
  });

  function setupScales(data) {
    var extentX, maxY;
    maxY = d3.max(data, function(c) {
      return d3.max(c.values, function(d) {
        return yValue(d);
      });
    });
    maxY = maxY + (maxY * 1 / 4);
    yScale.domain([0, maxY]);
    extentX = d3.extent(data[0].values, function(d) {
      return xValue(d);
    });
    return xScale.domain(extentX);
  }

  function transformData(rawData) {
    var format, nest;
    format = d3.time.format("%Y");
    rawData.forEach(function(d) {
      d.date = format.parse(d.year);
      d.count = +d["childMortality"];
    });
    nest = d3.nest().key(function(d) {
      return d.country;
    }).sortValues(function(a, b) {
      return d3.ascending(a.date, b.date);
    }).entries(rawData);
    nest = nest.filter(function(d) {return d.values.length == 26;});
    return nest;
  }

    // a jquery lib to do the small multiple sorting for us!
  function setupIsotope() {
    $("#vis").isotope({
      itemSelector: '.chart',
      layoutMode: 'fitRows',
      getSortData: {
        count1990: function(e) {
          var d, max;
          d = d3.select(e).datum();
          // Instead of using max function for 1990 and get the max in 2015 instead:
          // console.log(d.values[d.values.length-1]);
          // return d.values[d.values.length-1].count * -1;

          max = d3.max(d.values, function(d) {
            return d.count;
          });
          return max * -1;
        },
        count2015: function(e) {
          var d, max;
          d = d3.select(e).datum();
          // Instead of using max function for 1990 and get the max in 2015 instead:
          // console.log(d.values[d.values.length-1]);
          return d.values[d.values.length-1].count * -1;

          // max = d3.max(d.values, function(d) {
            // return d.count;
          // });
          // return max * -1;
        },
        rateOfChange: function(e) {
          var d;
          d = d3.select(e).datum();
          // console.log("calculate", d.values)
          return d.values[d.values.length-1];
        }
        // rateOfChange: function(e) {
        //   var d, changeRate;
        //   d = d3.select(e).datum();

        //   changeRate = funciton(d){
        //     var val;
        //     val = (d.values[25] - d.values[0])/(d.values[0]));
        //     return 
        //   })
        //   country: function(e) {
        //   var d, changeRate, sum;
        //   d = d3.select(e).datum();
        // changeRate = d3.max((d.values[25] - d.values[0]), function(d){
        //     return d.key;
        //   }
        //   });
        //   return changeRate;
        // }
      }
      });
      return $("#vis").isotope({
        sortBy: 'count1990'
      });
  }


  d3.csv("highChildMortality_reformat.csv", function(error, rawData) {

     if (error) {
      console.log(error);
    };

    var data = transformData(rawData);

    d3.select("#vis").datum(data).each(function(myData) {

      // now we draw for each array of the data.

      data = myData;
      setupScales(data);

      var div = d3.select(this).selectAll(".chart").data(data);

      div.enter()
        .append("div")
        .attr("class", "chart")
        .append("svg")
        .append("g");

      var svg = div.select("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);

      var g = svg.select("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      g.append("rect")
        .attr("class", "background")
        .style("pointer-events", "all")
        .attr("width", width + margin.right)
        .attr("height", height).on("mouseover", mouseover)
        .on("mousemove", mousemove)
        .on("mouseout", mouseout);

      var lines = g.append("g");
      lines.append("path")
        .attr("class", "area")
        .style("pointer-events", "none")
        .attr("d", function(c) {
          return area(c.values);
      });
      lines.append("path")
        .attr("class", "line")
        .style("pointer-events", "none")
        .attr("d", function(c) {
        return line(c.values);
      });

      lines.append("text")
        .attr("class", "title")
        .attr("text-anchor", "middle")
        .attr("y", height)
        .attr("dy", margin.bottom / 2 + 10)
        .attr("x", width / 2).text(function(c) {
          return c.key;
      });

      lines.append("text")
        .attr("class", "static_year")
        .attr("text-anchor", "start")
        .style("pointer-events", "none")
        .attr("dy", 26).attr("y", height)
        .attr("x", 0).text(function(c) {
          return xValue(c.values[0]).getFullYear();
      });
      lines.append("text")
      .attr("class", "static_year")
      .attr("text-anchor", "end")
      .style("pointer-events", "none").attr("dy", 26)
      .attr("y", height).attr("x", width).text(function(c) {
        return xValue(c.values[c.values.length - 1]).getFullYear();
      });

      circle = lines.append("circle")
        .attr("r", 2.2)
        .attr("opacity", 0)
        .style("pointer-events", "none");
      caption = lines.append("text")
        .attr("class", "caption")
        .attr("text-anchor", "middle")
        .style("pointer-events", "none")
        .attr("dy", -8);

      curYear = lines.append("text")
        .attr("class", "year")
        .attr("text-anchor", "middle")
        .style("pointer-events", "none")
        .attr("dy", 13)
        .attr("y", height);

      g.append("g").attr("class", "y axis").call(yAxis);

    }); // end of creating the chart for each data row

  console.log(data);
  console.log(circle);
  function mouseover() {
    circle.attr("opacity", 1.0);
    d3.selectAll(".static_year").classed("hidden", true);
    return mousemove.call(this);
  };
  function mousemove() {
    var date, index, year;
    year = xScale.invert(d3.mouse(this)[0]).getFullYear();
    date = format.parse('' + year);
    index = 0;
    circle.attr("cx", xScale(date)).attr("cy", function(c) {
      index = bisect(c.values, date, 0, c.values.length - 1);
      return yScale(yValue(c.values[index]));
    });
    caption.attr("x", xScale(date)).attr("y", function(c) {
      return yScale(yValue(c.values[index]));
    }).text(function(c) {
      return yValue(c.values[index]);
    });
    return curYear.attr("x", xScale(date)).text(year);
  };
  function mouseout() {
    d3.selectAll(".static_year").classed("hidden", false);
    circle.attr("opacity", 0);
    caption.text("");
    return curYear.text("");
  };

  setupIsotope();

    d3.select("#button-wrap").selectAll("div").on("click", function() {
      var id;
      id = d3.select(this).attr("id");
      d3.select("#button-wrap").selectAll("div").classed("active", false);
      d3.select("#" + id).classed("active", true);
      return $("#vis").isotope({
        sortBy: id
      });
  }); // end button setup

 }); // end of read tsv

 </script>

 </body>
 </html>
diff --git a/isotope.pkgd.min.js b/isotope.pkgd.min.js
 /*!
 * Isotope PACKAGED v2.0.1
 * Filter & sort magical layouts
 * http://isotope.metafizzy.co
 */

 (function(t){function e(){}function i(t){function i(e){e.prototype.option||(e.prototype.option=function(e){t.isPlainObject(e)&&(this.options=t.extend(!0,this.options,e))})}function n(e,i){t.fn[e]=function(n){if("string"==typeof n){for(var s=o.call(arguments,1),a=0,u=this.length;u>a;a++){var p=this[a],h=t.data(p,e);if(h)if(t.isFunction(h[n])&&"_"!==n.charAt(0)){var f=h[n].apply(h,s);if(void 0!==f)return f}else r("no such method '"+n+"' for "+e+" instance");else r("cannot call methods on "+e+" prior to initialization; "+"attempted to call '"+n+"'")}return this}return this.each(function(){var o=t.data(this,e);o?(o.option(n),o._init()):(o=new i(this,n),t.data(this,e,o))})}}if(t){var r="undefined"==typeof console?e:function(t){console.error(t)};return t.bridget=function(t,e){i(e),n(t,e)},t.bridget}}var o=Array.prototype.slice;"function"==typeof define&&define.amd?define("jquery-bridget/jquery.bridget",["jquery"],i):i(t.jQuery)})(window),function(t){function e(e){var i=t.event;return i.target=i.target||i.srcElement||e,i}var i=document.documentElement,o=function(){};i.addEventListener?o=function(t,e,i){t.addEventListener(e,i,!1)}:i.attachEvent&&(o=function(t,i,o){t[i+o]=o.handleEvent?function(){var i=e(t);o.handleEvent.call(o,i)}:function(){var i=e(t);o.call(t,i)},t.attachEvent("on"+i,t[i+o])});var n=function(){};i.removeEventListener?n=function(t,e,i){t.removeEventListener(e,i,!1)}:i.detachEvent&&(n=function(t,e,i){t.detachEvent("on"+e,t[e+i]);try{delete t[e+i]}catch(o){t[e+i]=void 0}});var r={bind:o,unbind:n};"function"==typeof define&&define.amd?define("eventie/eventie",r):"object"==typeof exports?module.exports=r:t.eventie=r}(this),function(t){function e(t){"function"==typeof t&&(e.isReady?t():r.push(t))}function i(t){var i="readystatechange"===t.type&&"complete"!==n.readyState;if(!e.isReady&&!i){e.isReady=!0;for(var o=0,s=r.length;s>o;o++){var a=r[o];a()}}}function o(o){return o.bind(n,"DOMContentLoaded",i),o.bind(n,"readystatechange",i),o.bind(t,"load",i),e}var n=t.document,r=[];e.isReady=!1,"function"==typeof define&&define.amd?(e.isReady="function"==typeof requirejs,define("doc-ready/doc-ready",["eventie/eventie"],o)):t.docReady=o(t.eventie)}(this),function(){function t(){}function e(t,e){for(var i=t.length;i--;)if(t[i].listener===e)return i;return-1}function i(t){return function(){return this[t].apply(this,arguments)}}var o=t.prototype,n=this,r=n.EventEmitter;o.getListeners=function(t){var e,i,o=this._getEvents();if(t instanceof RegExp){e={};for(i in o)o.hasOwnProperty(i)&&t.test(i)&&(e[i]=o[i])}else e=o[t]||(o[t]=[]);return e},o.flattenListeners=function(t){var e,i=[];for(e=0;t.length>e;e+=1)i.push(t[e].listener);return i},o.getListenersAsObject=function(t){var e,i=this.getListeners(t);return i instanceof Array&&(e={},e[t]=i),e||i},o.addListener=function(t,i){var o,n=this.getListenersAsObject(t),r="object"==typeof i;for(o in n)n.hasOwnProperty(o)&&-1===e(n[o],i)&&n[o].push(r?i:{listener:i,once:!1});return this},o.on=i("addListener"),o.addOnceListener=function(t,e){return this.addListener(t,{listener:e,once:!0})},o.once=i("addOnceListener"),o.defineEvent=function(t){return this.getListeners(t),this},o.defineEvents=function(t){for(var e=0;t.length>e;e+=1)this.defineEvent(t[e]);return this},o.removeListener=function(t,i){var o,n,r=this.getListenersAsObject(t);for(n in r)r.hasOwnProperty(n)&&(o=e(r[n],i),-1!==o&&r[n].splice(o,1));return this},o.off=i("removeListener"),o.addListeners=function(t,e){return this.manipulateListeners(!1,t,e)},o.removeListeners=function(t,e){return this.manipulateListeners(!0,t,e)},o.manipulateListeners=function(t,e,i){var o,n,r=t?this.removeListener:this.addListener,s=t?this.removeListeners:this.addListeners;if("object"!=typeof e||e instanceof RegExp)for(o=i.length;o--;)r.call(this,e,i[o]);else for(o in e)e.hasOwnProperty(o)&&(n=e[o])&&("function"==typeof n?r.call(this,o,n):s.call(this,o,n));return this},o.removeEvent=function(t){var e,i=typeof t,o=this._getEvents();if("string"===i)delete o[t];else if(t instanceof RegExp)for(e in o)o.hasOwnProperty(e)&&t.test(e)&&delete o[e];else delete this._events;return this},o.removeAllListeners=i("removeEvent"),o.emitEvent=function(t,e){var i,o,n,r,s=this.getListenersAsObject(t);for(n in s)if(s.hasOwnProperty(n))for(o=s[n].length;o--;)i=s[n][o],i.once===!0&&this.removeListener(t,i.listener),r=i.listener.apply(this,e||[]),r===this._getOnceReturnValue()&&this.removeListener(t,i.listener);return this},o.trigger=i("emitEvent"),o.emit=function(t){var e=Array.prototype.slice.call(arguments,1);return this.emitEvent(t,e)},o.setOnceReturnValue=function(t){return this._onceReturnValue=t,this},o._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},o._getEvents=function(){return this._events||(this._events={})},t.noConflict=function(){return n.EventEmitter=r,t},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return t}):"object"==typeof module&&module.exports?module.exports=t:this.EventEmitter=t}.call(this),function(t){function e(t){if(t){if("string"==typeof o[t])return t;t=t.charAt(0).toUpperCase()+t.slice(1);for(var e,n=0,r=i.length;r>n;n++)if(e=i[n]+t,"string"==typeof o[e])return e}}var i="Webkit Moz ms Ms O".split(" "),o=document.documentElement.style;"function"==typeof define&&define.amd?define("get-style-property/get-style-property",[],function(){return e}):"object"==typeof exports?module.exports=e:t.getStyleProperty=e}(window),function(t){function e(t){var e=parseFloat(t),i=-1===t.indexOf("%")&&!isNaN(e);return i&&e}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0,i=s.length;i>e;e++){var o=s[e];t[o]=0}return t}function o(t){function o(t){if("string"==typeof t&&(t=document.querySelector(t)),t&&"object"==typeof t&&t.nodeType){var o=r(t);if("none"===o.display)return i();var n={};n.width=t.offsetWidth,n.height=t.offsetHeight;for(var h=n.isBorderBox=!(!p||!o[p]||"border-box"!==o[p]),f=0,d=s.length;d>f;f++){var l=s[f],c=o[l];c=a(t,c);var y=parseFloat(c);n[l]=isNaN(y)?0:y}var m=n.paddingLeft+n.paddingRight,g=n.paddingTop+n.paddingBottom,v=n.marginLeft+n.marginRight,_=n.marginTop+n.marginBottom,I=n.borderLeftWidth+n.borderRightWidth,L=n.borderTopWidth+n.borderBottomWidth,z=h&&u,S=e(o.width);S!==!1&&(n.width=S+(z?0:m+I));var b=e(o.height);return b!==!1&&(n.height=b+(z?0:g+L)),n.innerWidth=n.width-(m+I),n.innerHeight=n.height-(g+L),n.outerWidth=n.width+v,n.outerHeight=n.height+_,n}}function a(t,e){if(n||-1===e.indexOf("%"))return e;var i=t.style,o=i.left,r=t.runtimeStyle,s=r&&r.left;return s&&(r.left=t.currentStyle.left),i.left=e,e=i.pixelLeft,i.left=o,s&&(r.left=s),e}var u,p=t("boxSizing");return function(){if(p){var t=document.createElement("div");t.style.width="200px",t.style.padding="1px 2px 3px 4px",t.style.borderStyle="solid",t.style.borderWidth="1px 2px 3px 4px",t.style[p]="border-box";var i=document.body||document.documentElement;i.appendChild(t);var o=r(t);u=200===e(o.width),i.removeChild(t)}}(),o}var n=t.getComputedStyle,r=n?function(t){return n(t,null)}:function(t){return t.currentStyle},s=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"];"function"==typeof define&&define.amd?define("get-size/get-size",["get-style-property/get-style-property"],o):"object"==typeof exports?module.exports=o(require("get-style-property")):t.getSize=o(t.getStyleProperty)}(window),function(t,e){function i(t,e){return t[a](e)}function o(t){if(!t.parentNode){var e=document.createDocumentFragment();e.appendChild(t)}}function n(t,e){o(t);for(var i=t.parentNode.querySelectorAll(e),n=0,r=i.length;r>n;n++)if(i[n]===t)return!0;return!1}function r(t,e){return o(t),i(t,e)}var s,a=function(){if(e.matchesSelector)return"matchesSelector";for(var t=["webkit","moz","ms","o"],i=0,o=t.length;o>i;i++){var n=t[i],r=n+"MatchesSelector";if(e[r])return r}}();if(a){var u=document.createElement("div"),p=i(u,"div");s=p?i:r}else s=n;"function"==typeof define&&define.amd?define("matches-selector/matches-selector",[],function(){return s}):window.matchesSelector=s}(this,Element.prototype),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){for(var e in t)return!1;return e=null,!0}function o(t){return t.replace(/([A-Z])/g,function(t){return"-"+t.toLowerCase()})}function n(t,n,r){function a(t,e){t&&(this.element=t,this.layout=e,this.position={x:0,y:0},this._create())}var u=r("transition"),p=r("transform"),h=u&&p,f=!!r("perspective"),d={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",transition:"transitionend"}[u],l=["transform","transition","transitionDuration","transitionProperty"],c=function(){for(var t={},e=0,i=l.length;i>e;e++){var o=l[e],n=r(o);n&&n!==o&&(t[o]=n)}return t}();e(a.prototype,t.prototype),a.prototype._create=function(){this._transn={ingProperties:{},clean:{},onEnd:{}},this.css({position:"absolute"})},a.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},a.prototype.getSize=function(){this.size=n(this.element)},a.prototype.css=function(t){var e=this.element.style;for(var i in t){var o=c[i]||i;e[o]=t[i]}},a.prototype.getPosition=function(){var t=s(this.element),e=this.layout.options,i=e.isOriginLeft,o=e.isOriginTop,n=parseInt(t[i?"left":"right"],10),r=parseInt(t[o?"top":"bottom"],10);n=isNaN(n)?0:n,r=isNaN(r)?0:r;var a=this.layout.size;n-=i?a.paddingLeft:a.paddingRight,r-=o?a.paddingTop:a.paddingBottom,this.position.x=n,this.position.y=r},a.prototype.layoutPosition=function(){var t=this.layout.size,e=this.layout.options,i={};e.isOriginLeft?(i.left=this.position.x+t.paddingLeft+"px",i.right=""):(i.right=this.position.x+t.paddingRight+"px",i.left=""),e.isOriginTop?(i.top=this.position.y+t.paddingTop+"px",i.bottom=""):(i.bottom=this.position.y+t.paddingBottom+"px",i.top=""),this.css(i),this.emitEvent("layout",[this])};var y=f?function(t,e){return"translate3d("+t+"px, "+e+"px, 0)"}:function(t,e){return"translate("+t+"px, "+e+"px)"};a.prototype._transitionTo=function(t,e){this.getPosition();var i=this.position.x,o=this.position.y,n=parseInt(t,10),r=parseInt(e,10),s=n===this.position.x&&r===this.position.y;if(this.setPosition(t,e),s&&!this.isTransitioning)return this.layoutPosition(),void 0;var a=t-i,u=e-o,p={},h=this.layout.options;a=h.isOriginLeft?a:-a,u=h.isOriginTop?u:-u,p.transform=y(a,u),this.transition({to:p,onTransitionEnd:{transform:this.layoutPosition},isCleaning:!0})},a.prototype.goTo=function(t,e){this.setPosition(t,e),this.layoutPosition()},a.prototype.moveTo=h?a.prototype._transitionTo:a.prototype.goTo,a.prototype.setPosition=function(t,e){this.position.x=parseInt(t,10),this.position.y=parseInt(e,10)},a.prototype._nonTransition=function(t){this.css(t.to),t.isCleaning&&this._removeStyles(t.to);for(var e in t.onTransitionEnd)t.onTransitionEnd[e].call(this)},a.prototype._transition=function(t){if(!parseFloat(this.layout.options.transitionDuration))return this._nonTransition(t),void 0;var e=this._transn;for(var i in t.onTransitionEnd)e.onEnd[i]=t.onTransitionEnd[i];for(i in t.to)e.ingProperties[i]=!0,t.isCleaning&&(e.clean[i]=!0);if(t.from){this.css(t.from);var o=this.element.offsetHeight;o=null}this.enableTransition(t.to),this.css(t.to),this.isTransitioning=!0};var m=p&&o(p)+",opacity";a.prototype.enableTransition=function(){this.isTransitioning||(this.css({transitionProperty:m,transitionDuration:this.layout.options.transitionDuration}),this.element.addEventListener(d,this,!1))},a.prototype.transition=a.prototype[u?"_transition":"_nonTransition"],a.prototype.onwebkitTransitionEnd=function(t){this.ontransitionend(t)},a.prototype.onotransitionend=function(t){this.ontransitionend(t)};var g={"-webkit-transform":"transform","-moz-transform":"transform","-o-transform":"transform"};a.prototype.ontransitionend=function(t){if(t.target===this.element){var e=this._transn,o=g[t.propertyName]||t.propertyName;if(delete e.ingProperties[o],i(e.ingProperties)&&this.disableTransition(),o in e.clean&&(this.element.style[t.propertyName]="",delete e.clean[o]),o in e.onEnd){var n=e.onEnd[o];n.call(this),delete e.onEnd[o]}this.emitEvent("transitionEnd",[this])}},a.prototype.disableTransition=function(){this.removeTransitionStyles(),this.element.removeEventListener(d,this,!1),this.isTransitioning=!1},a.prototype._removeStyles=function(t){var e={};for(var i in t)e[i]="";this.css(e)};var v={transitionProperty:"",transitionDuration:""};return a.prototype.removeTransitionStyles=function(){this.css(v)},a.prototype.removeElem=function(){this.element.parentNode.removeChild(this.element),this.emitEvent("remove",[this])},a.prototype.remove=function(){if(!u||!parseFloat(this.layout.options.transitionDuration))return this.removeElem(),void 0;var t=this;this.on("transitionEnd",function(){return t.removeElem(),!0}),this.hide()},a.prototype.reveal=function(){delete this.isHidden,this.css({display:""});var t=this.layout.options;this.transition({from:t.hiddenStyle,to:t.visibleStyle,isCleaning:!0})},a.prototype.hide=function(){this.isHidden=!0,this.css({display:""});var t=this.layout.options;this.transition({from:t.visibleStyle,to:t.hiddenStyle,isCleaning:!0,onTransitionEnd:{opacity:function(){this.isHidden&&this.css({display:"none"})}}})},a.prototype.destroy=function(){this.css({position:"",left:"",right:"",top:"",bottom:"",transition:"",transform:""})},a}var r=t.getComputedStyle,s=r?function(t){return r(t,null)}:function(t){return t.currentStyle};"function"==typeof define&&define.amd?define("outlayer/item",["eventEmitter/EventEmitter","get-size/get-size","get-style-property/get-style-property"],n):(t.Outlayer={},t.Outlayer.Item=n(t.EventEmitter,t.getSize,t.getStyleProperty))}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){return"[object Array]"===f.call(t)}function o(t){var e=[];if(i(t))e=t;else if(t&&"number"==typeof t.length)for(var o=0,n=t.length;n>o;o++)e.push(t[o]);else e.push(t);return e}function n(t,e){var i=l(e,t);-1!==i&&e.splice(i,1)}function r(t){return t.replace(/(.)([A-Z])/g,function(t,e,i){return e+"-"+i}).toLowerCase()}function s(i,s,f,l,c,y){function m(t,i){if("string"==typeof t&&(t=a.querySelector(t)),!t||!d(t))return u&&u.error("Bad "+this.constructor.namespace+" element: "+t),void 0;this.element=t,this.options=e({},this.constructor.defaults),this.option(i);var o=++g;this.element.outlayerGUID=o,v[o]=this,this._create(),this.options.isInitLayout&&this.layout()}var g=0,v={};return m.namespace="outlayer",m.Item=y,m.defaults={containerStyle:{position:"relative"},isInitLayout:!0,isOriginLeft:!0,isOriginTop:!0,isResizeBound:!0,isResizingContainer:!0,transitionDuration:"0.4s",hiddenStyle:{opacity:0,transform:"scale(0.001)"},visibleStyle:{opacity:1,transform:"scale(1)"}},e(m.prototype,f.prototype),m.prototype.option=function(t){e(this.options,t)},m.prototype._create=function(){this.reloadItems(),this.stamps=[],this.stamp(this.options.stamp),e(this.element.style,this.options.containerStyle),this.options.isResizeBound&&this.bindResize()},m.prototype.reloadItems=function(){this.items=this._itemize(this.element.children)},m.prototype._itemize=function(t){for(var e=this._filterFindItemElements(t),i=this.constructor.Item,o=[],n=0,r=e.length;r>n;n++){var s=e[n],a=new i(s,this);o.push(a)}return o},m.prototype._filterFindItemElements=function(t){t=o(t);for(var e=this.options.itemSelector,i=[],n=0,r=t.length;r>n;n++){var s=t[n];if(d(s))if(e){c(s,e)&&i.push(s);for(var a=s.querySelectorAll(e),u=0,p=a.length;p>u;u++)i.push(a[u])}else i.push(s)}return i},m.prototype.getItemElements=function(){for(var t=[],e=0,i=this.items.length;i>e;e++)t.push(this.items[e].element);return t},m.prototype.layout=function(){this._resetLayout(),this._manageStamps();var t=void 0!==this.options.isLayoutInstant?this.options.isLayoutInstant:!this._isLayoutInited;this.layoutItems(this.items,t),this._isLayoutInited=!0},m.prototype._init=m.prototype.layout,m.prototype._resetLayout=function(){this.getSize()},m.prototype.getSize=function(){this.size=l(this.element)},m.prototype._getMeasurement=function(t,e){var i,o=this.options[t];o?("string"==typeof o?i=this.element.querySelector(o):d(o)&&(i=o),this[t]=i?l(i)[e]:o):this[t]=0},m.prototype.layoutItems=function(t,e){t=this._getItemsForLayout(t),this._layoutItems(t,e),this._postLayout()},m.prototype._getItemsForLayout=function(t){for(var e=[],i=0,o=t.length;o>i;i++){var n=t[i];n.isIgnored||e.push(n)}return e},m.prototype._layoutItems=function(t,e){function i(){o.emitEvent("layoutComplete",[o,t])}var o=this;if(!t||!t.length)return i(),void 0;this._itemsOn(t,"layout",i);for(var n=[],r=0,s=t.length;s>r;r++){var a=t[r],u=this._getItemLayoutPosition(a);u.item=a,u.isInstant=e||a.isLayoutInstant,n.push(u)}this._processLayoutQueue(n)},m.prototype._getItemLayoutPosition=function(){return{x:0,y:0}},m.prototype._processLayoutQueue=function(t){for(var e=0,i=t.length;i>e;e++){var o=t[e];this._positionItem(o.item,o.x,o.y,o.isInstant)}},m.prototype._positionItem=function(t,e,i,o){o?t.goTo(e,i):t.moveTo(e,i)},m.prototype._postLayout=function(){this.resizeContainer()},m.prototype.resizeContainer=function(){if(this.options.isResizingContainer){var t=this._getContainerSize();t&&(this._setContainerMeasure(t.width,!0),this._setContainerMeasure(t.height,!1))}},m.prototype._getContainerSize=h,m.prototype._setContainerMeasure=function(t,e){if(void 0!==t){var i=this.size;i.isBorderBox&&(t+=e?i.paddingLeft+i.paddingRight+i.borderLeftWidth+i.borderRightWidth:i.paddingBottom+i.paddingTop+i.borderTopWidth+i.borderBottomWidth),t=Math.max(t,0),this.element.style[e?"width":"height"]=t+"px"}},m.prototype._itemsOn=function(t,e,i){function o(){return n++,n===r&&i.call(s),!0}for(var n=0,r=t.length,s=this,a=0,u=t.length;u>a;a++){var p=t[a];p.on(e,o)}},m.prototype.ignore=function(t){var e=this.getItem(t);e&&(e.isIgnored=!0)},m.prototype.unignore=function(t){var e=this.getItem(t);e&&delete e.isIgnored},m.prototype.stamp=function(t){if(t=this._find(t)){this.stamps=this.stamps.concat(t);for(var e=0,i=t.length;i>e;e++){var o=t[e];this.ignore(o)}}},m.prototype.unstamp=function(t){if(t=this._find(t))for(var e=0,i=t.length;i>e;e++){var o=t[e];n(o,this.stamps),this.unignore(o)}},m.prototype._find=function(t){return t?("string"==typeof t&&(t=this.element.querySelectorAll(t)),t=o(t)):void 0},m.prototype._manageStamps=function(){if(this.stamps&&this.stamps.length){this._getBoundingRect();for(var t=0,e=this.stamps.length;e>t;t++){var i=this.stamps[t];this._manageStamp(i)}}},m.prototype._getBoundingRect=function(){var t=this.element.getBoundingClientRect(),e=this.size;this._boundingRect={left:t.left+e.paddingLeft+e.borderLeftWidth,top:t.top+e.paddingTop+e.borderTopWidth,right:t.right-(e.paddingRight+e.borderRightWidth),bottom:t.bottom-(e.paddingBottom+e.borderBottomWidth)}},m.prototype._manageStamp=h,m.prototype._getElementOffset=function(t){var e=t.getBoundingClientRect(),i=this._boundingRect,o=l(t),n={left:e.left-i.left-o.marginLeft,top:e.top-i.top-o.marginTop,right:i.right-e.right-o.marginRight,bottom:i.bottom-e.bottom-o.marginBottom};return n},m.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},m.prototype.bindResize=function(){this.isResizeBound||(i.bind(t,"resize",this),this.isResizeBound=!0)},m.prototype.unbindResize=function(){this.isResizeBound&&i.unbind(t,"resize",this),this.isResizeBound=!1},m.prototype.onresize=function(){function t(){e.resize(),delete e.resizeTimeout}this.resizeTimeout&&clearTimeout(this.resizeTimeout);var e=this;this.resizeTimeout=setTimeout(t,100)},m.prototype.resize=function(){this.isResizeBound&&this.needsResizeLayout()&&this.layout()},m.prototype.needsResizeLayout=function(){var t=l(this.element),e=this.size&&t;return e&&t.innerWidth!==this.size.innerWidth},m.prototype.addItems=function(t){var e=this._itemize(t);return e.length&&(this.items=this.items.concat(e)),e},m.prototype.appended=function(t){var e=this.addItems(t);e.length&&(this.layoutItems(e,!0),this.reveal(e))},m.prototype.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps(),this.layoutItems(e,!0),this.reveal(e),this.layoutItems(i)}},m.prototype.reveal=function(t){var e=t&&t.length;if(e)for(var i=0;e>i;i++){var o=t[i];o.reveal()}},m.prototype.hide=function(t){var e=t&&t.length;if(e)for(var i=0;e>i;i++){var o=t[i];o.hide()}},m.prototype.getItem=function(t){for(var e=0,i=this.items.length;i>e;e++){var o=this.items[e];if(o.element===t)return o}},m.prototype.getItems=function(t){if(t&&t.length){for(var e=[],i=0,o=t.length;o>i;i++){var n=t[i],r=this.getItem(n);r&&e.push(r)}return e}},m.prototype.remove=function(t){t=o(t);var e=this.getItems(t);if(e&&e.length){this._itemsOn(e,"remove",function(){this.emitEvent("removeComplete",[this,e])});for(var i=0,r=e.length;r>i;i++){var s=e[i];s.remove(),n(s,this.items)}}},m.prototype.destroy=function(){var t=this.element.style;t.height="",t.position="",t.width="";for(var e=0,i=this.items.length;i>e;e++){var o=this.items[e];o.destroy()}this.unbindResize(),delete this.element.outlayerGUID,p&&p.removeData(this.element,this.constructor.namespace)},m.data=function(t){var e=t&&t.outlayerGUID;return e&&v[e]},m.create=function(t,i){function o(){m.apply(this,arguments)}return Object.create?o.prototype=Object.create(m.prototype):e(o.prototype,m.prototype),o.prototype.constructor=o,o.defaults=e({},m.defaults),e(o.defaults,i),o.prototype.settings={},o.namespace=t,o.data=m.data,o.Item=function(){y.apply(this,arguments)},o.Item.prototype=new y,s(function(){for(var e=r(t),i=a.querySelectorAll(".js-"+e),n="data-"+e+"-options",s=0,h=i.length;h>s;s++){var f,d=i[s],l=d.getAttribute(n);try{f=l&&JSON.parse(l)}catch(c){u&&u.error("Error parsing "+n+" on "+d.nodeName.toLowerCase()+(d.id?"#"+d.id:"")+": "+c);continue}var y=new o(d,f);p&&p.data(d,t,y)}}),p&&p.bridget&&p.bridget(t,o),o},m.Item=y,m}var a=t.document,u=t.console,p=t.jQuery,h=function(){},f=Object.prototype.toString,d="object"==typeof HTMLElement?function(t){return t instanceof HTMLElement}:function(t){return t&&"object"==typeof t&&1===t.nodeType&&"string"==typeof t.nodeName},l=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++)if(t[i]===e)return i;return-1};"function"==typeof define&&define.amd?define("outlayer/outlayer",["eventie/eventie","doc-ready/doc-ready","eventEmitter/EventEmitter","get-size/get-size","matches-selector/matches-selector","./item"],s):t.Outlayer=s(t.eventie,t.docReady,t.EventEmitter,t.getSize,t.matchesSelector,t.Outlayer.Item)}(window),function(t){function e(t){function e(){t.Item.apply(this,arguments)}e.prototype=new t.Item,e.prototype._create=function(){this.id=this.layout.itemGUID++,t.Item.prototype._create.call(this),this.sortData={}},e.prototype.updateSortData=function(){if(!this.isIgnored){this.sortData.id=this.id,this.sortData["original-order"]=this.id,this.sortData.random=Math.random();var t=this.layout.options.getSortData,e=this.layout._sorters;for(var i in t){var o=e[i];this.sortData[i]=o(this.element,this)}}};var i=e.prototype.destroy;return e.prototype.destroy=function(){i.apply(this,arguments),this.css({display:""})},e}"function"==typeof define&&define.amd?define("isotope/js/item",["outlayer/outlayer"],e):(t.Isotope=t.Isotope||{},t.Isotope.Item=e(t.Outlayer))}(window),function(t){function e(t,e){function i(t){this.isotope=t,t&&(this.options=t.options[this.namespace],this.element=t.element,this.items=t.filteredItems,this.size=t.size)}return function(){function t(t){return function(){return e.prototype[t].apply(this.isotope,arguments)}}for(var o=["_resetLayout","_getItemLayoutPosition","_manageStamp","_getContainerSize","_getElementOffset","needsResizeLayout"],n=0,r=o.length;r>n;n++){var s=o[n];i.prototype[s]=t(s)}}(),i.prototype.needsVerticalResizeLayout=function(){var e=t(this.isotope.element),i=this.isotope.size&&e;return i&&e.innerHeight!==this.isotope.size.innerHeight},i.prototype._getMeasurement=function(){this.isotope._getMeasurement.apply(this,arguments)},i.prototype.getColumnWidth=function(){this.getSegmentSize("column","Width")},i.prototype.getRowHeight=function(){this.getSegmentSize("row","Height")},i.prototype.getSegmentSize=function(t,e){var i=t+e,o="outer"+e;if(this._getMeasurement(i,o),!this[i]){var n=this.getFirstItemSize();this[i]=n&&n[o]||this.isotope.size["inner"+e]}},i.prototype.getFirstItemSize=function(){var e=this.isotope.filteredItems[0];return e&&e.element&&t(e.element)},i.prototype.layout=function(){this.isotope.layout.apply(this.isotope,arguments)},i.prototype.getSize=function(){this.isotope.getSize(),this.size=this.isotope.size},i.modes={},i.create=function(t,e){function o(){i.apply(this,arguments)}return o.prototype=new i,e&&(o.options=e),o.prototype.namespace=t,i.modes[t]=o,o},i}"function"==typeof define&&define.amd?define("isotope/js/layout-mode",["get-size/get-size","outlayer/outlayer"],e):(t.Isotope=t.Isotope||{},t.Isotope.LayoutMode=e(t.getSize,t.Outlayer))}(window),function(t){function e(t,e){var o=t.create("masonry");return o.prototype._resetLayout=function(){this.getSize(),this._getMeasurement("columnWidth","outerWidth"),this._getMeasurement("gutter","outerWidth"),this.measureColumns();var t=this.cols;for(this.colYs=[];t--;)this.colYs.push(0);this.maxY=0},o.prototype.measureColumns=function(){if(this.getContainerWidth(),!this.columnWidth){var t=this.items[0],i=t&&t.element;this.columnWidth=i&&e(i).outerWidth||this.containerWidth}this.columnWidth+=this.gutter,this.cols=Math.floor((this.containerWidth+this.gutter)/this.columnWidth),this.cols=Math.max(this.cols,1)},o.prototype.getContainerWidth=function(){var t=this.options.isFitWidth?this.element.parentNode:this.element,i=e(t);this.containerWidth=i&&i.innerWidth},o.prototype._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,o=e&&1>e?"round":"ceil",n=Math[o](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var r=this._getColGroup(n),s=Math.min.apply(Math,r),a=i(r,s),u={x:this.columnWidth*a,y:s},p=s+t.size.outerHeight,h=this.cols+1-r.length,f=0;h>f;f++)this.colYs[a+f]=p;return u},o.prototype._getColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,o=0;i>o;o++){var n=this.colYs.slice(o,o+t);e[o]=Math.max.apply(Math,n)}return e},o.prototype._manageStamp=function(t){var i=e(t),o=this._getElementOffset(t),n=this.options.isOriginLeft?o.left:o.right,r=n+i.outerWidth,s=Math.floor(n/this.columnWidth);s=Math.max(0,s);var a=Math.floor(r/this.columnWidth);a-=r%this.columnWidth?0:1,a=Math.min(this.cols-1,a);for(var u=(this.options.isOriginTop?o.top:o.bottom)+i.outerHeight,p=s;a>=p;p++)this.colYs[p]=Math.max(u,this.colYs[p])},o.prototype._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this.options.isFitWidth&&(t.width=this._getContainerFitWidth()),t},o.prototype._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},o.prototype.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!==this.containerWidth},o}var i=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++){var n=t[i];if(n===e)return i}return-1};"function"==typeof define&&define.amd?define("masonry/masonry",["outlayer/outlayer","get-size/get-size"],e):t.Masonry=e(t.Outlayer,t.getSize)}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t,i){var o=t.create("masonry"),n=o.prototype._getElementOffset,r=o.prototype.layout,s=o.prototype._getMeasurement;e(o.prototype,i.prototype),o.prototype._getElementOffset=n,o.prototype.layout=r,o.prototype._getMeasurement=s;var a=o.prototype.measureColumns;o.prototype.measureColumns=function(){this.items=this.isotope.filteredItems,a.call(this)};var u=o.prototype._manageStamp;return o.prototype._manageStamp=function(){this.options.isOriginLeft=this.isotope.options.isOriginLeft,this.options.isOriginTop=this.isotope.options.isOriginTop,u.apply(this,arguments)},o}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/masonry",["../layout-mode","masonry/masonry"],i):i(t.Isotope.LayoutMode,t.Masonry)}(window),function(t){function e(t){var e=t.create("fitRows");return e.prototype._resetLayout=function(){this.x=0,this.y=0,this.maxY=0},e.prototype._getItemLayoutPosition=function(t){t.getSize(),0!==this.x&&t.size.outerWidth+this.x>this.isotope.size.innerWidth&&(this.x=0,this.y=this.maxY);var e={x:this.x,y:this.y};return this.maxY=Math.max(this.maxY,this.y+t.size.outerHeight),this.x+=t.size.outerWidth,e},e.prototype._getContainerSize=function(){return{height:this.maxY}},e}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/fit-rows",["../layout-mode"],e):e(t.Isotope.LayoutMode)}(window),function(t){function e(t){var e=t.create("vertical",{horizontalAlignment:0});return e.prototype._resetLayout=function(){this.y=0},e.prototype._getItemLayoutPosition=function(t){t.getSize();var e=(this.isotope.size.innerWidth-t.size.outerWidth)*this.options.horizontalAlignment,i=this.y;return this.y+=t.size.outerHeight,{x:e,y:i}},e.prototype._getContainerSize=function(){return{height:this.y}},e}"function"==typeof define&&define.amd?define("isotope/js/layout-modes/vertical",["../layout-mode"],e):e(t.Isotope.LayoutMode)}(window),function(t){function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){return"[object Array]"===h.call(t)}function o(t){var e=[];if(i(t))e=t;else if(t&&"number"==typeof t.length)for(var o=0,n=t.length;n>o;o++)e.push(t[o]);else e.push(t);return e}function n(t,e){var i=f(e,t);-1!==i&&e.splice(i,1)}function r(t,i,r,u,h){function f(t,e){return function(i,o){for(var n=0,r=t.length;r>n;n++){var s=t[n],a=i.sortData[s],u=o.sortData[s];if(a>u||u>a){var p=void 0!==e[s]?e[s]:e,h=p?1:-1;return(a>u?1:-1)*h}}return 0}}var d=t.create("isotope",{layoutMode:"masonry",isJQueryFiltering:!0,sortAscending:!0});d.Item=u,d.LayoutMode=h,d.prototype._create=function(){this.itemGUID=0,this._sorters={},this._getSorters(),t.prototype._create.call(this),this.modes={},this.filteredItems=this.items,this.sortHistory=["original-order"];for(var e in h.modes)this._initLayoutMode(e)},d.prototype.reloadItems=function(){this.itemGUID=0,t.prototype.reloadItems.call(this)},d.prototype._itemize=function(){for(var e=t.prototype._itemize.apply(this,arguments),i=0,o=e.length;o>i;i++){var n=e[i];n.id=this.itemGUID++}return this._updateItemsSortData(e),e},d.prototype._initLayoutMode=function(t){var i=h.modes[t],o=this.options[t]||{};this.options[t]=i.options?e(i.options,o):o,this.modes[t]=new i(this)},d.prototype.layout=function(){return!this._isLayoutInited&&this.options.isInitLayout?(this.arrange(),void 0):(this._layout(),void 0)},d.prototype._layout=function(){var t=this._getIsInstant();this._resetLayout(),this._manageStamps(),this.layoutItems(this.filteredItems,t),this._isLayoutInited=!0},d.prototype.arrange=function(t){this.option(t),this._getIsInstant(),this.filteredItems=this._filter(this.items),this._sort(),this._layout()},d.prototype._init=d.prototype.arrange,d.prototype._getIsInstant=function(){var t=void 0!==this.options.isLayoutInstant?this.options.isLayoutInstant:!this._isLayoutInited;return this._isInstant=t,t},d.prototype._filter=function(t){function e(){f.reveal(n),f.hide(r)}var i=this.options.filter;i=i||"*";for(var o=[],n=[],r=[],s=this._getFilterTest(i),a=0,u=t.length;u>a;a++){var p=t[a];if(!p.isIgnored){var h=s(p);h&&o.push(p),h&&p.isHidden?n.push(p):h||p.isHidden||r.push(p)}}var f=this;return this._isInstant?this._noTransition(e):e(),o},d.prototype._getFilterTest=function(t){return s&&this.options.isJQueryFiltering?function(e){return s(e.element).is(t)}:"function"==typeof t?function(e){return t(e.element)}:function(e){return r(e.element,t)}},d.prototype.updateSortData=function(t){this._getSorters(),t=o(t);
 var e=this.getItems(t);e=e.length?e:this.items,this._updateItemsSortData(e)},d.prototype._getSorters=function(){var t=this.options.getSortData;for(var e in t){var i=t[e];this._sorters[e]=l(i)}},d.prototype._updateItemsSortData=function(t){for(var e=0,i=t.length;i>e;e++){var o=t[e];o.updateSortData()}};var l=function(){function t(t){if("string"!=typeof t)return t;var i=a(t).split(" "),o=i[0],n=o.match(/^\[(.+)\]$/),r=n&&n[1],s=e(r,o),u=d.sortDataParsers[i[1]];return t=u?function(t){return t&&u(s(t))}:function(t){return t&&s(t)}}function e(t,e){var i;return i=t?function(e){return e.getAttribute(t)}:function(t){var i=t.querySelector(e);return i&&p(i)}}return t}();d.sortDataParsers={parseInt:function(t){return parseInt(t,10)},parseFloat:function(t){return parseFloat(t)}},d.prototype._sort=function(){var t=this.options.sortBy;if(t){var e=[].concat.apply(t,this.sortHistory),i=f(e,this.options.sortAscending);this.filteredItems.sort(i),t!==this.sortHistory[0]&&this.sortHistory.unshift(t)}},d.prototype._mode=function(){var t=this.options.layoutMode,e=this.modes[t];if(!e)throw Error("No layout mode: "+t);return e.options=this.options[t],e},d.prototype._resetLayout=function(){t.prototype._resetLayout.call(this),this._mode()._resetLayout()},d.prototype._getItemLayoutPosition=function(t){return this._mode()._getItemLayoutPosition(t)},d.prototype._manageStamp=function(t){this._mode()._manageStamp(t)},d.prototype._getContainerSize=function(){return this._mode()._getContainerSize()},d.prototype.needsResizeLayout=function(){return this._mode().needsResizeLayout()},d.prototype.appended=function(t){var e=this.addItems(t);if(e.length){var i=this._filterRevealAdded(e);this.filteredItems=this.filteredItems.concat(i)}},d.prototype.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps();var o=this._filterRevealAdded(e);this.layoutItems(i),this.filteredItems=o.concat(this.filteredItems)}},d.prototype._filterRevealAdded=function(t){var e=this._noTransition(function(){return this._filter(t)});return this.layoutItems(e,!0),this.reveal(e),t},d.prototype.insert=function(t){var e=this.addItems(t);if(e.length){var i,o,n=e.length;for(i=0;n>i;i++)o=e[i],this.element.appendChild(o.element);var r=this._filter(e);for(this._noTransition(function(){this.hide(r)}),i=0;n>i;i++)e[i].isLayoutInstant=!0;for(this.arrange(),i=0;n>i;i++)delete e[i].isLayoutInstant;this.reveal(r)}};var c=d.prototype.remove;return d.prototype.remove=function(t){t=o(t);var e=this.getItems(t);if(c.call(this,t),e&&e.length)for(var i=0,r=e.length;r>i;i++){var s=e[i];n(s,this.filteredItems)}},d.prototype.shuffle=function(){for(var t=0,e=this.items.length;e>t;t++){var i=this.items[t];i.sortData.random=Math.random()}this.options.sortBy="random",this._sort(),this._layout()},d.prototype._noTransition=function(t){var e=this.options.transitionDuration;this.options.transitionDuration=0;var i=t.call(this);return this.options.transitionDuration=e,i},d.prototype.getFilteredItemElements=function(){for(var t=[],e=0,i=this.filteredItems.length;i>e;e++)t.push(this.filteredItems[e].element);return t},d}var s=t.jQuery,a=String.prototype.trim?function(t){return t.trim()}:function(t){return t.replace(/^\s+|\s+$/g,"")},u=document.documentElement,p=u.textContent?function(t){return t.textContent}:function(t){return t.innerText},h=Object.prototype.toString,f=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,o=t.length;o>i;i++)if(t[i]===e)return i;return-1};"function"==typeof define&&define.amd?define(["outlayer/outlayer","get-size/get-size","matches-selector/matches-selector","isotope/js/item","isotope/js/layout-mode","isotope/js/layout-modes/masonry","isotope/js/layout-modes/fit-rows","isotope/js/layout-modes/vertical"],r):t.Isotope=r(t.Outlayer,t.getSize,t.matchesSelector,t.Isotope.Item,t.Isotope.LayoutMode)}(window);
diff --git a/multiples.css b/multiples.css
 #lead {
  clear: both;
  width: 600px;
 }

 #lead p {
  color: #444;
  font-family: Georgia,Palatino,serif;
  font-size: 1.0em;
  line-height: 1.4em;
 }

 .chart {
  float: left;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top:0;
  padding-left:0;
 }

 svgMultiples {
  font-size: 9px;
 }

 .background {
  fill: none;
 }

 .area {
  fill: #99CCFF;
 }

 .lineMultiple {
  fill: none;
  stroke: #334C80;
  stroke-width: 1.4px;
 }

 .title {
  font-size: 12px;
 }

 .axis line, .grid line {
  stroke-width: .5px;
  shape-rendering: crispEdges;
  stroke: none;
  opacity: 0.5;
  pointer-events: none;
 }

 .axis path {
  display: none;
 }

 .hidden {
  display:none;
  opacity: 0.0;
 }

 #button-wrap {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 5px;
 }

 .button {
  cursor: pointer;
  float: left;
  width: 100px;
  height: 30px;
  text-align: center;
  background: #fcfcfc;
  border: 1px solid #cecece;
  display: block;
  padding-top: 5px;
  margin-top: 10px;
  border-radius: 5px 5px 5px 5px;
 }

 .button.active {
  box-shadow: inset 0px 0px 7px rgba(0,0,0,0.18);
  pointer-events: none;
  background-color: #e6e6e6;
 }

 #count {
  border-radius: 5px 0px 0px 5px;
 }

 #name {
  border-radius: 0px 5px 5px 0px;
 }
country	year	mortalityRate
Angola	1990	226
Angola	1991	225.9
Angola	1992	226
Angola	1993	225.8
Angola	1994	225.5
Angola	1995	224.8
Angola	1996	224
Angola	1997	222.6
Angola	1998	220.8
Angola	1999	218.9
Angola	2000	216.7
Angola	2001	214.1
Angola	2002	211.7
Angola	2003	209.2
Angola	2004	206.7
Angola	2005	203.9
Angola	2006	200.5
Angola	2007	196.4
Angola	2008	192
Angola	2009	187.3
Angola	2010	182.5
Angola	2011	177.3
Angola	2012	172.2
Angola	2013	167.1
Angola	2014	162.2
Angola	2015	156.9
Benin	1990	179.5
Benin	1991	175
Benin	1992	170.4
Benin	1993	166.2
Benin	1994	162.4
Benin	1995	159.1
Benin	1996	156.2
Benin	1997	153.6
Benin	1998	150.9
Benin	1999	147.9
Benin	2000	144.7
Benin	2001	141.1
Benin	2002	137.1
Benin	2003	133.1
Benin	2004	129.2
Benin	2005	125.5
Benin	2006	122.1
Benin	2007	119
Benin	2008	116.3
Benin	2009	113.9
Benin	2010	111.6
Benin	2011	109.3
Benin	2012	107
Benin	2013	104.8
Benin	2014	102.1
Benin	2015	99.5
Burkina Faso	1990	202.2
Burkina Faso	1991	201.8
Burkina Faso	1992	202.1
Burkina Faso	1993	202
Burkina Faso	1994	201.1
Burkina Faso	1995	199.4
Burkina Faso	1996	197
Burkina Faso	1997	194
Burkina Faso	1998	191.3
Burkina Faso	1999	188.5
Burkina Faso	2000	185.7
Burkina Faso	2001	182.4
Burkina Faso	2002	178.3
Burkina Faso	2003	173.1
Burkina Faso	2004	166.3
Burkina Faso	2005	158.3
Burkina Faso	2006	149.4
Burkina Faso	2007	139.9
Burkina Faso	2008	130.4
Burkina Faso	2009	121.4
Burkina Faso	2010	113.5
Burkina Faso	2011	106.9
Burkina Faso	2012	101.4
Burkina Faso	2013	96.6
Burkina Faso	2014	92.4
Burkina Faso	2015	88.6
Ethiopia	1990	204.6
Ethiopia	1991	200.2
Ethiopia	1992	195
Ethiopia	1993	188.9
Ethiopia	1994	182
Ethiopia	1995	175
Ethiopia	1996	168.3
Ethiopia	1997	162
Ethiopia	1998	156.2
Ethiopia	1999	150.8
Ethiopia	2000	145.1
Ethiopia	2001	139
Ethiopia	2002	132.2
Ethiopia	2003	124.8
Ethiopia	2004	117
Ethiopia	2005	109.1
Ethiopia	2006	101.3
Ethiopia	2007	93.8
Ethiopia	2008	86.9
Ethiopia	2009	80.8
Ethiopia	2010	75.7
Ethiopia	2011	71.3
Ethiopia	2012	67.7
Ethiopia	2013	64.6
Ethiopia	2014	61.8
Ethiopia	2015	59.2
Guinea	1990	238.2
Guinea	1991	232.4
Guinea	1992	226.2
Guinea	1993	219.7
Guinea	1994	212.9
Guinea	1995	205.9
Guinea	1996	199
Guinea	1997	192
Guinea	1998	184.8
Guinea	1999	177.5
Guinea	2000	170.2
Guinea	2001	162.9
Guinea	2002	155.8
Guinea	2003	149
Guinea	2004	142.7
Guinea	2005	136.7
Guinea	2006	131.2
Guinea	2007	125.9
Guinea	2008	121
Guinea	2009	116.3
Guinea	2010	111.9
Guinea	2011	107.7
Guinea	2012	104
Guinea	2013	100.4
Guinea	2014	97
Guinea	2015	93.7
Guinea-Bissau	1990	229.3
Guinea-Bissau	1991	224.9
Guinea-Bissau	1992	220.3
Guinea-Bissau	1993	215.5
Guinea-Bissau	1994	210.4
Guinea-Bissau	1995	205.5
Guinea-Bissau	1996	200.1
Guinea-Bissau	1997	194.6
Guinea-Bissau	1998	188.9
Guinea-Bissau	1999	183.3
Guinea-Bissau	2000	177.5
Guinea-Bissau	2001	171.5
Guinea-Bissau	2002	165.3
Guinea-Bissau	2003	159
Guinea-Bissau	2004	152.6
Guinea-Bissau	2005	146.2
Guinea-Bissau	2006	139.9
Guinea-Bissau	2007	133.6
Guinea-Bissau	2008	127.6
Guinea-Bissau	2009	121.6
Guinea-Bissau	2010	115.9
Guinea-Bissau	2011	110.4
Guinea-Bissau	2012	105.2
Guinea-Bissau	2013	100.5
Guinea-Bissau	2014	96.2
Guinea-Bissau	2015	92.5
Equatorial Guinea	1990	189.5
Equatorial Guinea	1991	185.8
Equatorial Guinea	1992	182
Equatorial Guinea	1993	178.3
Equatorial Guinea	1994	174.6
Equatorial Guinea	1995	171.2
Equatorial Guinea	1996	167.6
Equatorial Guinea	1997	163.9
Equatorial Guinea	1998	160.1
Equatorial Guinea	1999	156.1
Equatorial Guinea	2000	152.1
Equatorial Guinea	2001	147.9
Equatorial Guinea	2002	143.8
Equatorial Guinea	2003	139.6
Equatorial Guinea	2004	135.4
Equatorial Guinea	2005	131.2
Equatorial Guinea	2006	126.9
Equatorial Guinea	2007	122.7
Equatorial Guinea	2008	118.4
Equatorial Guinea	2009	114.6
Equatorial Guinea	2010	110.9
Equatorial Guinea	2011	107.3
Equatorial Guinea	2012	103.7
Equatorial Guinea	2013	100.3
Equatorial Guinea	2014	97.4
Equatorial Guinea	2015	94.1
Liberia	1990	255
Liberia	1991	256.7
Liberia	1992	255.4
Liberia	1993	251.6
Liberia	1994	245.5
Liberia	1995	237.4
Liberia	1996	227.7
Liberia	1997	217.1
Liberia	1998	205.8
Liberia	1999	193.9
Liberia	2000	181.8
Liberia	2001	169.7
Liberia	2002	157.6
Liberia	2003	145.9
Liberia	2004	134.8
Liberia	2005	124.7
Liberia	2006	115.7
Liberia	2007	107.8
Liberia	2008	100.9
Liberia	2009	94.7
Liberia	2010	89.3
Liberia	2011	84.5
Liberia	2012	80.3
Liberia	2013	76.3
Liberia	2014	72.9
Liberia	2015	69.9
Mali	1990	254.4
Mali	1991	250
Mali	1992	246.6
Mali	1993	243.9
Mali	1994	242
Mali	1995	240
Mali	1996	237.9
Mali	1997	235.3
Mali	1998	231.7
Mali	1999	226.4
Mali	2000	219.6
Mali	2001	211.2
Mali	2002	201.8
Mali	2003	191.8
Mali	2004	181.7
Mali	2005	171.8
Mali	2006	162.9
Mali	2007	155.1
Mali	2008	148.3
Mali	2009	142
Mali	2010	136.6
Mali	2011	131.7
Mali	2012	127
Mali	2013	122.7
Mali	2014	118.3
Mali	2015	114.7
Mozambique	1990	239.7
Mozambique	1991	236.4
Mozambique	1992	232.4
Mozambique	1993	227.7
Mozambique	1994	222
Mozambique	1995	215.2
Mozambique	1996	207.4
Mozambique	1997	198.8
Mozambique	1998	189.5
Mozambique	1999	180.1
Mozambique	2000	171.1
Mozambique	2001	162.5
Mozambique	2002	154.5
Mozambique	2003	147.1
Mozambique	2004	140.2
Mozambique	2005	133.8
Mozambique	2006	127.8
Mozambique	2007	120.1
Mozambique	2008	113.6
Mozambique	2009	107.6
Mozambique	2010	102.8
Mozambique	2011	97.5
Mozambique	2012	90.9
Mozambique	2013	85.6
Mozambique	2014	81.2
Mozambique	2015	78.5
Malawi	1990	242.4
Malawi	1991	235
Malawi	1992	226.8
Malawi	1993	219
Malawi	1994	212.6
Malawi	1995	207.5
Malawi	1996	203
Malawi	1997	198.7
Malawi	1998	193.1
Malawi	1999	185
Malawi	2000	174.4
Malawi	2001	161.7
Malawi	2002	148
Malawi	2003	135.2
Malawi	2004	124.6
Malawi	2005	116.2
Malawi	2006	109.9
Malawi	2007	104.9
Malawi	2008	100
Malawi	2009	95.4
Malawi	2010	90.9
Malawi	2011	84.5
Malawi	2012	77.3
Malawi	2013	71.3
Malawi	2014	66.9
Malawi	2015	64
Niger	1990	328.2
Niger	1991	321.9
Niger	1992	313.7
Niger	1993	303.8
Niger	1994	292.2
Niger	1995	279.5
Niger	1996	267.1
Niger	1997	255.9
Niger	1998	245.8
Niger	1999	236.4
Niger	2000	227.3
Niger	2001	217.6
Niger	2002	207
Niger	2003	195.7
Niger	2004	184.1
Niger	2005	172.7
Niger	2006	161.8
Niger	2007	151.3
Niger	2008	141.3
Niger	2009	132.1
Niger	2010	123.6
Niger	2011	116.1
Niger	2012	109.6
Niger	2013	104.1
Niger	2014	99.6
Niger	2015	95.5
Nigeria	1990	212.5
Nigeria	1991	212.2
Nigeria	1992	211.7
Nigeria	1993	211
Nigeria	1994	209.7
Nigeria	1995	207.8
Nigeria	1996	205.1
Nigeria	1997	201.4
Nigeria	1998	197
Nigeria	1999	192
Nigeria	2000	186.8
Nigeria	2001	181.3
Nigeria	2002	175.6
Nigeria	2003	169.9
Nigeria	2004	164.1
Nigeria	2005	158.1
Nigeria	2006	152.2
Nigeria	2007	146.4
Nigeria	2008	140.9
Nigeria	2009	135.5
Nigeria	2010	130.3
Nigeria	2011	125.5
Nigeria	2012	120.9
Nigeria	2013	116.6
Nigeria	2014	112.5
Nigeria	2015	108.8
Sierra Leone	1990	264.3
Sierra Leone	1991	263.4
Sierra Leone	1992	262.6
Sierra Leone	1993	261.5
Sierra Leone	1994	259.9
Sierra Leone	1995	257.5
Sierra Leone	1996	254.4
Sierra Leone	1997	250.5
Sierra Leone	1998	246
Sierra Leone	1999	241.1
Sierra Leone	2000	235.8
Sierra Leone	2001	229.9
Sierra Leone	2002	223.9
Sierra Leone	2003	217.4
Sierra Leone	2004	210.8
Sierra Leone	2005	203.7
Sierra Leone	2006	196.2
Sierra Leone	2007	188
Sierra Leone	2008	179.1
Sierra Leone	2009	169.9
Sierra Leone	2010	160.2
Sierra Leone	2011	150.6
Sierra Leone	2012	141.6
Sierra Leone	2013	133.4
Sierra Leone	2014	126.4
Sierra Leone	2015	120.4
Somalia	1990	180.2
Somalia	1991	177.2
Somalia	1992	175.3
Somalia	1993	174.5
Somalia	1994	174.4
Somalia	1995	174.4
Somalia	1996	174.4
Somalia	1997	174.4
Somalia	1998	174.4
Somalia	1999	174.4
Somalia	2000	174.4
Somalia	2001	174.4
Somalia	2002	174.4
Somalia	2003	174.4
Somalia	2004	174.4
Somalia	2005	174.3
Somalia	2006	173.7
Somalia	2007	171.8
Somalia	2008	168.5
Somalia	2009	164.4
Somalia	2010	160.2
Somalia	2011	155.3
Somalia	2012	150.6
Somalia	2013	146.1
Somalia	2014	141.2
Somalia	2015	136.8
South Sudan	1990	253.2
South Sudan	1991	248.1
South Sudan	1992	242.5
South Sudan	1993	236.6
South Sudan	1994	230.3
South Sudan	1995	223.5
South Sudan	1996	216.1
South Sudan	1997	208.5
South Sudan	1998	200.3
South Sudan	1999	191.4
South Sudan	2000	182.3
South Sudan	2001	173
South Sudan	2002	163.8
South Sudan	2003	155.2
South Sudan	2004	147
South Sudan	2005	139.3
South Sudan	2006	132.1
South Sudan	2007	125.7
South Sudan	2008	120
South Sudan	2009	115.2
South Sudan	2010	110.9
South Sudan	2011	106.7
South Sudan	2012	102.8
South Sudan	2013	99.2
South Sudan	2014	95.6
South Sudan	2015	92.6
Chad	1990	214.6
Chad	1991	212
Chad	1992	209.4
Chad	1993	207
Chad	1994	204.8
Chad	1995	202.7
Chad	1996	200.6
Chad	1997	198.3
Chad	1998	195.8
Chad	1999	193
Chad	2000	190.2
Chad	2001	187.3
Chad	2002	184.6
Chad	2003	181.9
Chad	2004	179.4
Chad	2005	177
Chad	2006	174.6
Chad	2007	171.5
Chad	2008	168
Chad	2009	164
Chad	2010	160.1
Chad	2011	156
Chad	2012	151.6
Chad	2013	147.1
Chad	2014	142.9
Chad	2015	138.7
Uganda	1990	187.1
Uganda	1991	183.7
Uganda	1992	179.6
Uganda	1993	175.6
Uganda	1994	172.2
Uganda	1995	169.5
Uganda	1996	166.9
Uganda	1997	163.9
Uganda	1998	159.9
Uganda	1999	154.8
Uganda	2000	148.4
Uganda	2001	141
Uganda	2002	132.8
Uganda	2003	124.2
Uganda	2004	115.6
Uganda	2005	107.4
Uganda	2006	99.7
Uganda	2007	92.5
Uganda	2008	85.9
Uganda	2009	80.1
Uganda	2010	75.2
Uganda	2011	69.8
Uganda	2012	64.1
Uganda	2013	60.3
Uganda	2014	56.9
Uganda	2015	54.6
Congo, Dem. Rep.	1990	186.5
Congo, Dem. Rep.	1991	184.3
Congo, Dem. Rep.	1992	182.3
Congo, Dem. Rep.	1993	180.3
Congo, Dem. Rep.	1994	178.3
Congo, Dem. Rep.	1995	176.4
Congo, Dem. Rep.	1996	174.1
Congo, Dem. Rep.	1997	171.5
Congo, Dem. Rep.	1998	168.4
Congo, Dem. Rep.	1999	164.9
Congo, Dem. Rep.	2000	161
Congo, Dem. Rep.	2001	156.8
Congo, Dem. Rep.	2002	152.4
Congo, Dem. Rep.	2003	147.8
Congo, Dem. Rep.	2004	143.2
Congo, Dem. Rep.	2005	138.4
Congo, Dem. Rep.	2006	133.5
Congo, Dem. Rep.	2007	128.9
Congo, Dem. Rep.	2008	124.5
Congo, Dem. Rep.	2009	120.1
Congo, Dem. Rep.	2010	116.1
Congo, Dem. Rep.	2011	112.2
Congo, Dem. Rep.	2012	108.5
Congo, Dem. Rep.	2013	104.8
Congo, Dem. Rep.	2014	101.7
Congo, Dem. Rep.	2015	98.3
Zambia	1990	190.6
Zambia	1991	190.3
Zambia	1992	189.4
Zambia	1993	187.5
Zambia	1994	184.5
Zambia	1995	181.1
Zambia	1996	178.1
Zambia	1997	175.7
Zambia	1998	172.9
Zambia	1999	169.1
Zambia	2000	163.1
Zambia	2001	154.2
Zambia	2002	142.9
Zambia	2003	131.2
Zambia	2004	120.6
Zambia	2005	111.7
Zambia	2006	104.5
Zambia	2007	98
Zambia	2008	93.1
Zambia	2009	87.4
Zambia	2010	82.1
Zambia	2011	78.6
Zambia	2012	74.4
Zambia	2013	70.2
Zambia	2014	66.6
Zambia	2015	64

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

	<style>
	.container {
	width: 1200px;
	}

	h1 {
	font-size: 26px;
	padding: 0px 0 5px 0;
	line-height: 1.2em;
	color: #000;
	margin-bottom: 0px;
	}

	#lead {
	clear: both;
	width: 600px;
	}

	#lead p {
	color: #444;
	font-family: Georgia,Palatino,serif;
	font-size: 1.0em;
	line-height: 1.4em;
	}

	.chart {
	float: left;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-top:0;
	padding-left:0;
	}

	svg {
	font-size: 9px;
	}

	.background {
	fill: none;
	}

	.area {
	fill: #99CCFF;
	}

	.line {
	fill: none;
	stroke: #334C80;
	stroke-width: 1.4px;
	}

	.title {
	font-size: 12px;
	}

	.axis line, .grid line {
	stroke-width: .5px;
	shape-rendering: crispEdges;
	stroke: none;
	opacity: 0.5;
	pointer-events: none;
	}

	.axis path {
	display: none;
	}

	.hidden {
	display:none;
	opacity: 0.0;
	}

	#button-wrap {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	height: 40px;
	margin-bottom: 10px;
	padding-left: 5px;
	}

	.button {
	cursor: pointer;
	float: left;
	width: 100px;
	height: 30px;
	text-align: center;
	background: #fcfcfc;
	border: 1px solid #cecece;
	display: block;
	padding-top: 5px;
	margin-top: 10px;
	border-radius: 5px 5px 5px 5px;
	}

	.button.active {
	box-shadow: inset 0px 0px 7px rgba(0,0,0,0.18);
	pointer-events: none;
	background-color: #e6e6e6;
	}

	#count {
	border-radius: 5px 0px 0px 5px;
	}

	#name {
	border-radius: 0px 5px 5px 0px;
	}

	</style>

	</head>

	<body>

	<div class="container">
	<h1>Countries with the Highest Child Mortality Rates in Sub-Saharan Africa in 1990</h1>
	<div id="lead">
	<p>Although Niger had the highest child mortality rate in 1990, it has experienced the fifth steepest decline in child mortality in Sub-Saharan Africa from 1990 to 2015.</p>
	<p>Data Source: WHO.</p>

	</div>
	<div id="main">
	<div id="button-wrap">
	<div id="count1990" class="button active">Max in 1990</div>
	<div id="count2015" class="button">Max in 2015</div>
	<div id="rateOfChange" class="button">Rate of Change</div>
	</div>
	<div id="vis"></div>
	</div>
	</div> <!--! end of #container -->

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script src="isotope.pkgd.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

	<script type="text/javascript">

	// Heavily simplified version of Jim Vallandingham's Coffee Script tutorial atThe National
	// https://flowingdata.com/2014/10/15/linked-small-multiples/

	var width = 200,
	height = 150,
	margin = {
	top: 15,
	right: 20,
	bottom: 40,
	left: 40
	};

	var data = [],
	circle = null,
	caption = null,
	curYear = null;

	var bisect = d3.bisector(function(d) {
	return d.date;
	}).left;

	var format = d3.time.format("%Y");
	var xScale = d3.time.scale().range([0, width]).clamp(true); //add clamp(true to remove extra space on the x-axis)
	var yScale = d3.scale.linear().range([height, 0]);

	var xValue = function(d) {
	return d.date;
	};
	var yValue = function(d) {
	return d.count;
	};

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(4)
	.outerTickSize(0)
	.tickSubdivide(1)
	.tickSize(-width);

	var area = d3.svg.area().x(function(d) {
	return xScale(xValue(d));
	}).y0(height).y1(function(d) {
	return yScale(yValue(d));
	});
	var line = d3.svg.line().x(function(d) {
	return xScale(xValue(d));
	}).y(function(d) {
	return yScale(yValue(d));
	});

	function setupScales(data) {
	var extentX, maxY;
	maxY = d3.max(data, function(c) {
	return d3.max(c.values, function(d) {
	return yValue(d);
	});
	});
	maxY = maxY + (maxY * 1 / 4);
	yScale.domain([0, maxY]);
	extentX = d3.extent(data[0].values, function(d) {
	return xValue(d);
	});
	return xScale.domain(extentX);
	}

	function transformData(rawData) {
	var format, nest;
	format = d3.time.format("%Y");
	rawData.forEach(function(d) {
	d.date = format.parse(d.year);
	d.count = +d["childMortality"];
	});
	nest = d3.nest().key(function(d) {
	return d.country;
	}).sortValues(function(a, b) {
	return d3.ascending(a.date, b.date);
	}).entries(rawData);
	nest = nest.filter(function(d) {return d.values.length == 26;});
	return nest;
	}

	// a jquery lib to do the small multiple sorting for us!
	function setupIsotope() {
	$("#vis").isotope({
	itemSelector: '.chart',
	layoutMode: 'fitRows',
	getSortData: {
	count1990: function(e) {
	var d, max;
	d = d3.select(e).datum();
	// Instead of using max function for 1990 and get the max in 2015 instead:
	// console.log(d.values[d.values.length-1]);
	// return d.values[d.values.length-1].count * -1;

	max = d3.max(d.values, function(d) {
	return d.count;
	});
	return max * -1;
	},
	count2015: function(e) {
	var d, max;
	d = d3.select(e).datum();
	// Instead of using max function for 1990 and get the max in 2015 instead:
	// console.log(d.values[d.values.length-1]);
	return d.values[d.values.length-1].count * -1;

	// max = d3.max(d.values, function(d) {
	// return d.count;
	// });
	// return max * -1;
	},
	rateOfChange: function(e) {
	var d;
	d = d3.select(e).datum();
	// console.log("calculate", d.values)
	return d.values[d.values.length-1];
	}
	// rateOfChange: function(e) {
	// var d, changeRate;
	// d = d3.select(e).datum();

	// changeRate = funciton(d){
	// var val;
	// val = (d.values[25] - d.values[0])/(d.values[0]));
	// return
	// })
	// country: function(e) {
	// var d, changeRate, sum;
	// d = d3.select(e).datum();
	// changeRate = d3.max((d.values[25] - d.values[0]), function(d){
	// return d.key;
	// }
	// });
	// return changeRate;
	// }
	}
	});
	return $("#vis").isotope({
	sortBy: 'count1990'
	});
	}


	d3.csv("highChildMortality_reformat.csv", function(error, rawData) {

	if (error) {
	console.log(error);
	};

	var data = transformData(rawData);

	d3.select("#vis").datum(data).each(function(myData) {

	// now we draw for each array of the data.

	data = myData;
	setupScales(data);

	var div = d3.select(this).selectAll(".chart").data(data);

	div.enter()
	.append("div")
	.attr("class", "chart")
	.append("svg")
	.append("g");

	var svg = div.select("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

	var g = svg.select("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	g.append("rect")
	.attr("class", "background")
	.style("pointer-events", "all")
	.attr("width", width + margin.right)
	.attr("height", height).on("mouseover", mouseover)
	.on("mousemove", mousemove)
	.on("mouseout", mouseout);

	var lines = g.append("g");
	lines.append("path")
	.attr("class", "area")
	.style("pointer-events", "none")
	.attr("d", function(c) {
	return area(c.values);
	});
	lines.append("path")
	.attr("class", "line")
	.style("pointer-events", "none")
	.attr("d", function(c) {
	return line(c.values);
	});

	lines.append("text")
	.attr("class", "title")
	.attr("text-anchor", "middle")
	.attr("y", height)
	.attr("dy", margin.bottom / 2 + 10)
	.attr("x", width / 2).text(function(c) {
	return c.key;
	});

	lines.append("text")
	.attr("class", "static_year")
	.attr("text-anchor", "start")
	.style("pointer-events", "none")
	.attr("dy", 26).attr("y", height)
	.attr("x", 0).text(function(c) {
	return xValue(c.values[0]).getFullYear();
	});
	lines.append("text")
	.attr("class", "static_year")
	.attr("text-anchor", "end")
	.style("pointer-events", "none").attr("dy", 26)
	.attr("y", height).attr("x", width).text(function(c) {
	return xValue(c.values[c.values.length - 1]).getFullYear();
	});

	circle = lines.append("circle")
	.attr("r", 2.2)
	.attr("opacity", 0)
	.style("pointer-events", "none");
	caption = lines.append("text")
	.attr("class", "caption")
	.attr("text-anchor", "middle")
	.style("pointer-events", "none")
	.attr("dy", -8);

	curYear = lines.append("text")
	.attr("class", "year")
	.attr("text-anchor", "middle")
	.style("pointer-events", "none")
	.attr("dy", 13)
	.attr("y", height);

	g.append("g").attr("class", "y axis").call(yAxis);

	}); // end of creating the chart for each data row

	console.log(data);
	console.log(circle);
	function mouseover() {
	circle.attr("opacity", 1.0);
	d3.selectAll(".static_year").classed("hidden", true);
	return mousemove.call(this);
	};
	function mousemove() {
	var date, index, year;
	year = xScale.invert(d3.mouse(this)[0]).getFullYear();
	date = format.parse('' + year);
	index = 0;
	circle.attr("cx", xScale(date)).attr("cy", function(c) {
	index = bisect(c.values, date, 0, c.values.length - 1);
	return yScale(yValue(c.values[index]));
	});
	caption.attr("x", xScale(date)).attr("y", function(c) {
	return yScale(yValue(c.values[index]));
	}).text(function(c) {
	return yValue(c.values[index]);
	});
	return curYear.attr("x", xScale(date)).text(year);
	};
	function mouseout() {
	d3.selectAll(".static_year").classed("hidden", false);
	circle.attr("opacity", 0);
	caption.text("");
	return curYear.text("");
	};

	setupIsotope();

	d3.select("#button-wrap").selectAll("div").on("click", function() {
	var id;
	id = d3.select(this).attr("id");
	d3.select("#button-wrap").selectAll("div").classed("active", false);
	d3.select("#" + id).classed("active", true);
	return $("#vis").isotope({
	sortBy: id
	});
	}); // end button setup

	}); // end of read tsv

	</script>

	</body>
	</html>