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
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!
3. Dataset Small Multiples Facets Subsets
4. Dataset Small Multiples Facets Subsets
10. Cover Previews Items
11. Piling Properties 1. Occlusion & Connectedness 2. Identity 3. Cohesion 4. Transcience
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
13. A Design Space For Visual Piling Following Five High-Level Analytical Task Generalized From Related Work
14. A Design Space For Visual Piling
15. A Design Space For Visual Piling
16. A Design Space For Visual Piling
17. A Design Space For Visual Piling
18. A Design Space For Visual Piling
19. A Design Space For Visual Piling
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
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
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
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()
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()
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 = =
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>!!#!$svg>' }, { src: '<svg>!!#!$svg>' }, ] (e.g., for D3) SVG (e.g., for D3) Renderes [ { src: 'image-01.jpg' }, { src: 'image-02.jpg' }, ] Images
27. [ { src: Float32Array }, { src: Float32Array }, ] Custom Renderes WebGL using Pixi.js
32. Piling is useful for interactive cluster and time series analysis Design space and library to guide the creation of new piling interfaces Summary
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!