Bounded Panning in D3

Bounded Panning in D3(computationallyendowed.com)

55 points by sheriff 13 years ago | 4 comments

azundo 13 years ago |

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 13 years ago |

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 13 years ago | |

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 13 years ago |

Spiros!!!

// 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]); }