block by GerHobbelt 3732893

d3.js: mouse drag a la iphone: decceleration

Full Screen

User Interface

A huge image is shown on screen; you can pan/zoom the image to see all the detail or the entire image at once.

Each of the possible operations can be performed by one of several mouse actions. Some operations have only one type of mouse activity.

When the operation can be performed using the keyboard, then the key bindings are listed as well.

Swipe

Click and drag the image (background), release during drag, i.e. act it out as a swipe movement.

keys: —

Pan

Either swipe (see above) or drag the image (background) and hold in place, then release, to pan the image around.

You may also move the mouse near the ‘edges’ to auto-pan.

keys: [Page Up], [Page Down], [Arrow Up], [Arrow Down]

Centering

Click somewhere to center on that pixel.

keys: —

Zoom

Zooming in/out:

keys: [+], [-], [Keypad +], [Keypad -]

Reset

Right click.

keys: [END], [E]

TODO

Create and test mobile/tablet actions for each of the operations.

index.html

README.json

progress.gif