Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Bounded Panning in D3

computationallyendowed.com

Post reply on HN
Print view View original

1–5 of 5 posts

Re: Bounded Panning in D3

#2

Post by 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.

Re: Bounded Panning in D3

#3

Post by 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]  xupperlimit) {
      // if moving outside of upper bound, set max of domain to upper, keeping domain interval the same
      svg.x.domain([xupperlimit - xinterval, xupperlimit]);
    }

Re: Bounded Panning in D3

#4

Post by seliopou »

danso wrote: post #2

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…

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

Post reply on HN