Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Ab6e0a2ba101a2eb0a975b1ef915e85a?s=128

Fritz Lekschas

October 27, 2020
Tweet

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

  5. None
  6. None
  7. None
  8. None
  9. None
  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
  28. None
  29. None
  30. None
  31. None
  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!