D3 Scroller Baby Diaper Changes

.block

scrolling: yes
license: MIT
height: 800

bubble.js

/* jshint strict:false */
function bubble(data, group, w, h) {

  var width = w,
      height = h,
      padding = 1.5, // separation between same-color circles
      clusterPadding = 6, // separation between different-color circles
      maxRadius = 12;

  var n = data.length, // total number of circles
      m = d3.max(data, function(d) {return d.caregiver_id + 1; }); // number of distinct clusters

  var color = d3.scale.ordinal()
    .domain(d3.range(m))
    .range(["#008080", "#D8B365"])

   d3.scale.category10()
      .domain(d3.range(m));

  // The largest node for each cluster.
  var clusters = new Array(m);

  var nodes = data.map(function(d) {
    var i = d.caregiver_id,
        r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,
        x = {cluster: i, radius: r};
    if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = x;
    return x;
  });

  var force = d3.layout.force()
      .nodes(nodes)
      .size([width, height])
      .gravity(0.02)
      .charge(0)
      .on("tick", tick)
      .start();

  var circle = group.selectAll("circle")
      .data(nodes)
    .enter().append("circle")
      .attr("class", "bubble")
      .attr("r", function(d) { return d.radius; })
      .style("fill", "#008080")
      .call(force.drag);
  
  function tick(e) {
    circle
        .each(cluster(10 * e.alpha * e.alpha))
        .each(collide(0.5))
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }

  // Move d to be adjacent to the cluster node.
  function cluster(alpha) {
    return function(d) {
      var cluster = clusters[d.cluster];
      if (cluster === d) return;
      var x = d.x - cluster.x,
          y = d.y - cluster.y,
          l = Math.sqrt(x * x + y * y),
          r = d.radius + cluster.radius;
      if (l != r) {
        l = (l - r) / l * alpha;
        d.x -= x *= l;
        d.y -= y *= l;
        cluster.x += x;
        cluster.y += y;
      }
    };
  }

  // Resolves collisions between d and all other circles.
  function collide(alpha) {
    var quadtree = d3.geom.quadtree(nodes);
    return function(d) {
      var r = d.radius + maxRadius + Math.max(padding, clusterPadding),
          nx1 = d.x - r,
          nx2 = d.x + r,
          ny1 = d.y - r,
          ny2 = d.y + r;
      quadtree.visit(function(quad, x1, y1, x2, y2) {
        if (quad.point && (quad.point !== d)) {
          var x = d.x - quad.point.x,
              y = d.y - quad.point.y,
              l = Math.sqrt(x * x + y * y),
              r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
          if (l < r) {
            l = (l - r) / l * alpha;
            d.x -= x *= l;
            d.y -= y *= l;
            quad.point.x += x;
            quad.point.y += y;
          }
        }
        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
      });
    };
  }

  return this;
}

bubblechart.js

