Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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!

Slide 3

Slide 3 text

Dataset Small Multiples Facets Subsets

Slide 4

Slide 4 text

Dataset Small Multiples Facets Subsets

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Cover Previews Items

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

A Design Space For Visual Piling

Slide 15

Slide 15 text

A Design Space For Visual Piling

Slide 16

Slide 16 text

A Design Space For Visual Piling

Slide 17

Slide 17 text

A Design Space For Visual Piling

Slide 18

Slide 18 text

A Design Space For Visual Piling

Slide 19

Slide 19 text

A Design Space For Visual Piling

Slide 20

Slide 20 text

+ 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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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()

Slide 24

Slide 24 text

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()

Slide 25

Slide 25 text

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 = =

Slide 26

Slide 26 text

[ { 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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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!