Visualization Systems & Toolkits

Transcription

1 Visualization Systems & Toolkits 8803DV CS/MGT April 10, 2017

2 Systems/tools that help people create visualizations or use visualizations to help people explore and analyze data. Toolkits are components/libraries/packages that help developers/designers build these visualization systems.

3 Data Exploration and Analysis Tools Visualization Authoring Tools Toolkits and Grammars

4 Data Exploration and Analysis Tools Visualization Authoring Tools Toolkits and Grammars

5 Automated exploratory analysis tools Semi-automated visual analysis tools

6 Automated exploratory analysis tools Semi-automated visual analysis tools

7 Microsoft Power BI Video

8 Microsoft Power BI Naturalistic data analysis Support complex workflows Integrate multiple data sources Automatic dashboards

9 Video Voyager: Exploratory Analysis via Faceted Browsing of Visualization Recommendations. Kanit Wongsuphasawat, Dominik Moritz, Anushka Anand, Jock Mackinlay, Bill Howe, Jeffrey Heer IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2016

10 Exploratory visualizations to start with Recommendations of attributes and charts Great for EDA

11 Ecoxight Video

12 Ecoxight Network visualizations Beyond node-link diagrams (time, geo, etc.)

13 Automated exploratory analysis tools Semi-automated visual analysis tools

14 Interactive Data Exploration and Analysis Tools

15 Data Exploration and Analysis Tools Visualization Authoring Tools Toolkits and Grammars

16 Customization & Control? Data Exploration and Analysis Tools Visualization Authoring Tools Toolkits and Grammars

17 Data Exploration and Analysis Tools Visualization Authoring Tools Toolkits and Grammars

18 ivisdesigner Video Ren, Donghao, Tobias Hollerer, and Xiaoru Yuan ivisdesigner: Expressive Interactive Design of Information Visualizations. IEEE Transactions on Visualization and Computer Graphics PP (99): 1 1

19 ivisdesigner Programming free custom visualizations Drawing tool style interactions Supports tons of visualizations

