Browsing large image datasetsthrough Voronoi diagramsPaolo Brivio, Marco Tarini, Paolo Cignoni

• Fairly large datasets (i.e. 1000s images)• cannot be all visible at the same time

• Non-uniform image aspect ratio• landscape vs portrait• image orientation

• Total ordering• e.g. time of shot, some ordering defined over calibration,

user-defined sequence, etc.• Allow to specify per-image importance• i.e. each image represents a subset of the dataset

Targeted image datasets

• Rectangular grid of image thumbnails• [opt] on scrolling panels

Conventional image browsers (fullscreen)

Explorer

by Microsoft

Google

Image

by Google

FastStone

Picasa3

by Google

• Sequence of image thumbnails• [opt] scrollbars or buttons

PhotoC

loudby IS

TI-CN

RFastS

toneConventional image browsers (thumbnail bars)

Picasa3 by G

oogle

Other drawbacks: non-uniform aspect ratios

wasted space

Google Im

age

A new type of thumbnail bar

focusimage

Thumbnail sizes

focusimage

far from focus:small thumbnails

near to focus:large thumbnails

Thumbnail sizes

focusimage

thum

bnai

l siz

e

distance from focusin image list0

(focus image)±10 ±20

Clustering images

focusimage

far from focus:each thumbnail

represents many images

near to focus:1 thumbnailfor 1 image

Selecting visible images

focusimage

41 2 3 5 6 7

visibleimage

hiddenimage

repr

esen

tativ

enes

s

imagenumber

custo

m

fuctio

n

focus

Spatial ordering

focusimage

previous imagesin the ordering

following imagesin the ordering

x-axis: image ordering respected

y-ax

is:

arbi

trar

y

• Define a parametric domain in which the ordering is enforced• Arbitrary thumbnail-bar shape

custom parametric

function

Not only horizontal thumbnail bars

Parametric domain

Thumbnail-bar shape

enforce ordering

Transitions

focusimage

new focus

focusimage

Packing of thumbnails• arbitrary bar shape• irregular shaped

thumbnails• varying size• fitting

aspect/orientation• image ordering respected• 1 thumbnail per image

cluster

Transitions

newfocus

Packing of thumbnails• arbitrary bar shape• irregular shaped

thumbnails• varying size• fitting

aspect/orientation• image ordering respected• 1 thumbnail per image

cluster

Animated transition

withtemporal

coherence

Autorecentering Voronoi diagrams

• Voronoi diagram:• given a set of 2D “seeds” inside a 2D figure F• partition F into as many “regions”• a point belongs to the region of the closest seed

• Autorecentering step (Lloyd relaxation):• move seed (●) of each region in its barycenter (+)

x nx 1

Taming autorecentering Voronoi diagrams

Taming autorecentering Voronoi diagrams 1/2

• Weighting for region size differentiation• Power Diagram

• Dynamic weight balancing • match required region sizes• smooth transitions

• including: smooth appear/disappear of regions• Ordering enforcing (over “x”)• interleaved with recentering step

• Anisotropy: make regions appropriate• …aspect ratio• …orientation (non axis-aligned)

Taming autorecentering Voronoi diagrams 2/2

• Stabilization• prevent oscillations

• Small extra forces• pulling regions toward expected positions• accelerate convergence

• Accept user “dragging” mouse gesture• Real time computation• efficient GPU implementation

Tamed autorecentering Voronoi diagrams

Packing of thumbnails• arbitrary bar shape• irregular shaped

thumbnails• varying size• fitting

aspect/orientation• image ordering respected• 1 thumbnail per image

cluster

optional bulge-out effect

Animated transition

withtemporal

coherence

Thumbnail creationor

igin

al

imag

ere

gion

sh

ape

+ resizing- cropping

- resizing+

cropping

+

Thumbnail creation: with per-image orientationor

igin

al

imag

ere

gion

sh

ape

+ resizing- cropping

- resizing+

cropping

+

Example

More examples