DataTweener: A Demonstration of a Tweening Engine for Incremental Visualization of Data Transforms Meraj Khanx Larry Xu; Arnab Nandix Joseph M. Hellerstein; The Ohio State Universityx University of California, Berkeley; fkhan.485,[email protected], flarry.xu,[email protected] ABSTRACT Qnew With the development and advancement of new data inter- action modalities, data exploration and analysis has become UI a highly interactive process situating the user in a session of successive queries. With rapidly changing results, it be- Qnew Qold Rold T comes difficult for the end user to fully comprehend trans- formations, especially the transforms corresponding to com- DataTweener Tweening Engine plex queries. We introduce \data tweening" as an informa- tive way of visualizing structural data transforms, presenting Qnew Rnew the users with a series of incremental visual representations of a resultset transformation. We present transformations DB as ordered sequences of basic structural transforms and vi- sual cues. The sequences are generated using an automated Figure 1: System design for a tweening-based query in- framework which utilizes differences between the consecutive terface. resultsets and queries in a query session. We evaluate the effectiveness of tweening as a visualization method through a user study. users get the right context and make the transformation easier to understand. This change can be brought about by 1. INTRODUCTION a single text query on traditional query interfaces or through a touch gesture on modern direct-manipulation touch-based Data analysis tasks often involve queries which produce interfaces [2, 3, 6]. Direct-manipulation interfaces require large changes in results for relatively small changes in the continuous visual feedback during user interaction to keep queries. Consider the case of the pivot transformation, a the user engaged [7]. Hence, for these modern interfaces, very popular and useful transformation for analytical pur- tweening is a hard requirement. poses. A small change in the query, e.g., changing from the We provide a formalized a visual grammar of basic struc- query Q1 to Q2 causes a large change in the resultset, T1 to tural transforms and visual cues in our work Data Tween- T12 as seen in Figure 3. ing [4], wherein we also presented a framework to generate Q1 = SELECT Id, Year, Dept ordered sequences of micro-operations from this grammar to FROM StudentEnrollment E; encode resultset transformations. The visual grammar is de- signed considering the design principles of animated graph- Q2 = SELECT * FROM ( ics [1, 9] and other works in perception research [8]. We SELECT Year, Dept visualize these ordered sequences as animated transforms FROM StudentEnrollment E) on the query interface described here. PIVOT (COUNT(Dept) FOR Dept IN ("ECE", "CSE")); Such large jumps in the result space can leave the users 2. SYSTEM disoriented as they can clearly notice something changed, but it is difficult to understand what the exact changes were The core of the data tweening based query interface is the and how they were caused. In such cases, tweening (an tweening engine incorporated in the client. When a user incremental visualization of the transformation) can help issues a new query Qnew, the UI passes the query to the tweening engine, which then saves the old query Qold and the old resultset Rold, and issues Qnew to the database for exe- cution. Upon receiving the result Rnew from the database, the tweening engine utilizes the old and new queries and This work is licensed under the Creative Commons Attribution- corresponding resultsets to generate the tweening sequence NonCommercial-NoDerivatives 4.0 International License. To view a copy T . This tweening sequence is then visualized on the UI as an of this license, visit http://creativecommons.org/licenses/by-nc-nd/4.0/. For animated transition from Rold to Rnew. This is illustrated any use beyond those covered by this license, obtain permission by emailing in Figure 1. [email protected]. Proceedings of the VLDB Endowment, Vol. 10, No. 12 A tweening sequence is composed of basic transforms and Copyright 2017 VLDB Endowment 2150-8097/17/08. visual cues defined on table entities (list of table cells, columns, 1953 Col1 Col2 Col3 Col1 Col2 Col3 Col1 Col2 Col3 Col1 Col2 Col3 Col1 Col2 Col3 deemphasize([r insert([{r :[B1, A1 A2 A3 3 A1 A2 A3 3 A1 A2 A3 C1 C2 C3 C1 C2 C3 ]) B2, B3]}, order([r , nest([(r B1 B2 B3 1 A1 A2 A3 4 A1 A2 A3 C1 C2 C3 C1 C2 C3 {r5:[B1, B2, r4, r2, r5, c1, r5c1), B3]}]) C1 C2 C3 r3]) B1 B2 B3 (r4c3, B2 r c )]) B1 B3 B1 B2 B3 B1 B2 B3 5 3 B2 Col1 Col2 Col3 Col1 Col2 Col3 Col1 Col2 Col3 C1 C2 C3 C1 C2 C3 C1 C2 C3 Col1 Col2 Col3 delete([r , Col1 Col2 Col3 separate( unnest([{r4c1: emphasize([ 3 A1 A2 A3 A1 A2 A3 A1 A2 A3 [c ]) (2, 1)}]) r3, r4, r5], r4 , r5]) 1 C1 C2 C3 C1 C2 C3 B2 B1 B2 delete) B1 B2 B1 B3 B3 B3 B2 B1 B2 B1 B2 C2 Col2 rotate([{cell- Col1 Col1 C2 Col2 Col1 C2 Col2 Col1 Col2 Col3 bridge([c ]) group:[r1c2, rotate([{text:[ 1 Col3 C3 r c , r c , r c , r1c3, r2c2, r2c3 1 2 1 3 2 2 C1 C3 Col3 C1 C3 Col3 C1 C2 C3 ]}]) C1 r2c3 ]}]) Figure 2: Micro-operations in the Visual Grammar or rows). Figure 2 shows the effect of these micro-operations 3. QUERY INTERFACE on a table. We present a web-based query interface with two interac- The tweening sequence is generated using a fixed rulebase tion modalities { text and multitouch on two independent defined in Table 1. The rulebase defines the ordered se- screens. On the text interface, the user can type in the de- quences of basic transforms corresponding to changes in dif- sired SQL query in a text console, and see the result visual- ferent SQL clauses. If two consecutive queries differ in mul- ized through tweening in the same window. The multitouch tiple clauses, the tweening sequences for respective changes interface defines intuitive touch gestures for basic relational are concatenated to form the complete tweening sequence. data transforms- select, project, aggregate, and cross-tab. In addition to the structural transforms, the sequences in- Each of these transform visualizations are composed of basic clude visual cues which are inserted before / after certain transforms and visual cues described in the earlier section. transforms for providing hints to upcoming and current trans- We restrict the type of queries that can be issued in a query forms in the sequence. The standard visual cues are inserted session to a subset of SQL. We require the FROM clause in into the tweening sequence as per the following rules. all the queries for a given session to be exactly the same. delete is preceded by emphasize, and followed by deempha- 3.1 SQL Console Interface size on the table entities on which delete is to be applied. The users can type in a query in the console at the bottom insert is followed by emphasize, and then deemphasize on right of the browser window. When the user types in a query, the newly inserted table entities. the visualization area is updated from the old resultset to the new resultset through an animated transition. The users order is preceded by annotate showing a note with sorting start by issuing a SELECT query on one of the datasets column, and order (ascending or descending). available in the database. After the first query, the user needs to make sure they use the same FROM clause as that More difficult query changes like pivot are tweened through in the first query in all the subsequent queries. An exception a different set of rules as shown in Figure 3. The tweening to this rule is the pivot query which is required to have the of pivot operation follows the natural logical construct of table being pivoted in the FROM clause expression of the pivot, first showing the aggregation and then following it other queries in the session. Figure 4 shows the console area with the cross-tabulation. In certain cases where at least and the visualization area for this interface. The result for one of the queries from a consecutive pair of queries in a the query typed in the console is shown in the visualization session is an aggregation query, the tweening generation be- area. The query execution is triggered by completion of the comes non-trivial as the tweening engine would need tuples SQL statement in the console. If the user issues an invalid or constituting aggregation of either or both the queries to gen- unsupported SQL statement, an appropriate error message erate a meaningful animation. In such cases, instead of is- is shown on the top right corner of the screen. suing the new query Qnew to the database, the tweening en- gine substitutes it with a simplified form of the expression- 3.2 Multitouch Interface disaggpQoldq disaggpQnewq, where disaggpQq represents On the multitouch interface, the users can select a database the SQL query which would return the constituent tuples table at the start of the session. The users can then issue forming the resultset corresponding to query Q. Our work queries on the selected dataset through touch gestures. For in [4] details how and why this works. It also covers a few the demonstration, we provide support for basic relational optimizations over these standard techniques which we do operations along with cross-tabulation. The gestures for the not implement in this demo. respective operations are described below: 1954 Table 1: Query-based tweening rulebase Differing Clause Change Tweening Sequence SELECT delete(columns), insert(columns), order(columns) WHERE delete(rows), insert(rows), order(rows) order(rows), highlight(rows, cause=aggregation),