A Generic Framework and Library for Exploration of Small Multiples through Interactive Piling

Visual piling is a technique for interactive organization, exploration, and comparison of large collections of small multiples. Handling large numbers of small multiples imposes challenges on many analytic tasks like inspection, comparison, navigation, or annotation. To address these challenges, we lay out a design space and implemented a library called Piling.js for designing interactive piling interfaces.

Transcript

1. IEEE InfoVis 2020
   Fritz Lekschas, Ph.D. candidate

   Harvard University

   Xinyi Zhou, Wei Chen, Nils Gehlenborg,

   Benjamin Bach, and Hanspeter Pfister
   A Generic Framework and Library for
   Exploration of Small Multiples through
   Interactive Piling
   Interactive Piling
   

   View Slide

2. IEEE InfoVis 2020
   Fritz Lekschas, Ph.D. candidate

   Harvard University

   Xinyi Zhou, Wei Chen, Nils Gehlenborg,

   Benjamin Bach, and Hanspeter Pfister
   A Generic Framework and Library for
   Exploration of Small Multiples through
   Interactive Piling
   Interactive Piling
   On the Job Market

   This Fall!
   

   View Slide

3. Dataset Small Multiples
   Facets
   Subsets
   

   View Slide

4. Dataset Small Multiples
   Facets
   Subsets
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. Cover
    Previews Items
    

    View Slide

11. Piling Properties
    1. Occlusion & Connectedness
    2. Identity
    3. Cohesion
    4. Transcience
    

    View Slide

12. Literature Review
    Systematically reviewed 17 papers
    from HCI and VIS
    In HCI, piling has been studied as a
    technique for organizing documents
    In VIS, piling has been applied to
    matrix visualization for comparison
    Onset: Sadana et al., 2014
    Small Multipiles: Bach et al., 2014
    HiPiler: Lekschas et al., 2017
    

    View Slide

13. A Design Space For Visual Piling
    Following Five High-Level Analytical Task Generalized From Related Work
    

    View Slide

14. A Design Space For Visual Piling
    

    View Slide

15. A Design Space For Visual Piling
    

    View Slide

16. A Design Space For Visual Piling
    

    View Slide

17. A Design Space For Visual Piling
    

    View Slide

18. A Design Space For Visual Piling
    

    View Slide

19. A Design Space For Visual Piling
    

    View Slide

20. +
    Piling.js – A Library For Visual Piling
    https://piling.js.org
    items = [
    { src: 'image-01.jpg' },
    { src: 'image-02.jpg' },
    { src: 'image-03.jpg' },
    { src: 'image-04.jpg' }
    ]
    Data
    Renderer
    import { createImageRenderer }
    from 'piling.js'
    renderer = createImageRenderer()
    pilingJs(domElement, {
    items,
    renderer,
    pileItemOffset: [10,10],
    pileBorderSize:
    pile !" pile.items.length
    })
    View Specification
    and
    

    View Slide

21. Piling.js – A Library For Visual Piling
    https://piling.js.org
    items = [
    { src: 'image-01.jpg' },
    { src: 'image-02.jpg' },
    { src: 'image-03.jpg' },
    { src: 'image-04.jpg' }
    ]
    Data
    Renderer
    import { createImageRenderer }
    from 'piling.js'
    renderer = createImageRenderer()
    pilingJs(domElement, {
    items,
    renderer,
    pileItemOffset: [10,10],
    pileBorderSize:
    pile !" pile.items.length
    })
    View Specification
    

    View Slide

22. Piling.js – A Library For Visual Piling
    https://piling.js.org
    items = [
    { src: 'image-01.jpg' },
    { src: 'image-02.jpg' },
    { src: 'image-03.jpg' },
    { src: 'image-04.jpg' }
    ]
    Data
    Renderer
    import { createImageRenderer }
    from 'piling.js'
    renderer = createImageRenderer()
    pilingJs(domElement, {
    items,
    renderer,
    pileItemOffset: [10,10],
    pileBorderSize:
    pile !" pile.items.length
    })
    View Specification
    Interactions
    Common mouse gestures
    for manual grouping and arrangements
    

    View Slide

23. Piling.js – A Library For Visual Piling
    https://piling.js.org
    items = [
    { src: 'image-01.jpg' },
    { src: 'image-02.jpg' },
    { src: 'image-03.jpg' },
    { src: 'image-04.jpg' }
    ]
    Data
    Renderer
    import { createImageRenderer }
    from 'piling.js'
    renderer = createImageRenderer()
    pilingJs(domElement, {
    items,
    renderer,
    pileItemOffset: [10,10],
    pileBorderSize:
    pile !" pile.items.length
    })
    View Specification
    Interactions
    pilingJs.groupBy() & pilingJs.arrangeBy()
    

    View Slide

24. Piling.js – A Library For Visual Piling
    https://piling.js.org
    items = [
    { src: 'image-01.jpg' },
    { src: 'image-02.jpg' },
    { src: 'image-03.jpg' },
    { src: 'image-04.jpg' }
    ]
    Data
    Renderer
    import { createImageRenderer }
    from 'piling.js'
    renderer = createImageRenderer()
    pilingJs(domElement, {
    items,
    renderer,
    pileItemOffset: [10,10],
    pileBorderSize:
    pile !" pile.items.length
    })
    View Specification
    Interactions
    pilingJs.groupBy() & pilingJs.arrangeBy()
    

    View Slide

25. The Rendering Pipeline
    [{ src: [1,24,3,4], cat: 'A' },
    { src: [10,0,0,5], cat: 'B' }]
    Data
    items !" items.map(
    item !" Math.max(!!#item.src))
    Preview Aggregator
    items !" items.reduce(mean)
    Cover Aggregator
    src
    metadata
    src
    src
    src
    Cover

    Renderer
    Preview

    Renderer
    Item

    Renderer
    Items
    Previews
    Cover
    OPTIONAL
    =
    =
    

    View Slide

26. [
    { src: Float32Array },
    { src: Float32Array },
    ]
    Custom
    [
    { src: [1,3,3,7,0,0,10] },
    { src: [1,42,0,9,0,0,9] },
    ]
    Matrices
    [
    { src: '!!#!$svg>' },
    { src: '!!#!$svg>' },
    ]
    (e.g., for D3) SVG (e.g., for D3)
    Renderes
    [
    { src: 'image-01.jpg' },
    { src: 'image-02.jpg' },
    ]
    Images
    

    View Slide

27. [
    { src: Float32Array },
    { src: Float32Array },
    ]
    Custom
    Renderes
    WebGL using Pixi.js
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. Piling is useful for interactive cluster and time series analysis
    Design space and library to guide the creation of new piling interfaces
    Summary
    

    View Slide

33. PAPER, VIDEOS, DEMOS, & CODE
    vcg.seas.harvard.edu/pubs/piling
    piling.lekschas.de
    piling.js.org
    lekschas@seas.harvard.edu
    @flekschas
    lekschas.de
    CONTACT
    Thank You!
    

    View Slide