var bubble = (function(g, w, h) {
  var BubbleChart, root,
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  BubbleChart = (function() {
    function BubbleChart(data) {
      this.hide_details = __bind(this.hide_details, this);
      this.show_details = __bind(this.show_details, this);
      this.hide_caregivers = __bind(this.hide_caregivers, this);
      this.display_caregivers = __bind(this.display_caregivers, this);
      this.move_towards_caregiver = __bind(this.move_towards_caregiver, this);
      this.display_by_caregiver = __bind(this.display_by_caregiver, this);
      this.move_towards_center = __bind(this.move_towards_center, this);
      this.display_group_all = __bind(this.display_group_all, this);
      this.start = __bind(this.start, this);
      this.create_vis = __bind(this.create_vis, this);
      this.create_nodes = __bind(this.create_nodes, this);
      this.max_amount = 6;
      this.data = data;
      this.width = w;
      this.height = h;
      //this.tooltip = CustomTooltip("gates_tooltip", 240);
      this.center = {
        x: this.width / 2,
        y: (this.height / 2) + 10
      };
      this.caregiver_centers = {
        "Cyrus": {
          x: 220,
          y: this.height / 2
        },
        "Jen": {
          x: this.width - 240,
          y: (this.height / 2) + 10
        }
      };
      this.layout_gravity = -0.01;
      this.damper = 0.1;
      this.vis = null;
      this.nodes = [];
      this.force = null;
      this.circles = null;
      this.fill_color = d3.scale.ordinal().domain(["low", "medium", "high"]).range(["#d84b2a", "#beccae", "#7aa25c"]);
      max_amount = 150;
      this.radius_scale = d3.scale.pow().exponent(0.5).domain([0, max_amount]).range([2, 85]);
      this.create_nodes();
      this.create_vis();
    }

    BubbleChart.prototype.create_nodes = function() {
      this.data.forEach((function(_this) {
        return function(d, i) {
          var node;
          node = {
            id: i,
            caregiver: d.caregiver,
            caregiver_id: d.caregiver_id,
            radius: _this.radius_scale(parseInt(Math.floor((Math.random() * _this.max_amount) + 1))),
            value:  Math.floor((Math.random() * _this.max_amount) + 1),
            x: Math.random() * w,
            y: Math.random() * h
          };
          return _this.nodes.push(node);
        };
      })(this));
      return this.nodes.sort(function(a, b) {
        return b.value - a.value;
      });
    };

    BubbleChart.prototype.create_vis = function() {
      /*var that;
      this.vis = g;
      this.circles = this.vis.selectAll("circle").data(this.nodes, function(d) {
        return d.id;
      });
      that = this;*/
      this.vis = g;
      this.circles = g.selectAll("circle");
      this.circles.data(this.nodes).enter().append("circle")
        .attr("class", "bubble")
        .attr("opacity", 0)
        .attr("r", 0)
        .attr("fill", "#008080")
        .attr("stroke-width", 2).attr("stroke", (function(_this) {
        return function(d) {
          return "#2f4f4f";
        };
      })(this)).attr("id", function(d) {
        return "bubble_" + d.id;
      })/*.on("mouseover", function(d, i) {
        return that.show_details(d, i, this);
      }).on("mouseout", function(d, i) {
        return that.hide_details(d, i, this);
      });*/
      return this.circles.transition().duration(2000).attr("r", function(d) {
        return d.radius;
      });
    };

    BubbleChart.prototype.charge = function(d) {
      return -Math.pow(d.radius, 2.0) / 8;
    };

    BubbleChart.prototype.start = function() {
      return this.force = d3.layout.force().nodes(this.nodes).size([this.width, this.height]);
    };

    BubbleChart.prototype.display_group_all = function() {
      this.force.gravity(this.layout_gravity).charge(this.charge).friction(0.9).on("tick", (function(_this) {
        return function(e) {
          return _this.circles.each(_this.move_towards_center(e.alpha)).attr("cx", function(d) {
            return d.x;
          }).attr("cy", function(d) {
            return d.y;
          });
        };
      })(this));
      this.force.start();
      return this.hide_caregivers();
    };

    BubbleChart.prototype.move_towards_center = function(alpha) {
      return (function(_this) {
        return function(d) {
          d.x = d.x + (_this.center.x - d.x) * (_this.damper + 0.02) * alpha;
          return d.y = d.y + (_this.center.y - d.y) * (_this.damper + 0.02) * alpha;
        };
      })(this);
    };

    BubbleChart.prototype.display_by_caregiver = function() {
      this.force.gravity(this.layout_gravity).charge(this.charge).friction(0.9).on("tick", (function(_this) {
        return function(e) {
          return _this.circles.each(_this.move_towards_caregiver(e.alpha)).attr("cx", function(d) {
            return d.x;
          }).attr("cy", function(d) {
            return d.y;
          });
        };
      })(this));
      this.force.start();
      return this.display_caregivers();
    };

    BubbleChart.prototype.move_towards_caregiver = function(alpha) {
      return (function(_this) {
        return function(d) {
          var target;
          target = _this.caregiver_centers[d.caregiver];
          d.x = d.x + (target.x - d.x) * (_this.damper + 0.02) * alpha * 1.1;
          return d.y = d.y + (target.y - d.y) * (_this.damper + 0.02) * alpha * 1.1;
        };
      })(this);
    };

    BubbleChart.prototype.display_caregivers = function() {
      var caregivers, caregivers_data, caregivers_x;
      caregivers_x = {
        "Cyrus": 100,
        "Jen": this.width - 220
      };
      caregivers_data = d3.keys(caregivers_x);
      caregivers = this.vis.selectAll(".caregivers").data(caregivers_data);
      return caregivers.enter().append("text").attr("class", "caregivers").attr("x", (function(_this) {
        return function(d) {
          return caregivers_x[d];
        };
      })(this)).attr("y", 40).attr("text-anchor", "middle").text(function(d) {
        return d;
      });
    };

    BubbleChart.prototype.hide_caregivers = function() {
      var caregivers;
      return caregivers = g.selectAll(".caregivers").remove();
    };

    BubbleChart.prototype.show_details = function(data, i, element) {
      var content;
      d3.select(element).attr("stroke", "black");
      content = "<span class=\"name\">Caregiver:</span><span class=\"value\"> " + data.name + "</span><br/>";
      content += "<span class=\"name\">Amount:</span><span class=\"value\"> $" + (addCommas(data.value)) + "</span><br/>";
      content += "<span class=\"name\">Year:</span><span class=\"value\"> " + data.year + "</span>";
      return this.tooltip.showTooltip(content, d3.event);
    };

    BubbleChart.prototype.hide_details = function(data, i, element) {
      d3.select(element).attr("stroke", (function(_this) {
        return function(d) {
          return d3.rgb(_this.fill_color(d.group)).darker();
        };
      })(this));
      return this.tooltip.hideTooltip();
    };

    BubbleChart.prototype.color_by_caregiver = function() {
      this.circles
        .transition()
        .duration(3000)
        .attr("fill", function(d) {
          return d.caregiver_id === 0 ? "#D8B365" : "#008080";
        });
    };

    BubbleChart.prototype.color_by_all = function() {
      this.circles
        .transition()
        .duration(800)
        .attr("fill", function(d) {
          return "#008080";
        });
    };

    return BubbleChart;

  })();

  function getDiaperData(rawData) {
    var diaperData = rawData.filter(function(d) {
      return d.Activity.includes('Diaper');
    });

    diaperData.forEach(function(d) {
      d.caregiver_id = (d.Caregiver.includes('Cyrus') ? 0 : 1);
      d.caregiver = (d.Caregiver.includes('Cyrus') ? "Cyrus" : "Jen");
    });
    return diaperData;
  }

  root = typeof exports !== "undefined" && exports !== null ? exports : this;

  $(function() {
    var chart, render_vis;
    chart = null;

    render_vis = function(csv) {
      var diaperdata = getDiaperData(csv);
      chart = new BubbleChart(diaperdata);
      chart.start();
      //return root.display_all();
    };
    root.display_all = (function(_this) {
      return function() {
        return chart.display_group_all();
      };
    })(this);
    root.display_caregivers = (function(_this) {
      return function() {
        return chart.display_by_caregiver();
      };
    })(this);
    root.color_by_caregiver = (function(_this) {
      return function() {
        return chart.color_by_caregiver();
      };
    })(this);
    root.color_by_all = (function(_this) {
      return function() {
        return chart.color_by_all();
      };
    })(this);
    root.toggle_view = (function(_this) {
      return function(view_type) {
        if (view_type === 'caregiver') {
          return root.display_caregivers();
        } else {
          return root.display_all();
        }
      };
    })(this);

    return d3.csv("changings.csv", render_vis);
  });

  return root;
});

