Charticulator : Interactive Construction of Bespoke Chart Layouts - - PowerPoint PPT Presentation

▶
charticulator interactive construction of bespoke chart
SMART_READER_LITE
LIVE PREVIEW

Charticulator : Interactive Construction of Bespoke Chart Layouts - - PowerPoint PPT Presentation

Jan 04, 2023 1.45k likes •1.75k views

Charticulator : Interactive Construction of Bespoke Chart Layouts Donghao Ren 1,2 , Bongshin Lee 2 , and Matthew Brehmer 2 1 University of California, Santa Barbara 2 Microsoft Research 2 Create highly customized visualizations for

slide-1
SLIDE 1

Charticulator: Interactive Construction of Bespoke Chart Layouts

Donghao Ren1,2, Bongshin Lee2, and Matthew Brehmer2

1 University of California, Santa Barbara 2 Microsoft Research

slide-2
SLIDE 2

Create highly customized visualizations for presentation

2

slide-3
SLIDE 3

Brief overview of current tools

Expressivity Template Editors Shelf Configuration Interactive Authoring Custom Code

Data Illustrator Lyra iVisDesigner Less expressive Very expressive

3

slide-4
SLIDE 4

Interactive authoring – Data Mapping

4

Lyra [A. Satyanarayan, J. Heer, 2014] iVisDesigner [D. Ren et al., 2014]

slide-5
SLIDE 5

Interactive authoring – Expressive Glyphs

5

Data Ink [H. Xia et al., 2018] Data-Driven Guides [N. W. Kim et al., 2016] InfoNice [Y. Wang et al., 2018]

slide-6
SLIDE 6

Interactive authoring – Partition & Repetition

6

Data Illustrator [Z. Liu et al., 2018]

slide-7
SLIDE 7

Layout and Linking are underexplored

7

slide-8
SLIDE 8
  • “Articulate” as Layout

Charticulator = Chart + Articulator

8

  • “Articulate” as Linking

Spiral Layout Nested Layout Stacking Circle Packing Connect with Link Data Connecting by Series

slide-9
SLIDE 9

Demo

9

* Original Design: Weather Radials Poster by Raureif

slide-10
SLIDE 10
  • Layouts as special data transforms
  • Implications:
  • Hard to switch layout once graphics has been created
  • Difficult to combine layout transforms
  • Most other approaches focus on specific visualizations
  • Graph, tree, word cloud, etc.

Existing approaches for specifying layouts

10

Data Layout Transform Graphics

data attributes layout attributes

slide-11
SLIDE 11

Compose complex layouts using partial specifications

11

Design individual marks

e.g., Map data to width & height

Combine marks into a Glyph

e.g., Put the star at the center

Layout the glyphs

e.g., Stack the glyphs along a custom curve

* Design inspired by Best Bookshelf [Tanyoung Kim]

slide-12
SLIDE 12

Compose complex layouts using partial specifications

12

Design individual marks

e.g., Map data to width & height

Combine marks into a Glyph

e.g., Put the star at the center

Layout the glyphs

e.g., Group the glyphs by “Year”, within each year, stack horizontally

* Design inspired by Best Bookshelf [Tanyoung Kim]

slide-13
SLIDE 13

Compose complex layouts using partial specifications

13

Design individual marks

e.g., Map data to width & height

Combine marks into a Glyph

e.g., Put the star at the center

Layout the glyphs

e.g., Group the glyphs by “Year”, within each year, stack horizontally

* Design inspired by Best Bookshelf [Tanyoung Kim]

slide-14
SLIDE 14

Compose complex layouts using partial specifications

14

Horizontal: Group by “MapX” Vertical: Group by “MapY” Horizontal layout for each cell

slide-15
SLIDE 15

Coordinate Systems

15

Cartesian Coordinates Polar Coordinates

slide-16
SLIDE 16

Coordinate Systems

16

Curve Coordinates (Spiral) Curve Coordinates (Hand-drawn)

slide-17
SLIDE 17
  • Problem: there is no direct way of computing the layout given a set of

partial specifications

  • Our solution: constraint-based layout algorithm

Implementation

17

slide-18
SLIDE 18

Constraint-based layout algorithm

18

Partial Layout Specification Mathematical Constraints A.x2 = B.x1

A B

Snap G1 G2 G3 G4 Stack Horizontally

G1.x2 + Gap = G2.x1 G2.x2 + Gap = G3.x1 G3.x2 + Gap = G4.x1

slide-19
SLIDE 19
  • Sparse conjugate gradient algorithm
  • Implemented using Eigen*, compiled into WebAssembly for performance
  • https:/

/github.com/donghaoren/lscg-solver

* Eigen: http:/ /eigen.tuxfamily.org/index.php?title=Main_Page

Constraint solver

19

Constraints Keep the current positions

min

x ||Ax − b||2 + λ||x − x0||2

slide-20
SLIDE 20
  • Constraint-based layout specification generates reusable designs
  • Adapt to different canvas sizes
  • Adapt to new (compatible) datasets

Creating reusable templates

20

Microsoft Power BI Charticulator

slide-21
SLIDE 21

Beyond the paper

21

slide-22
SLIDE 22

Filter & Grouping & Multiple Glyphs

22

  • Support composite charts
slide-23
SLIDE 23
  • Support small multiples

Nested Visualizations

23

slide-24
SLIDE 24
  • Use chart templates as marks

Nested Visualizations

24

Create a single instance Export & Reuse

slide-25
SLIDE 25

Demo

25

slide-26
SLIDE 26
  • Available online:
  • https:/

/charticulator.com/

  • Open Source (MIT license):
  • https:/

/github.com/Microsoft/charticulator

Deployment

26

slide-27
SLIDE 27
  • Number of users per day (average: 108)

Deployment

27

slide-28
SLIDE 28
  • Incorporate multi-modal interactions
  • Pen & touch
  • Speech
  • Support more sophisticated layout techniques, e.g.,
  • Edge bundling
  • Treemap
  • Force-directed layout algorithm

Future directions

28

slide-29
SLIDE 29
  • Links to Charticulator
  • https:/

/charticulator.com/

  • https:/

/github.com/Microsoft/charticulator

Thanks! Questions?

29