README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Tideline-style virtual scrolling

A toy example to demonstrate the virtual scrolling implemented in tideline.

  

  

## index.html
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js'></script>
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <style type="text/css">
      #main {
        width: 800px;
        height: 480px;
        margin: 0 auto;
        background-color: #f5f5f5;
      }

      #nav {
        width: 800px;
        height: 60px;
        margin: 0 auto;
        background-color: #d6d6d6;
        border-bottom: 5px white solid;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }

      .button-holder {
        margin-top: 8px;
      }
      button {
        margin-left: 5px;
        margin-right: 5px;
      }

      #axisGroup path {
        fill: none;
        stroke: none;
      }

      #axisGroup line {
          fill: none;
          stroke: #333333;
          shape-rendering: crispEdges;
      }
      #axisGroup text {
        font-family: sans-serif;
        text-transform: lowercase;
        fill: #333333;
      }
    </style>
    <title>Tideline scrolling</title>
  </head>
  <body>
    <div id="main">
      <div id="nav">
        <div class="button-holder">
          <button id="backbtn" type="button" class="btn btn-default">Back</button>
        </div>
        <div class="button-holder">
          <button id="forwardbtn" type="button" class="btn btn-default">Forward</button>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      // some variables
      var w = 800, h = 410, axis = 40, scroll = 20;
      var barWidth = 25;

      // add the SVG
      var svg = d3.select('#main').append('svg')
        .attr({
          width: w,
          height: h + scroll
        });

      // let's make some data!
      // first, dates for our x-plotting
      var now = new Date();
      var s = d3.time.year.floor(now), e = d3.time.year.ceil(now);
      var dates = d3.time.hour.range(s, e);
      // drop these in along with random numbers from 1-100 for the y-plotting
      var data = _.map(dates, function(date) {
        return {
          x: date.valueOf(),
          y: Math.ceil(Math.random() * 100)
        };
      });

      // set up crossfilter for data filtering
      var filterData = crossfilter(data);
      var dataByDate = filterData.dimension(function(d) { return d.x; });

      // set up scales
      var xScale = d3.time.scale()
        .domain([s, d3.time.day.offset(s, 1)])
        .range([0, w]);
      // the xScale gets modified on zoom, but we need to plot all bars based on the original
      var origXScale = xScale.copy();

      var extent = d3.extent(data, function(d) { return d.y; });

      var yScale = d3.scale.linear()
        .domain(extent)
        .range([h - scroll, axis]);

      // change bar color depending on height, just for funsies
      var funScale = d3.scale.linear()
        .domain(extent)
        .range(['#302e86', '#b6211d']);

      var scrollGroup = svg.append('g')
        .attr('id', 'scrollGroup');

      var barsGroup = scrollGroup.append('g')
        .attr('id', 'barsGroup');

      // initial plot with 1-day buffer on each side
      plotBars(dataByDate.filter([d3.time.day.offset(s, -1).valueOf(), d3.time.day.offset(s, 2).valueOf()]).top(Infinity));

      // factor out bar plotting into a function that binds data
      // and creates or deletes bars as necessary given the current data
      function plotBars(data) {
        var currBars = barsGroup.selectAll('rect')
          .data(data, function(d) { return d.x; });

        currBars.enter()
          .append('rect')
          .attr({
            x: function(d) {
              return origXScale(d.x) - barWidth/2;
            },
            y: function(d) {
              return yScale(d.y);
            },
            width: barWidth,
            height: function(d) {
              return h - yScale(d.y);
            },
            fill: function(d) {
              return funScale(d.y);
            }
          });

        currBars.exit().remove();
      }

      // use a dispatcher to handle and trigger refiltering data and plotting bars
      var dispatcher = d3.dispatch('plotBars');
      dispatcher.on('plotBars', function(date) {
        // refilter data based on current position and plot
        plotBars(dataByDate.filter([d3.time.day.offset(date, -1).valueOf(), d3.time.day.offset(date, 2).valueOf()]).top(Infinity));
      });

      // add an axis
      // customize the time formatting because zero-padding bugs the stuffing out of me...
      // i.e., this is not necessary ;)
      var format = d3.time.format.multi([
        [".%L", function(d) { return d.getMilliseconds(); }],
        [":%S", function(d) { return d.getSeconds(); }],
        ["%-I:%M", function(d) { return d.getMinutes(); }],
        ["%-I %p", function(d) { return d.getHours(); }],
        ["%a %-d", function(d) { return d.getDay() && d.getDate() != 1; }],
        ["%b %-d", function(d) { return d.getDate() != 1; }],
        ["%b", function(d) { return true; }]
      ]);

      // here's the good stuff
      // the xScale for the axis needs to use the entire domain
      // and the entire range of our reallllly wide scrollGroup
      // which we can find the end of using the xScale
      var axisScale = d3.time.scale()
        .domain([s,e])
        .range([0, xScale(e)]);

      var xAxis = d3.svg.axis()
        .scale(axisScale)
        .ticks(d3.time.hours, 6)
        .tickFormat(format)
        .innerTickSize(6)
        .outerTickSize(0);

      scrollGroup.append('g')
        .attr('id', 'axisGroup')
        .call(xAxis);

      // now let's set up panning via d3's zoom behavior
      var maxTranslation = 0, minTranslation = -xScale(d3.time.day.offset(e, -1));

      // we only want panning to move the scroll thumb if panning is the source of scrolling
      // not if the scroll thumb itself is driving the panning
      // so we toggle a bool true/false to control this
      var moveScrollThumb = true;

      var pan = d3.behavior.zoom()
        // setting scaleExtent to [1,1] disables zoom
        // i.e., min zoom is 1, max zoom is 1 ("You can have any color, as long as it's black")
        .scaleExtent([1,1])
        .x(xScale)
        .on('zoom', function() {
          var e = d3.event;
          // don't let someone pan farther back in time than the beginning of the scale
          if (e.translate[0] < minTranslation) {
            e.translate[0] = minTranslation;
          }
          // don't let someone pan farther forward in time than the end of the scale
          else if (e.translate[0] > maxTranslation) {
            e.translate[0] = maxTranslation;
          }
          pan.translate([e.translate[0], 0]);
          scrollGroup.attr('transform', 'translate(' + e.translate[0] + ',0)');
        })
        .on('zoomend', function() {
          // adjust the position of the scroll thumb if we panned by click-and-drag or forward/back button
          var current = xScale.domain()[0];
          if (moveScrollThumb) {
            scrollBar.select('circle').attr('cx', function(d) {
              return scrollScale(current);
            });
          }
          moveScrollThumb = true;
          // trigger refilter and plot of data based on current date, updated xScale
          dispatcher.plotBars(current);
        });

      svg.call(pan);

      // now we add programmatic panning by a day backwards and forwards
      // to move one day per button press, we find the width that equals scrolling a day
      // this is equal to the xScale domain, which is just the width
      var scrollWidth = w;

      function panBack() {
        var currentTranslation = pan.translate()[0];
        scrollGroup.transition()
          .duration(500)
          .tween('zoom', function() {
            // positive translations move the scrollGroup right === backwards in time
            var ix = d3.interpolate(currentTranslation, currentTranslation + scrollWidth);
            return function(t) {
              pan.translate([ix(t), 0]);
              pan.event(scrollGroup);
            };
          });
      }
      d3.select('#backbtn').on('click', panBack);

      function panForward() {
        var currentTranslation = pan.translate()[0];
        scrollGroup.transition()
          .duration(500)
          .tween('zoom', function() {
            // negative translations move the scrollGroup left === forwards in time
            var ix = d3.interpolate(currentTranslation, currentTranslation - scrollWidth);
            return function(t) {
              pan.translate([ix(t), 0]);
              pan.event(scrollGroup);
            };
          });
      }
      d3.select('#forwardbtn').on('click', panForward);

      // now the scroll bar
      var scrollThumbRadius = 8, scrollColor = '#333333', scrollHeight = (h + scroll) - scroll/2;
      // create a scale for the scrollbar representing the entire time domain of the available data
      var scrollScale = d3.time.scale()
        .domain([s,e])
        .range([scrollThumbRadius, w - scrollThumbRadius]);

      var scrollBar = svg.append('g')
        .attr('id', 'scrollBar');

      scrollBar.append('line')
        .attr({
          x1: 0,
          x2: w,
          y1: scrollHeight,
          y2: scrollHeight,
          stroke: scrollColor,
          'stroke-width': '1.5px'
        });

      var dxLeftest = scrollThumbRadius;
      var dxRightest = w - scrollThumbRadius;

      var drag = d3.behavior.drag()
        .origin(function(d) { return d; })
        .on('dragstart', function() {
          d3.event.sourceEvent.stopPropagation();
        })
        .on('drag', function(d) {
          moveScrollThumb = false;
          d.x += d3.event.dx;
          // don't allow the user to pull the thumb off the right end of the scale
          if (d.x > dxRightest) {
            d.x = dxRightest;
          }
          // or off the left end
          if (d.x < dxLeftest) {
            d.x = dxLeftest;
          }
          // adjust the position of the scroll thumb according to the drag
          d3.select(this).attr('cx', function(d) {
            return d.x;
          });
          // find the date that represents the current position of scroll thumb
          var date = scrollScale.invert(d.x);
          // figure out the pixel offset between current location of data view
          // and the current date of the scroll thumb
          var currentTranslation = -xScale(date) + pan.translate()[0];
          // trigger a pan with the calculated offset
          pan.translate([currentTranslation, 0]);
          pan.event(scrollGroup);
        });

      // make a scroll thumb
      scrollBar.selectAll('circle')
        .data([{x: scrollThumbRadius}])
        .enter()
        .append('circle')
        .attr({
          fill: scrollColor,
          cx: scrollScale(s),
          cy: scrollHeight,
          r: scrollThumbRadius
        })
        .call(drag);

    </script>
  </body>
</html>

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png