changings.csv

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<title>Diaper Story Scroller</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<div id = 'graphic'>
		<div id='sections'>
			<section class="step">
				<div class="title">What I did on Paternity Leave</div>
					Between feedings, diapers, and barely sleeping ... I made dis!
			</section>
			<section class="step">
				<div class="title">Plan to keep Brain working</div>
					Using <a href="https://d3js.org/">d3</a> (visualization coding language) and the most recent data at my disposal (Diaper Changes) ... I set out to craft a quick story about the horrors (aka diapers) we witnessed
			</section>
			<section class="step">
				<div class="title">The Story Begins</div>
					Through a handy app, we know the exact number of poo packs we have endured over the last month
			</section>
			<section class="step">
				<div class="title">Horrors at all Times</div>
					And we have embraced these monstrosities at all hours of the day
			</section>
			<section class="step">
				<div class="title">Compettive Advantage?</div>
				    but ... how can I use this data to my advantage?
			</section>
			<section class="step">
				<div class="title">Must Negotiate Effectively</div>
					Lets convince the wife take these shifts to minimize my exposure!
			</section>
			<section class="step">
				<div class="title">Now Lets Get Fancy</div>
					Lets look at all diapers as individual bubbles! Ok this one really isn't telling us much ... but it sure looks cool! (note: bubble sizes are random because we didn't go as far as logging relative volumes)
			</section>
			<section class="step">
				<div class="title">But who is Changing More?</div>
					Orange bubbles are what I changed (Don't Tell!)
			</section>
			<section class="step">
				<div class="title">Ok ... Clearly its Jen</div>
					Before you get all huffy at me ... we know the data is bad! Jen usually logs an entry into the app for me when I change da bebe  
			</section>
			<section class="step">
				<div class="title">And Thats all for now</div>
					It has been fun ... but I need sleep
			</section>
		</div>
		<div id ='vis'>
		</div>
		<div id="extra-space">
		</div>
	</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="scroller.js"></script>
<script src="bubblechart.js"></script>
<script src="sections.js"></script>
</body>
</html>

preview.png

scroller.js

/* jshint strict:false */
/**
 * scroller - handles the details
 * of figuring out which section
 * the user is currently scrolled
 * to.
 *
 */
function scroller() {
  var windowHeight;
  var container = d3.select('body');
  // 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;
  };

  // allows us to bind to scroller events
  // which will interally be handled by
  // the dispatcher.
  d3.rebind(scroll, dispatch, "on");

  return scroll;
}

