rveciana/.block

## .block
scrolling: yes
licence: mit

## README.md

      
    Raw
  

              README.md
            
          
    Testing the graph-scroll library to add a progress value in each section

  
## graph-scroll.js
function graphScroll() {
  var windowHeight,
      dispatch = d3.dispatch("scroll", "active"),
      sections = d3.select('null'),
      i = NaN,
      sectionPos = [],
      n,
      graph = d3.select('null'),
      isFixed = null,
      isBelow = null,
      container = d3.select('body'),
      containerStart = 0,
      belowStart,
      eventId = Math.random()

  function reposition(){
    var i1 = 0
    sectionPos.forEach(function(d, i){
      if (d < pageYOffset - containerStart + 200) i1 = i
    })
    i1 = Math.min(n - 1, i1)
    if (i != i1){
      sections.classed('graph-scroll-active', function(d, i){ return i === i1 })

      dispatch.active(i1)

      i = i1
    }

    var isBelow1 = pageYOffset > belowStart
    if (isBelow != isBelow1){
      isBelow = isBelow1
      graph.classed('graph-scroll-below', isBelow)
    }
    var isFixed1 = !isBelow && pageYOffset > containerStart
    if (isFixed != isFixed1){
      isFixed = isFixed1
      graph.classed('graph-scroll-fixed', isFixed)
    }

    var pos = pageYOffset - 10 - containerStart;
    var prevTop = sectionPos[i];
    var nextTop = (i+1<sectionPos.length?sectionPos[i+1]:(belowStart-containerStart)) - 200 ;
    var progress = (pos - prevTop) / (nextTop - prevTop);
    if(progress>=0 && progress <=1)
      dispatch.scroll(i, progress);

  }

  function resize(){
    sectionPos = []
    var startPos
    sections.each(function(d, i){
      if (!i) startPos = this.getBoundingClientRect().top
      sectionPos.push(this.getBoundingClientRect().top -  startPos) })

    var containerBB = container.node().getBoundingClientRect()
    var graphBB = graph.node().getBoundingClientRect()

    containerStart = containerBB.top + pageYOffset
    belowStart = containerBB.bottom - graphBB.height  + pageYOffset
  }

  function keydown() {
    if (!isFixed) return
    var delta
    switch (d3.event.keyCode) {
      case 39: // right arrow
      if (d3.event.metaKey) return
      case 40: // down arrow
      case 34: // page down
      delta = d3.event.metaKey ? Infinity : 1 ;break
      case 37: // left arrow
      if (d3.event.metaKey) return
      case 38: // up arrow
      case 33: // page up
      delta = d3.event.metaKey ? -Infinity : -1 ;break
      case 32: // space
      delta = d3.event.shiftKey ? -1 : 1
      ;break
      default: return
    }

    var i1 = Math.max(0, Math.min(i + delta, n - 1))
    d3.select(document.documentElement)
        .interrupt()
      .transition()
        .duration(500)
        .tween("scroll", function() {
          var i = d3.interpolateNumber(pageYOffset, sectionPos[i1] + containerStart)
          return function(t) { scrollTo(0, i(t)) }
        })

    d3.event.preventDefault()
  }


  var rv ={}

  rv.container = function(_x){
    if (!_x) return container

    container = _x
    return rv
  }

  rv.graph = function(_x){
    if (!_x) return graph

    graph = _x
    return rv
  }

  rv.eventId = function(_x){
    if (!_x) return eventId

    eventId = _x
    return rv
  }

  rv.sections = function (_x){
    if (!_x) return sections

    sections = _x
    n = sections.size()

    d3.select(window)
        .on('scroll.gscroll'  + eventId, reposition)
        .on('resize.gscroll'  + eventId, resize)
        .on('keydown.gscroll' + eventId, keydown)

    resize()
    d3.timer(function() {
      reposition()
      return true
    })

    return rv
  }

  d3.rebind(rv, dispatch, "on")

  return rv
}

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
  <script src="graph-scroll.js"></script>
  <style>
  body{
    width: 900px;
    margin: 0px auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #container, #container2{
    position: relative;
    width: 100%;
    overflow: auto;
  }

  #sections, #sections2{
    width: 340px;
    float: left;
  }

  #sections > div, #sections2 > div{
    background: white;
    opacity: .2;
    margin-bottom:120px;
  }

  #sections > div.graph-scroll-active, #sections2 > div.graph-scroll-active{
    opacity: 1;
  }


  #graph, #graph2{
    float: left;
    margin-left: 40px;
  }

  #graph.graph-scroll-fixed, #graph2.graph-scroll-fixed{
    position: fixed;
    top: 0px;
    margin-left: 380px;
  }

  #graph.graph-scroll-below, #graph2.graph-scroll-below {
    position: absolute;
    bottom: 0px;
    margin-left: 380px;
  }

  h1{
  margin: 50px;
  }

  h1, h3{
    text-align: center;
  }

  </style>
