1
- < div class ="container ">
1
+ < div class ="container " style ="font-family: monospace; ">
2
+ < br />
2
3
< div class ="row ">
3
4
< div class ="col-md-12 text-center ">
4
- < img style ="border:1px solid grey " src ="assets/images/architecture.png " width ="75% " />
5
+ < h2 > < img src ="assets/images/logo-dark.png " height ="36 " alt ="ProvenanceWidgets Logo " /> ProvenanceWidgets</ h2 >
6
+ < h5 class ="text-muted "> A JavaScript Library of UI Controls to Track and Dynamically Overlay Analytic Provenance
7
+ </ h5 >
8
+ < h6 class ="text-muted "> Arpit Narechania, Kaustubh Odak, Mennatallah El-Assady, Alex Endert</ h6 >
9
+ < h6 class ="text-muted "> Georgia Institute of Technology and ETH Zürich</ h6 >
10
+ < div class ="text-center mt-md ">
11
+ < a href ="https://github.com/ProvenanceWidgets/ProvenanceWidgets " target ="_blank " class ="btn btn-info "> < i
12
+ class ="pi pi-github "> </ i > View on Github</ a >
13
+ < a href ="https://arxiv.org/pdf/2407.17431 " target ="_blank " class ="btn btn-success "> < i
14
+ class ="pi pi-file-pdf "> </ i > Paper (VIS 2024)</ a >
15
+ < a href ="https://github.com/ProvenanceWidgets/Supplemental-Material " target ="_blank " class ="btn btn-warning "> < i
16
+ class ="pi pi-link "> </ i > Supplemental Material (VIS 2024)</ a >
17
+ </ div >
5
18
</ div >
6
19
</ div >
7
20
< hr >
21
+ < div class ="row ">
22
+ < div class ="col-md-6 ">
23
+ < div class ="p-md " style ="text-align: justify; ">
24
+ < small >
25
+ ProvenanceWidgets is a Javascript library of UI control elements such as radio buttons, checkboxes, and
26
+ dropdowns to track and dynamically overlay a user's analytic provenance. These in situ overlays not only save
27
+ screen space but also minimize the amount of time and effort needed to access the same information from
28
+ elsewhere in the UI. In this paper, we discuss how we design modular UI control elements to track how often and
29
+ how recently a user interacts with them and design visual overlays showing an aggregated summary as well as a
30
+ detailed temporal history. We demonstrate the capability of ProvenanceWidgets by recreating three prior widget
31
+ libraries: (1) Scented Widgets, (2) Phosphor objects, and (3) Dynamic Query Widgets. We also evaluated its
32
+ expressiveness and conducted case studies with visualization developers to evaluate its effectiveness. We find
33
+ that ProvenanceWidgets enables developers to implement custom provenance-tracking applications effectively.
34
+ ProvenanceWidgets is available as open-source software to help application
35
+ developers build custom provenance-based systems.
36
+ </ small >
37
+ </ div >
38
+ </ div >
39
+ < div class ="col-md-6 ">
40
+ < div class ="p-md ">
41
+ < div class ="embed-responsive embed-responsive-16by9 ">
42
+ < iframe class ="embed-responsive-item " src ="https://www.youtube.com/embed/7l6jKbS2SFI?rel=0&showinfo=0 " frameborder ="0 " allowfullscreen > </ iframe >
43
+ </ div >
44
+ </ div >
45
+ </ div >
46
+ </ div >
47
+ < hr >
48
+ < div class ="row ">
49
+ < div class ="col-md-12 ">
50
+ < h4 > Showcase</ h4 >
51
+ < br />
52
+ </ div >
53
+ </ div >
8
54
< div class ="row ">
9
55
< div class ="col-md-3 ">
10
56
< p-card class ="w-100 cursor-pointer " (click) ="navigateToRoute('/playground') ">
11
57
< ng-template pTemplate ="subtitle ">
12
- < div class ="text-center "> Playground</ div >
58
+ < h5 class ="text-center "> Playground</ h5 >
13
59
</ ng-template >
14
60
< ng-template pTemplate ="content ">
15
61
< img style ="border:1px solid grey " src ="assets/images/playground.png " width ="100% " />
19
65
< div class ="col-md-3 " (click) ="navigateToRoute('/scented-widgets') ">
20
66
< p-card class ="w-100 cursor-pointer ">
21
67
< ng-template pTemplate ="subtitle ">
22
- < div class ="text-center "> Scented Widgets</ div >
68
+ < h5 class ="text-center "> Scented Widgets</ h5 >
23
69
</ ng-template >
24
70
< ng-template pTemplate ="content ">
25
71
< img style ="border:1px solid grey " src ="assets/images/scented-widgets.png " width ="100% " />
29
75
< div class ="col-md-3 ">
30
76
< p-card class ="w-100 cursor-pointer " (click) ="navigateToRoute('/phosphor-objects') ">
31
77
< ng-template pTemplate ="subtitle ">
32
- < div class ="text-center "> Phosphor Objects</ div >
78
+ < h5 class ="text-center "> Phosphor Objects</ h5 >
33
79
</ ng-template >
34
80
< ng-template pTemplate ="content ">
35
81
< img style ="border:1px solid grey " src ="assets/images/phosphor-objects.png " width ="100% " />
39
85
< div class ="col-md-3 ">
40
86
< p-card class ="w-100 cursor-pointer " (click) ="navigateToRoute('/data-distribution') ">
41
87
< ng-template pTemplate ="subtitle ">
42
- < div class ="text-center "> Data Distribution</ div >
88
+ < h5 class ="text-center "> Data Distribution</ h5 >
43
89
</ ng-template >
44
90
< ng-template pTemplate ="content ">
45
91
< img style ="border:1px solid grey " src ="assets/images/data-distribution.png " width ="100% " />
46
92
</ ng-template >
47
93
</ p-card >
48
94
</ div >
49
95
</ div >
50
- < br />
96
+ < br />
51
97
< div class ="row ">
52
98
< div class ="col-md-3 ">
53
99
< p-card class ="w-100 cursor-pointer " (click) ="navigateToRoute('/vega-example') ">
54
100
< ng-template pTemplate ="subtitle ">
55
- < div class ="text-center "> Vega Integration</ div >
101
+ < h5 class ="text-center "> Vega Integration</ h5 >
56
102
</ ng-template >
57
103
< ng-template pTemplate ="content ">
58
104
< img style ="border:1px solid grey " src ="assets/images/vega-example.png " width ="100% " />
59
105
</ ng-template >
60
106
</ p-card >
61
107
</ div >
62
108
< div class ="col-md-3 ">
63
- < p-card class ="w-100 cursor-pointer " (click) ="navigateToRoute('/dynamic-query-widgets-homefinder') " >
109
+ < p-card class ="w-100 cursor-pointer " (click) ="navigateToRoute('/dynamic-query-widgets-homefinder') ">
64
110
< ng-template pTemplate ="subtitle ">
65
- < div class ="text-center "> Dynamic Query Widgets</ div >
111
+ < h5 class ="text-center "> Dynamic Query Widgets</ h5 >
66
112
</ ng-template >
67
113
< ng-template pTemplate ="content ">
68
114
< img style ="border:1px solid grey " src ="assets/images/dynamic-query-widgets-homefinder.png " width ="100% " />
72
118
< div class ="col-md-3 ">
73
119
< p-card class ="w-100 cursor-pointer " (click) ="navigateToRoute('/widgets-to-vis-one-way') ">
74
120
< ng-template pTemplate ="subtitle ">
75
- < div class ="text-center "> Widgets to Visualization one-way</ div >
121
+ < h5 class ="text-center "> Widgets to Visualization one-way</ h5 >
76
122
</ ng-template >
77
123
< ng-template pTemplate ="content ">
78
124
< img style ="border:1px solid grey " src ="assets/images/widgets-to-vis-one-way.png " width ="100% " />
82
128
< div class ="col-md-3 ">
83
129
< p-card class ="w-100 cursor-pointer " (click) ="navigateToRoute('/vis-to-widgets-one-way') ">
84
130
< ng-template pTemplate ="subtitle ">
85
- < div class ="text-center "> Visualization to Widgets one-way</ div >
131
+ < h5 class ="text-center "> Visualization to Widgets one-way</ h5 >
86
132
</ ng-template >
87
133
< ng-template pTemplate ="content ">
88
134
< img style ="border:1px solid grey " src ="assets/images/vis-to-widgets-one-way.png " width ="100% " />
89
135
</ ng-template >
90
136
</ p-card >
91
137
</ div >
92
138
</ div >
139
+ < br />
140
+ < hr >
141
+ < div class ="row ">
142
+ < div class ="col-md-12 ">
143
+ < h4 > Documentation</ h4 >
144
+ < span > Coming Soon...</ span >
145
+ </ div >
146
+ </ div >
147
+ < br />
148
+ < hr >
149
+ < div class ="row ">
150
+ < div class ="col-md-12 ">
151
+ < h4 > Contact</ h4 >
152
+ < span > Email Arpit at arpitnarechania [at] gmail.com</ span >
153
+ </ div >
154
+ </ div >
155
+ < br />
156
+ < hr >
157
+ < br />
93
158
</ div >
0 commit comments