sections.js

/* jshint strict:false */
/**
 * scrollVis - encapsulates
 * all the code for the visualization
 * using reusable charts pattern:
 * http://bost.ocks.org/mike/chart/
 */

//Make diaper data global to hack bubble chart together
var diaperData = [];

var scrollVis = function() {
	// constants to define the size
	// and margins of the vis area.
	var width = 600;
	var height = 520;
	var margin = {top:10, left:20, bottom:40, right:30};
	var hourFormat = d3.time.format('%H');
	var times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12a"];

	// Keep track of which visualization
    // we are on and which was the last
    // index activated. When user scrolls
    // quickly, we want to call all the
    // activate functions that they pass.
    var lastIndex = -1;
    var activeIndex = 0;

    //main svg used for the viz
    var svg = null;

    //d3 selection that will be used
    //for displaying visualizatoins
    var g = null;

    //set scales for graphs (will enter domain when data is processed)
    var xBarScale = d3.scale.linear()
    	.range([0, width]);

    var yBarScale = d3.scale.linear()
    	.range([height, 0]);

    var xAxisBar = d3.svg.axis()
    	.scale(xBarScale)
    	.orient("bottom")
    	.ticks(24);
    	//.tickFormat(d3.time.format("%H"));

    var yAxisBar = d3.svg.axis()
    	.scale(yBarScale)
    	.orient("left");

    // The color transition used to show what hour
    // I should avoid when watching baby
    var diaperHourColorScale = d3.scale.linear()
    .domain([0,1.0])
    .range(["#008080", "orange"]);

    // When scrolling to a new section
    // the activation function for that
    // section is called.
    var activateFunctions = [];
    // If a section has an update function
    // then it is called while scrolling
    // through the section with the current
    // progress through the section.
    var updateFunctions = [];

   /**
   * chart
   *
   * @param selection - the current d3 selection(s)
   *  to draw the visualization in. For this
   *  example, we will be drawing it in #vis
   */
	var chart = function(selection) {
		selection.each(function(rawData) {
			svg = d3.select(this).selectAll("svg").data([diaperData]);
			svg.enter().append("svg").append("g");

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


			//this group element will be used to conatin all other elements
			g = svg.select("g")
			    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

			//perform some data magic on data (call functions from above)
			var diaperData = getDiaperData(rawData);
			var totalDiapers = getTotalDiapers(diaperData);
			var diapersByHour = getDiapersByHour(diaperData);

			var diaperByHourMax = d3.max(diapersByHour, function(d) { return d.values; });
			xBarScale.domain([1, 24]).nice(d3.time.day);


			yBarScale.domain([0, diaperByHourMax]);

			setupVis(diaperData, diapersByHour, totalDiapers);
    		setupSections();

		});
    };


   /**
   * setupVis - creates initial elements for all
   * sections of the visualization.
   *
   * @param diaperData = Data cleaned to only be diapers
   * @param diaperDatabyHour = Data grouped/aggregated by Hour
   */
    setupVis = function(diaperData, diapersByHour, totalDiapers) {

    	//Diapes title
	    g.append("text")
	      	.attr("class", "title diapers-title")
	      	.attr("x", width / 2)
	      	.attr("y", height / 3)
	      	.attr("fill", "#008080")
	      	.text("Scroll Down");

	    g.append("text")
	      	.attr("class", "sub-title diapers-title")
	      	.attr("x", width / 2)
	      	.attr("y", (height / 3) + (height / 5) )
	      	.attr("fill", "#008080")
	      	.text("↓");

	    g.selectAll(".diapers-title")
	      	.attr("opacity", 0);

	    //Total Diaper Count Text
	    g.append("circle")
	    	.attr("class", "diaperCountCircle")
	    	.attr("cx", width / 2)
	    	.attr("cy", height / 2)
	    	.attr("r", 0)
	    	.attr("fill", "#008080")
	    	.attr("opacity", 0);

	    g.append("text")
	        .attr("class", "title count-title highlight")
	        .attr("x", width / 2)
	        .attr("y", height / 2)
	        .text(totalDiapers);

	    g.append("text")
	        .attr("class", "sub-title count-title highlight")
	        .attr("x", width / 2)
	        .attr("y", (height / 2) + (height / 7) )
	        .text("Diapers");

	    g.selectAll(".count-title")
	      .attr("opacity", 0);

        //DiapersByHour BarChart
        var diapersbyHourArea = g.append("g")
    	    .attr("class", "diapersByHour");

    	var timeLabels = diapersbyHourArea.append("g")
    		.attr("class", "x axis");

    	timeLabels.selectAll(".timeLabel")
          .data(times)
          .enter().append("text")
            .text(function(d) { return d; })
            .attr("x", function(d, i) { return i * 24 + i * 2.2; })
            .attr("y", 0)
            .style("text-anchor", "middle")
            .attr("transform", "translate(10, 535)")
            .attr("class", "timeLabel mono axis");

        diapersbyHourArea.select(".x.axis").style("opacity", 0);

    	diapersbyHourArea.append("g")
    	    .attr("class", "y axis")
    		.call(yAxisBar);
    	diapersbyHourArea.select(".y.axis").style("opacity", 0);

	    var bars = diapersbyHourArea.selectAll(".bar").data(diapersByHour);
	    bars.enter()
	        .append("rect")
	        .attr("class", "bar")
	        .attr("x", function(d,i) { return xBarScale(i+1); })
	        .attr("y", function(d) { return yBarScale(d.values); })
	        .attr("width", width/25 )
	        .attr("height", function(d) { return height - yBarScale(d.values); })
	        .attr("fill", "#008080")
	        .attr("opacity", 0);

	    //Bar Text to show values at top of bar
	    bars.enter()
	    	.append("text")
	    	.attr("class", "bartext")
	    	.attr("text-anchor", "middle")
	    	.attr("fill", "white")
	    	.attr("opacity", "0")
	    	.attr("x", function(d,i) {
	    		return xBarScale(i)+38;
	    	})
	    	.attr("y", function(d) {
	    		console.log(yBarScale(d.values));
	    		return yBarScale(d.values) + 18;
	    	})
	    	.text(function(d){
	    		return d.values;
	    	});

	    //BubbleChart
	    var bubbleArea = g.append("g")
    	    .attr("class", "bubbleChart");

    	//Have to call this twice to work .. weird! Fix later
	    bubble(bubbleArea, width, height);
	    bubble(bubbleArea, width, height);
	    bubbleArea.selectAll(".bubble")
			.transition()
			.duration(800)
			.attr("opacity", 0)
			.attr("fill", "#008080");
    };

    /**
   * setupSections - each section is activated
   * by a separate function. Here we associate
   * these functions to the sections based on
   * the section's index.
   *
   */
    setupSections = function() {
    	activateFunctions[0] = showTitle;
    	activateFunctions[1] = doNothing;
    	activateFunctions[2] = showDiaperTotal;
    	activateFunctions[3] = showDiapersByHour;
    	activateFunctions[4] = doNothing;
    	activateFunctions[5] = sortDiapersByHour;
    	activateFunctions[6] = showDiaperBubble;
    	activateFunctions[7] = colorBubbleByChanger;
    	activateFunctions[8] = sortBubbleByChanger;
    	activateFunctions[9] = doNothing;

    	// updateFunctions are called while
    	// in a particular section to update
    	// the scroll progress in that section.
    	// Most sections do not need to be updated
    	// for all scrolling and so are set to
    	// no-op functions.
    	for(var i = 0; i < 3; i++) {
    		updateFunctions[i] = function() {};
    	}
    	//e.g. to overide updateFunctions[2] = newHighlight();
    };

    /**
    * ------------------------------------------------------------
	* ACTIVATE FUNCTIONS
	*
	* These will be called their
	* section is scrolled to.
	*
	* General pattern is to ensure
	* all content for the current section
	* is transitioned in, while hiding
	* the content for the previous section
	* as well as the next section (as the
	* user may be scrolling up or down).
	*--------------------------------------------------------------
	*/

	/*
	**shows: title
	**hitdes diaper total
	*/
	function showTitle() {
		g.selectAll(".count-title")
			.transition()
			.duration(800)
			.attr("opacity", 0);

		g.selectAll(".diapers-title")
			.transition()
			.duration(800)
			.attr("opacity", 1.0);

		g.selectAll(".diaperCountCircle")
			.transition()
			.duration(800)
			.attr("opacity", 0)
			.attr("r", 0);
	}

	/*
	**hides: title
	**shows: total diapers count title
	**shows: total diaper circle
	**hides: Diapers by Hour
	*/
	function showDiaperTotal() {
		var waitTime = 6000;
		g.selectAll(".diapers-title")
			.transition()
			.duration(800)
			.attr("opacity", 0);

		g.selectAll(".count-title")
			.transition()
			.duration(waitTime)
			.attr("opacity", 1);

		g.selectAll(".diaperCountCircle")
			.transition()
			.duration(waitTime)
			.ease("elastic")
			.attr("opacity", 1)
			.attr("r", 250);

		g.selectAll(".bar")
			.transition()
			.duration(600)
			.attr("opacity", 0);
		g.select(".x.axis").style("opacity", 0);

		g.selectAll(".bartext")
			.transition()
			.duration(600)
			.attr("opacity", 0);
	}

	/*
	**hides: total diapers
	**shows: bar chart
	**hides: highlight diapers
	*/
	function showDiapersByHour() {
		g.selectAll(".count-title")
			.transition()
			.duration(800)
			.attr("opacity", 0);

		g.selectAll(".diaperCountCircle")
			.transition()
			.duration(800)
			.attr("opacity", 0)
			.attr("r", 0);

		g.selectAll(".bar")
			.attr("height", 0)
			.attr("y", height)
			.transition()
			.duration(1600)
			.ease("bounce")
			.attr("opacity", 1)
			.attr("y", function(d) { return yBarScale(d.values); })
			.attr("height",  function(d) { return height - yBarScale(d.values); })
			.style("fill", "#008080");

		g.selectAll(".bartext")
			.attr("height", 0)
			.attr("y", height)
			.transition()
			.duration(1600)
			.ease("bounce")
			.attr("opacity", 1)
			.attr("y", function(d) { return yBarScale(d.values) + 18; })
			.attr("height",  function(d) { return height - yBarScale(d.values); });

		g.select(".x.axis").style("opacity", 1);

	}

	/*
	**highlights: Highlights the Bad Hours to Change Diapers
	*/
	function sortDiapersByHour() {
		g.selectAll(".bar")
		.attr("width", function(d) {
			return (d.values >= 4) ? width/30 : width/25;
		})
		.transition()
		.duration(3000)
		.attr("opacity", 1)
		.ease("bounce")
		.attr("width", width/25)
		.style("fill", function(d) {
			return (d.values >= 11) ? "#d8b365" : "#008080";
		})
		.attr("width", width/25);

		g.select(".x.axis")
		.transition()
		.duration(1600)
		.style("opacity", 1);

		g.selectAll(".bubble")
			.transition()
			.duration(600)
			.attr("opacity", 0);
	}

	/*
	**hides: bar chart
	**shows: bubble chart
	**hides: color bubble chart
	*/
	function showDiaperBubble() {
		g.selectAll(".bar")
			.transition()
			.duration(800)
			.attr("opacity", 0);

		g.select(".x.axis").style("opacity", 0);

		display_all(); //Calls function in bubblechart.js

		g.selectAll(".bubble")
			.transition()
			.duration(800)
			.attr("opacity", 1);
	}

	function colorBubbleByChanger() {
		display_all();
		color_by_caregiver();
	}

	function sortBubbleByChanger() {
		toggle_view("caregiver"); //Calls function in bubblechart.js
	}

	function doNothing() {
	}


	/*
	----------------------------------------------------------
	DATA FORMATING FUNCTIONS
	----------------------------------------------------------
	*/

    /*Return only Diaper Data
    **Add hours format in
    */
    function getDiaperData(rawData) {
    	var diaperData = rawData.filter(function(d) {
    		return d.Activity.includes('Diaper');
    	});

    	diaperData.forEach(function(d) {
    		d.hour = (+hourFormat(new Date(d["Start Time"])))+1;
    		d.caregiver_id = (d.Caregiver.includes('Cyrus') ? 0 : 1);
    		d.caregiver = (d.Caregiver.includes('Cyrus') ? "Cyrus" : "Jen");
    	});

    	return diaperData;
    }

    /***
     * Return the total Diaper Count
    */
    function getTotalDiapers(diaperData) {
    		return d3.nest()
    			.rollup(function(v) {return v.length;})
    			.entries(diaperData);
    }

    /*Nest data to return total Diapers per Hour
    */
    function getDiapersByHour(diaperData) {
    	return d3.nest()
    		.key(function(d) { return d.hour; })
    		.rollup(function(v) {return v.length; })
    		.entries(diaperData);
    }

    /**
     * activate chart
     * @param index - index of the activated section
     */
    chart.activate = function(index) {
    	activeIndex = index;
    	var sign = (activeIndex - lastIndex) < 0 ? -1 : 1;
    	var scrolledSections = d3.range(lastIndex + sign, activeIndex + sign, sign);
    	scrolledSections.forEach(function(i) {
    		activateFunctions[i]();
    	});
    	lastIndex = activeIndex;
    };

    //chart update
    chart.update = function(index, progress) {
    	updateFunctions[index](progress);
    };

    //return chart function
    return chart;
};