</head>

<body>
  <h1>Header</h1>
  <h3>Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet</h3>
  <div id='container'>
    <div id='sections'>
      <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.</p>
      </div>
      <div>Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet. Mauris feugiat neque eget mi aliquam pellentesque. Aenean augue est, tincidunt at justo eget, pretium ultrices dolor. Cras nec nisl metus. Etiam venenatis id turpis ac consectetur. In a rhoncus arcu, blandit sodales nulla.
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.</p>
      </div>
      <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.
      </div>

    </div>

    <div id='graph'></div>

  </div>
  <h1>Section without scroller</h1>
  <h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna.</h3>
  <h1>Second scroller</h1>

  <div id='container2'>
    <div id='sections2'>
      <div>Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet. Mauris feugiat neque eget mi aliquam pellentesque. Aenean augue est, tincidunt at justo eget, pretium ultrices dolor. Cras nec nisl metus. Etiam venenatis id turpis ac consectetur. In a rhoncus arcu, blandit sodales nulla. </div>
      <div>Morbi lobortis diam ligula, ut varius leo facilisis id. Integer rutrum orci eu magna venenatis, vel scelerisque arcu ultrices. Vestibulum sit amet eros sem.</div>
      <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet. Mauris feugiat neque eget mi aliquam pellentesque. Aenean augue est, tincidunt at justo eget, pretium ultrices dolor. Cras nec nisl metus. Etiam venenatis id turpis ac consectetur. In a rhoncus arcu, blandit sodales nulla. </div>
      <div>Morbi lobortis diam ligula, ut varius leo facilisis id. Integer rutrum orci eu magna venenatis, vel scelerisque arcu ultrices. Vestibulum sit amet eros sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet. Mauris feugiat</div>
    </div>
    <div id='graph2'></div>
  </div>
  <h1>Footer</h1>
  <h3>Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet. Mauris feugiat neque eget mi aliquam pellentesque.</h3>
  <script>
  var width = 500,
    height = 450,
    r = 40;

  var svg = d3.select('#graph')
    .append('svg')
      .attr({width: width, height: height});

  var text = svg.append('text')
      .attr({x: width/2, y: height/2, "font-family":"sans-serif", "font-size":"20px", fill:"red", "text-anchor":"middle"});

  var gs = graphScroll()
    .container(d3.select('#container'))
    .graph(d3.selectAll('#graph'))
    .sections(d3.selectAll('#sections > div'))
      .on('scroll', function(i, d){
        text.text("First scroller, Section: " + i + ", Progress: " + d.toFixed(3));

      });


  var svg2 = d3.select('#graph2')
    .append('svg')
      .attr({width: width, height: height});

  var text2 = svg2.append('text')
      .attr({x: width/2, y: height/2, "font-family":"sans-serif", "font-size":"20px", fill:"blue", "text-anchor":"middle"});

  var gs2 = graphScroll()
    .container(d3.select('#container2'))
    .graph(d3.selectAll('#graph2'))
    .sections(d3.selectAll('#sections2 > div'))
      .on('scroll', function(i, d){
        text2.text("Second scroller, Section: " + i + ", Progress: " + d.toFixed(3));
      });

  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	function graphScroll() {
	var windowHeight,
	dispatch = d3.dispatch("scroll", "active"),
	sections = d3.select('null'),
	i = NaN,
	sectionPos = [],
	n,
	graph = d3.select('null'),
	isFixed = null,
	isBelow = null,
	container = d3.select('body'),
	containerStart = 0,
	belowStart,
	eventId = Math.random()

	function reposition(){
	var i1 = 0
	sectionPos.forEach(function(d, i){
	if (d < pageYOffset - containerStart + 200) i1 = i
	})
	i1 = Math.min(n - 1, i1)
	if (i != i1){
	sections.classed('graph-scroll-active', function(d, i){ return i === i1 })

	dispatch.active(i1)

	i = i1
	}

	var isBelow1 = pageYOffset > belowStart
	if (isBelow != isBelow1){
	isBelow = isBelow1
	graph.classed('graph-scroll-below', isBelow)
	}
	var isFixed1 = !isBelow && pageYOffset > containerStart
	if (isFixed != isFixed1){
	isFixed = isFixed1
	graph.classed('graph-scroll-fixed', isFixed)
	}

	var pos = pageYOffset - 10 - containerStart;
	var prevTop = sectionPos[i];
	var nextTop = (i+1<sectionPos.length?sectionPos[i+1]:(belowStart-containerStart)) - 200 ;
	var progress = (pos - prevTop) / (nextTop - prevTop);
	if(progress>=0 && progress <=1)
	dispatch.scroll(i, progress);

	}

	function resize(){
	sectionPos = []
	var startPos
	sections.each(function(d, i){
	if (!i) startPos = this.getBoundingClientRect().top
	sectionPos.push(this.getBoundingClientRect().top - startPos) })

	var containerBB = container.node().getBoundingClientRect()
	var graphBB = graph.node().getBoundingClientRect()

	containerStart = containerBB.top + pageYOffset
	belowStart = containerBB.bottom - graphBB.height + pageYOffset
	}

	function keydown() {
	if (!isFixed) return
	var delta
	switch (d3.event.keyCode) {
	case 39: // right arrow
	if (d3.event.metaKey) return
	case 40: // down arrow
	case 34: // page down
	delta = d3.event.metaKey ? Infinity : 1 ;break
	case 37: // left arrow
	if (d3.event.metaKey) return
	case 38: // up arrow
	case 33: // page up
	delta = d3.event.metaKey ? -Infinity : -1 ;break
	case 32: // space
	delta = d3.event.shiftKey ? -1 : 1
	;break
	default: return
	}

	var i1 = Math.max(0, Math.min(i + delta, n - 1))
	d3.select(document.documentElement)
	.interrupt()
	.transition()
	.duration(500)
	.tween("scroll", function() {
	var i = d3.interpolateNumber(pageYOffset, sectionPos[i1] + containerStart)
	return function(t) { scrollTo(0, i(t)) }
	})

	d3.event.preventDefault()
	}


	var rv ={}

	rv.container = function(_x){
	if (!_x) return container

	container = _x
	return rv
	}

	rv.graph = function(_x){
	if (!_x) return graph

	graph = _x
	return rv
	}

	rv.eventId = function(_x){
	if (!_x) return eventId

	eventId = _x
	return rv
	}

	rv.sections = function (_x){
	if (!_x) return sections

	sections = _x
	n = sections.size()

	d3.select(window)
	.on('scroll.gscroll' + eventId, reposition)
	.on('resize.gscroll' + eventId, resize)
	.on('keydown.gscroll' + eventId, keydown)

	resize()
	d3.timer(function() {
	reposition()
	return true
	})

	return rv
	}

	d3.rebind(rv, dispatch, "on")

	return rv
	}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
	<script src="graph-scroll.js"></script>
	<style>
	body{
	width: 900px;
	margin: 0px auto;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	#container, #container2{
	position: relative;
	width: 100%;
	overflow: auto;
	}

	#sections, #sections2{
	width: 340px;
	float: left;
	}

	#sections > div, #sections2 > div{
	background: white;
	opacity: .2;
	margin-bottom:120px;
	}

	#sections > div.graph-scroll-active, #sections2 > div.graph-scroll-active{
	opacity: 1;
	}


	#graph, #graph2{
	float: left;
	margin-left: 40px;
	}

	#graph.graph-scroll-fixed, #graph2.graph-scroll-fixed{
	position: fixed;
	top: 0px;
	margin-left: 380px;
	}

	#graph.graph-scroll-below, #graph2.graph-scroll-below {
	position: absolute;
	bottom: 0px;
	margin-left: 380px;
	}

	h1{
	margin: 50px;
	}

	h1, h3{
	text-align: center;
	}

	</style>
	</head>

	<body>
	<h1>Header</h1>
	<h3>Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet</h3>
	<div id='container'>
	<div id='sections'>
	<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.</p>
	</div>
	<div>Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet. Mauris feugiat neque eget mi aliquam pellentesque. Aenean augue est, tincidunt at justo eget, pretium ultrices dolor. Cras nec nisl metus. Etiam venenatis id turpis ac consectetur. In a rhoncus arcu, blandit sodales nulla.
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.</p>
	</div>
	<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.
	</div>

	</div>

	<div id='graph'></div>

	</div>
	<h1>Section without scroller</h1>
	<h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna.</h3>
	<h1>Second scroller</h1>

	<div id='container2'>
	<div id='sections2'>
	<div>Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet. Mauris feugiat neque eget mi aliquam pellentesque. Aenean augue est, tincidunt at justo eget, pretium ultrices dolor. Cras nec nisl metus. Etiam venenatis id turpis ac consectetur. In a rhoncus arcu, blandit sodales nulla. </div>
	<div>Morbi lobortis diam ligula, ut varius leo facilisis id. Integer rutrum orci eu magna venenatis, vel scelerisque arcu ultrices. Vestibulum sit amet eros sem.</div>
	<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet. Mauris feugiat neque eget mi aliquam pellentesque. Aenean augue est, tincidunt at justo eget, pretium ultrices dolor. Cras nec nisl metus. Etiam venenatis id turpis ac consectetur. In a rhoncus arcu, blandit sodales nulla. </div>
	<div>Morbi lobortis diam ligula, ut varius leo facilisis id. Integer rutrum orci eu magna venenatis, vel scelerisque arcu ultrices. Vestibulum sit amet eros sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper tempus sem, non consectetur nisi finibus ac. Maecenas suscipit mattis turpis et tristique. Phasellus lectus dolor, fermentum eget rutrum a, feugiat sed tellus. Vivamus convallis nec nulla vitae volutpat. Etiam ullamcorper nisl in justo pulvinar, at tincidunt odio ullamcorper. Donec posuere lobortis lacus ut scelerisque. Nullam a sodales magna. Phasellus nec odio arcu. Etiam sollicitudin nec velit id mollis. Vestibulum fringilla, nunc ut mollis interdum, sem risus semper nisl, vel faucibus purus turpis quis diam. Morbi vitae dolor vestibulum, iaculis eros quis, tristique justo. Pellentesque eu libero ultrices tellus consectetur tempor. Mauris pulvinar felis augue, at dapibus nulla facilisis sit amet. Nunc vitae hendrerit metus. Suspendisse dignissim quam at auctor imperdiet.Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet. Mauris feugiat</div>
	</div>
	<div id='graph2'></div>
	</div>
	<h1>Footer</h1>
	<h3>Praesent ut turpis sed orci cursus pharetra. Sed imperdiet sem at odio vulputate, ut mollis sem porta. Mauris tempor porta lorem, at suscipit felis fringilla sit amet. Mauris feugiat neque eget mi aliquam pellentesque.</h3>
	<script>
	var width = 500,
	height = 450,
	r = 40;

	var svg = d3.select('#graph')
	.append('svg')
	.attr({width: width, height: height});

	var text = svg.append('text')
	.attr({x: width/2, y: height/2, "font-family":"sans-serif", "font-size":"20px", fill:"red", "text-anchor":"middle"});

	var gs = graphScroll()
	.container(d3.select('#container'))
	.graph(d3.selectAll('#graph'))
	.sections(d3.selectAll('#sections > div'))
	.on('scroll', function(i, d){
	text.text("First scroller, Section: " + i + ", Progress: " + d.toFixed(3));

	});


	var svg2 = d3.select('#graph2')
	.append('svg')
	.attr({width: width, height: height});

	var text2 = svg2.append('text')
	.attr({x: width/2, y: height/2, "font-family":"sans-serif", "font-size":"20px", fill:"blue", "text-anchor":"middle"});

	var gs2 = graphScroll()
	.container(d3.select('#container2'))
	.graph(d3.selectAll('#graph2'))
	.sections(d3.selectAll('#sections2 > div'))
	.on('scroll', function(i, d){
	text2.text("Second scroller, Section: " + i + ", Progress: " + d.toFixed(3));
	});

	</script>
	</body>