20 Data-Driven Guides Video Data-Driven Guides: Supporting Expressive Design for Information Graphics Nam Wook Kim, Eston Schweickart, Zhicheng Liu, Mira Dontcheva, Wilmot Li, Jovan Popovic, Hanspeter Pfister IEEE Transactions on Visualization and Computer Graphics (Proceedings InfoVis '16) 2016

21 Data-Driven Guides Infographics (remember them?) Incorporating data into images enables new levels of customization Photoshop like interaction

22 Data Exploration and Analysis Tools Visualization Authoring Tools Toolkits and Grammars

23 Data Exploration and Analysis Tools Interaction & Reproducibility? Visualization Authoring Tools Toolkits and Grammars

24 Data Exploration and Analysis Tools Visualization Authoring Tools Toolkits and Grammars

25 Video Heer, Jeffrey, Stuart K. Card, and James A. Landay. "Prefuse: a toolkit for interactive information visualization." In Proceedings of the SIGCHI conference on Human factors in computing systems, pp ACM, 2005.

26 Fine-grained building blocks for constructing visualizations Includes layout algorithms, navigation and interaction techniques Java-based Laid the foundation for other toolkits (e.g., Flare) and several visualization systems (e.g., DOI Trees (AVI 04), Vizster (InfoVis 05))

27 Bostock, Michael, and Jeffrey Heer. "Protovis: A graphical toolkit for visualization." IEEE transactions on visualization and computer graphics 15, no. 6 (2009).

28 New toolkit following a declarative model - Focus on the what more than the how Simple grammar of graphical primitives called marks

29 Bostock, Michael, Vadim Ogievetsky, and Jeffrey Heer. "D³ data-driven documents." IEEE transactions on visualization and computer graphics 17, no. 12 (2011):

30 Uses explicitly of web standards such as Scalable Vector Graphics (SVG) rather than a proprietary marks graphics set Not just an InfoVis toolkit TONS of examples and very well documented!!

31

32 D3.js in action Type Count Sedan 50 SUV 20 Sports 30 Minivan 100

33 D3.js in action Type Sedan 50 SUV 20 Sports 30 Minivan 100 Count < 20 lines

34 Satyanarayan, Arvind, Ryan Russell, Jane Hoffswell, and Jeffrey Heer. "Reactive vega: A streaming dataflow architecture for declarative interactive visualization." IEEE transactions on visualization and computer graphics 22, no. 1 (2016):

35 ... { { "name": "y", "type": "linear", "range": "height", "domain": {"data": "table", "field": "y"}, "nice": true { "width": 400, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ { "name": "table", "values": [ {"x": 1, "y": 28}, {"x": 2, "y": 55}, {"x": 3, "y": 43}, {"x": 4, "y": 91}, {"x": 5, "y": 81}, {"x": 6, "y": 53}, {"x": 7, "y": 19}, {"x": 8, "y": 87}, {"x": 9, "y": 52}, {"x": 10, "y": 48}, {"x": 11, "y": 24}, {"x": 12, "y": 49}, {"x": 13, "y": 87}, {"x": 14, "y": 66}, {"x": 15, "y": 17}, {"x": 16, "y": 27}, {"x": 17, "y": 68}, {"x": 18, "y": 16}, {"x": 19, "y": 49}, {"x": 20, "y": 15} ] } ], "scales": [ { "name": "x", "type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} },... } ], "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ { "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0} }, "update": { "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } } ] }

36 ... { { "width": 400, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ { Less programming "name": "table", "values": [ {"x": 1, "y": 28}, {"x": 2, "y": 55}, {"x": 3, "y": 43}, {"x": 4, "y": 91}, {"x": 5, "y": 81}, {"x": 6, "y": 53}, {"x": 7, "y": 19}, {"x": 8, "y": 87}, Very verbose {"x": 9, "y": 52}, {"x": 10, "y": 48}, {"x": 11, "y": 24}, {"x": 12, "y": 49}, {"x": 13, "y": 87}, {"x": 14, "y": 66}, {"x": 15, "y": 17}, {"x": 16, "y": 27}, {"x": 17, "y": 68}, {"x": 18, "y": 16}, {"x": 19, "y": 49}, {"x": 20, "y": 15} ] } ], "scales": [ { "name": "x", "type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} },... { more "name": "y", "type": "linear", "range": "height", "domain": {"data": "table", "field": "y"}, specification "nice": true } ], "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ { "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0} }, "update": { "fill": {"value": "steelblue"} }, "hover": {

37 Video Satyanarayan, Arvind, Dominik Moritz, Kanit Wongsuphasawat, and Jeffrey Heer. "Vega-lite: A grammar of interactive graphics." IEEE Transactions on Visualization and Computer Graphics 23, no. 1 (2017):

38 { "description": "A simple bar chart with embedded data.", "data": { "values": [ {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43}, {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53}, {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52} ] }, "mark": "bar", "encoding": { "x": {"field": "a", "type": "ordinal"}, "y": {"field": "b", "type": "quantitative"} } }

39 { "description": "A simple bar chart with embedded data.", "data": { "values": [ {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43}, {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53}, {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52} ] }, "mark": "bar", "encoding": { "x": {"field": "a", "type": "ordinal"}, "y": {"field": "b", "type": "quantitative"} } } Online Editor

40 Toolkits targeting specific components

41 Toolkits targeting specific components - Visualization Recommendation engines Demo

42 Toolkits targeting specific components - Re-ordering layouts Demo Fekete, Jean-Daniel. "Reorder. js: A javascript library to reorder tables and networks." In IEEE VIS

43 Toolkits targeting specific components - Natural language interaction (Shameless plug) Video Srinivasan, Arjun, and John Stasko. "NL4DV: Toolkit for Natural Language Driven Data Visualization."

44 Toolkits targeting specific components - Visualization Recommendation engines - Re-ordering layouts - Natural language interaction... and much more

45 Data Exploration and Analysis Tools Visualization Authoring Tools Toolkits and Grammars

46 Data Exploration and Analysis Tools Visualization Authoring Tools Need programming Toolkits and Grammars

47 ?? Data Exploration and Analysis Tools Visualization Authoring Tools Toolkits and Grammars

48 Customization Data Exploration and Analysis Tools Visualization Authoring Tools Toolkits and Grammars

49 Data Exploration and Analysis Tools Visualization Systems & Toolkits Visualization Authoring Tools Toolkits and Grammars