function display(data) {
	//Create a new plot and display it
	var plot = scrollVis();

	d3.select("#vis")
	    .datum(data)
	    .call(plot);

	//setup scroll functionality
	var scroll = scroller()
	    .container(d3.select('#graphic'));

	//pass in .step selection as the steps
	scroll(d3.selectAll('.step'));

	//setup event handling
	scroll.on('active', function(index) {

	//highlight current step text
	d3.selectAll('.step')
		.style('opacity', function(d,i) { return i == index ? 1 : 0.1; });

	//activate curent section
	plot.activate(index);
	});
}

//load the data and display
var data = d3.csv("changings.csv", display);

style.css

.container {
  width: 890px;
  margin: 20px;
}

#graphic {
  padding-top: 60px;
}

#sections {
  position: relative;
  display: inline-block;
  width: 250px;
  top: 0px;
  z-index: 90;
  padding-bottom: 200px;
}

.step {
  margin-bottom: 500px;
  font-family: "TiemposTextWeb-Regular","Georgia";
  font-size: 16px;
  line-height: 23px;
  color: #767678;
}

#sections .title {
  font-family:"TiemposTextWeb-Regular","Georgia";
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2px;
  color: #008080;
  line-height: 1.2em;
}

#extra-space {
  height: 300px;
}

#vis {
  display: inline-block;
  position: fixed;
  top: 60px;
  z-index: 1;
  margin-left: 0;
  height: 570px; 
  width: 650px;
  /*background-color: #ddd;*/
}

#vis .diapers-title {
  font-size: 60px;
  text-anchor: middle;
  font-weight: bold;
}

#vis .count-title {
  font-size: 120px;
  text-anchor: middle;
  font-weight: bold;
}

#vis .sub-title {
  font-size:80px;
  text-anchor: middle;
}

.axis path,
.axis line {
  fill: none;
  stroke: #aaa;
  shape-rendering: crispEdges;
}

.highlight {
  fill: #faebd7;
  font-weight: bold;
}

.caregivers {
  font-family:"TiemposTextWeb-Regular","Georgia";
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 2px;
  line-height: 1.2em;
  fill: #008080;
}

.hover {
  color: #33A0A0;
}

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 50px;                  
  height: 30px;                 
  padding: 2px;             
  font: 12px "TiemposTextWeb-Regular","Georgia";     
  font-weight: bold;
  color: #2F4F4F;   
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

text.mono {
  font-size: 10pt;
  font-family: Consolas, courier;
  fill: #aaa;
}

text.axis-worktime {
  fill: #000;
}

thumbnail.png