

Bounded Panning in D3 - sheriff
http://computationallyendowed.com/blog/2013/01/21/bounded-panning-in-d3.html

======
azundo
It's useful to know how to manage this situation when you have zooming enabled
as well, as sometimes you want to zoom and pan in the x direction within
limits.

In this case you might go outside of your bounds with a zoom operation, so
translate won't be reliable when zooming too far out (as your domain will be
larger than your data bounds) so you'll have to limit the domain instead.

    
    
        // assuming xlowerlimit and xupperlimit variables.
        var currentDomain = svg.x.domain();
        var xinterval = currentDomain[1] - currentDomain[0];
        
        if (currentDomain[0] < xlowerlimit) {
          // if moving outside of lower bound, set min of domain to lower, keeping domain interval the same
          svg.x.domain([xlowerlimit, xlowerlimit + xinterval]);
        } else if (currentDomain[1] > xupperlimit) {
          // if moving outside of upper bound, set max of domain to upper, keeping domain interval the same
          svg.x.domain([xupperlimit - xinterval, xupperlimit]);
        }

------
danso
Implementation difficulties aside, isn't the ideal solution to provide well-
executed zooming ability on the data, a la Google Finance charts?

<http://www.google.com/finance?cid=694653>

The problem with view panning is that you are not able to easily compare the
viewable scope of data with the entire dataset. With a zoomable view, some
granularity is lost...but I suspect the majority of use-cases would get more
benefit out of seeing the "big picture" than merely being able to see each
datapoint...and if seeing each datapoint was important, that kind of
specificity is better implemented through tabular data rather than chart
visualization.

~~~
seliopou
Definitely. Focus + context is the first technique you should consider using
to solve the data visualization problem I described. However, my goal was to
explain how to do bounded panning in D3, which is useful when solving other,
more complex data visualization problems. To simplify the explanation, I
picked a simple problem.

Here's a focus + context example in D3: <http://bl.ocks.org/1667367>

------
dataisfun
Spiros!!!

