國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3.1 系 資
系 Figure 3.1 大 資 資
資 Graph API 資
政 資 位 資
API
3.1: 系
PTT 資 Github PTT [19] 論 文
資 資 (raw pagedata) - 文- 資
資 資 資
資 位資 資訊 資
(clean pagedata) 資 MongoDB 資 PTT 資 位
Figure 3.2
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3.2: 資
Node.js [20]
資 (Query)
資 立資
[21] 資 文 資
word 位 文
文
立資 資 (Userdata) 資 文
立 系
文 資 Algorithm 1
文資 P ost(Pi) Ux
n∗ m U ser(Uj) Ux
Ux U ser(Uj) m
U ser(Uj) O (n∗ m2)
‧
Algorithm 1: Create Active User List
Input: P ost(Pi) is a list contain all query post’s data, each Picontain their User activities log, P ost(Pi)=[P1, P2, . . . , Pn]
Output: U ser(Uj) is a list collect all user has action in Posts belong P ost(Pj), U ser(Uj)=[U1, U2, . . . , Um]
Create Ux object represent the U ser;
Push Ux in U ser(Uj);
next User;
return U ser(Uj);
立 資
資 (Pagedata) 資 (Userdata)
(Query) (Summary) 資訊 文
Figure 3.2 D3.js [22]
(Menu)
(OverView) (SetView) (ElementView) (DetailView)
(SetView) 資 (ElementView)
‧
Alsallakh et al. [12] 資 資
(Task) 系
Type A degree
A1 Find elements belonging to a specific set
文 文
文
A2 Find sets containing a specific element
文 文
文
A3 Find elements based on their set memberships 文
文 文 系
文
A4 Find elements with a specific set membership degree
‧
A5 Filter out elements based on their set memberships
文 系
文 文
A6 Filter out elements based on their set membership degrees
文 (degree) A4
A7 Create a new set that contains certain elements 文
Type B AB AB
B1 Find the # of sets in the set family
文 系 資
Sunburst Treemap B2 Analyze inclusion relations
文 B1
B3 Analyze inclusion hierarchies
文 B1
B4 Analyze exclusion relations
文 文 立
B5 Analyze intersection relations
文 文 立
B6 Find intersections between k sets
文 立
‧
B8 Find set intersections of a specific set
文 立
B9 Find the set with largest pairwise set intersections
大 文 立
B10 Analyze set & set intersection cardinalities
Sunburst
Treemap Detailview
B11 Analyze and compare set similarities
系 B12 Analyze and compare set exclusiveness
B13 Highlight specific sets, subsets, or set relations
文 文
文
B14 Create a new set using set-theoretical operations
立 文
Type C
C1 Find the attribute values of a certain element
C2 Find the distribution of an attribute in a certain set or subset 文
C3 Compare the attribute values of sets or set intersections
‧
C4 Analyze the set memberships for elements having certain attribute values
文 ( )
C5 Create a new set out of elements having certain attribute values 文
Full Intersection Exclusive Intersection 系 F X = {Si1, Si2, . . . , Sin} ⊆ F
‧
E degree F exclusive intersection e∈ Iex(X)
degree|X|
3.3: 系 (Menu) (OverView)
(SetView) (ElementView) (DetailView)
‧
(Menu) 資 (parameter)
Fig-ure 3.4 資 資 資
(page) Figure 3.4 資
PTT 文
大 文 文
文 資
(submit) Figure 3.4 new submit
資 submit+
資 Download Figure 3.4
資 csv
文 Comment Share Reaction Like Love
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
Haha Wow Sad Angry (SetView) (ElementView)
資
3.5: (OverView) PTT Facebook
(SetView)
Figure 3.6 文 資 Treemap
Sunburst (space-filling) Figure 3.6 Treemap
Figure 3.6 Sunburst
文 資
文 文
Sunburst Sunburst
資訊
( 文 ) Treemap
文
(OverView) 系 系
‧
(Overview) 文 Pageview 文
(highlight) Detailview 文 資 Figure 3.6
文
(a) Treemap (b) Sunburst
3.6: (Setview)
Figure 3.7 Default Reaction Comment Share
PTT Default Public Push Neutral Boo Push
(Glyph) 資 文 (Push)
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
資
立 資
(a) PTT Elementview (b) Facebook Elementview
3.7: PTT Facebook (Elementview)
Powerset
資 Powerset Treemap
degree 資訊
Figure 3.7 資
SetView
Degree( 文 ) 文 Degree
文 Degree Degree
Degree 2
Degree Degree 資
Degree Degree
Degree 大資
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3.8: PTT 文資
3.9: PTT 資
(DetailView) (SetView) 文
(ElementView) Figure 3.8 Figure 3.9
(Gossiping2 p36 DarkHolbach)
資 資
‧
(Star glyph) (Linear glyph) 論
( ) 位
[18]
大
log2
大 (Normalize)
Figure 3.10 系 Facebook 資 A
B 立
A reaction(17 )
B reaction(27 ) comment(84 )
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3.1: Synoptic task Elementary task [15]
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3.10:
3.6
資訊 資
資訊 Overview first, zoom and filter, then
details-on-demand 系 資訊 (OverView)
(SetView) (ElementView) Tooltip 資訊
資 (DetailView)
(ElementView) (Zoom In Zoom Out)
資 資 大 大
文
Figure 3.11 (SetView) (Highlight) 文
(DetailView) ( 文) ( ) ( )
Figure 3.12 (OverView) ( )
(ElementView) (Highlight) ( 文)
(DetailView)
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
Figure 3.11 文 (ElementView)
文
Figure 3.12 (SetView)
( )
3.11: 文 系 (SetView) (ElementView)
3.12: 系 (SetView) (ElementView)
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y 論
4.1
系 PTT 國
論 PTT 文
2018 論
系
G1 文 資
G2 資
G3
G4 文 資
4.1: PTT (OverView)
文 Figure 4.1 (OverView)
論文 (256) (130) (2529) (2222)
(683) 文 (2802) (2159) 文 (566) (509)
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
論
tooltip boo( 文) 566
(a) Gossiping 資 1 文 (b) Gossiping 資 2 文
4.2: PTT (SetView) Gossiping 資
Gossiping 資 文 文 文
(SetView) 大 論 Figure 4.2
國 國
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
(a) (b) degree 10 (c) 文
(d) 文 (e) (f) 文
4.3: PTT 論 (ElementView)
degree 2 文 文 文
(ElementView) 10 文
論 degree 10
文 Figure 4.3 ( )
( ) degree 2 11 ( ) 文
( ) 文 ( ) ( ) 文
文 文 文
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
(a)
(b)
4.4: PTT 論
( 文) (PTT
) 大 文 論 PTT
文 文
degree 論 angellll 文
Figure 4.4 ( ) 文 ( ) 文
( ) 2017 2018 文
PTT 士 系
士
文 Figure 4.5 (SetView) 文
文
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
文 位 Pujols5 (OverView)
(DetailView) 文 文
系 文 士 文
4.5: PTT 文
4.6: PTT
Figure 4.5
‧
‧
‧
‧
7. Setview Sunburst Treemap 1 5 Sunburst
( )(1: ; 2: ; 3: ; 4: 5: )
1 2 3 4 5
Sunburst
8. Setview Sunburst Treemap
Treemap 文
Sunburst 大
‧
10. Elementview collection 1 5
( )(1: ; 2: ; 3: ; 4: ; 5: )
5 4 3
11. Elementview 1 5
( )(1: ; 2: ; 3: ; 4: ; 5: )
5 4 3 2
12. Detailview 資訊 文 1 5
( )(1: ; 2: ; 3: ; 4: ; 5: )
5 4
13. Detailview Timeline collection
1 5 ( )(1: ; 2: ; 3: ; 4: ; 5:
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
4.2:
4.3
系 系
4.3.1
系 資
系
• 論 論
• 系 文
資
•
PTT 文
‧
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
4.3:
‧
Scalability Our work Upset Powerset
Element 1000 after filter <50000 >50000
Set 100∼1000 for hierarchy relation 40∼50 20∼30 for overview
4.4 論
‧
‧
‧
[1] M. Bastian, S. Heymann, M. Jacomy et al., “Gephi: an open source software for exploring and manipulating networks.” 2009.
[2] D. Hansen, B. Shneiderman, and M. A. Smith, Analyzing social media networks with NodeXL: Insights from a connected world. Morgan Kaufmann, 2010.
[3] V. Batagelj and A. Mrvar, “Pajek-program for large network analysis,” Connections, vol. 21, no. 2, pp. 47–57, 1998.
[4] J. Heer, M. Bostock, and V. Ogievetsky, “A tour through the visualization zoo,” Queue, vol. 8, no. 5, p. 20, 2010.
[5] H.-J. Schulz, “Treevis. net: A tree visualization reference,” IEEE Computer Graphics and Applications, vol. 31, no. 6, pp. 11–15, 2011.
[6] B. Shneiderman and C. Plaisant, “Treemaps for space-constrained visualization of hierar-chies,” 1998.
[7] N. Kong, J. Heer, and M. Agrawala, “Perceptual guidelines for creating rectangular treemaps,” IEEE transactions on visualization and computer graphics, vol. 16, no. 6, pp.
990–998, 2010.
[8] J. Stasko and E. Zhang, “Focus+context display and navigation techniques for enhancing radial, space-filling hierarchy visualizations,” in Proceedings of the IEEE Symposium on Information Vizualization 2000, ser. INFOVIS ’00. Washington, DC, USA: IEEE Com-puter Society, 2000, pp. 57–65.
[9] J. Stasko, R. Catrambone, M. Guzdial, and K. McDonald, “An evaluation of space-filling information visualizations for depicting hierarchical structures,” International journal of human-computer studies, vol. 53, no. 5, pp. 663–694, 2000.
‧
[10] R. Boardman, “Bubble trees the visualization of hierarchical information structures,” in CHI’00 extended abstracts on Human factors in computing systems. ACM, 2000, pp.
315–316.
[11] M. Schwab, H. Strobelt, J. Tompkin, C. Fredericks, C. Huff, D. Higgins, A. Strezhnev, M. Komisarchik, G. King, and H. Pfister, “booc. io: An education system with hierarchical concept maps and dynamic non-linear learning plans,” IEEE transactions on visualization and computer graphics, vol. 23, no. 1, pp. 571–580, 2017.
[12] B. Alsallakh, L. Micallef, W. Aigner, H. Hauser, S. Miksch, and P. Rodgers, “Visualizing Sets and Set-typed Data: State-of-the-Art and Future Challenges,” in EuroVis - STARs, R. Borgo, R. Maciejewski, and I. Viola, Eds. The Eurographics Association, 2014.
[13] A. Lex, N. Gehlenborg, H. Strobelt, R. Vuillemot, and H. Pfister, “Upset: visualization of intersecting sets,” IEEE transactions on visualization and computer graphics, vol. 20, no. 12, pp. 1983–1992, 2014.
[14] B. Alsallakh and L. Ren, “Powerset: A comprehensive visualization of set intersections,”
IEEE transactions on visualization and computer graphics, vol. 23, no. 1, pp. 361–370, 2017.
[15] J. Fuchs, P. Isenberg, A. Bezerianos, and D. Keim, “A systematic review of experimen-tal studies on data glyphs,” IEEE Transactions on Visualization and Computer Graphics, vol. 23, no. 7, pp. 1863–1879, 2017.
[16] R. Borgo, J. Kehrer, D. H. Chung, E. Maguire, R. S. Laramee, H. Hauser, M. Ward, and M. Chen, “Glyph-based visualization: Foundations, design guidelines, techniques and ap-plications.” in Eurographics (STARs), 2013, pp. 39–63.
[17] J. Fuchs, F. Fischer, F. Mansmann, E. Bertini, and P. Isenberg, “Evaluation of alternative glyph designs for time series data in a small multiple setting,” in Proceedings of the SIGCHI conference on human factors in computing systems. ACM, 2013, pp. 3237–3246.
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
[18] J. Fuchs, P. Isenberg, A. Bezerianos, F. Fischer, and E. Bertini, “The influence of contour on similarity perception of star glyphs,” IEEE transactions on visualization and computer graphics, vol. 20, no. 12, pp. 2251–2260, 2014.
[19] ptt-web-crawler is a crawler for the web version of ptt @ONLINE. [Online]. Available:
https://github.com/jwlin/ptt-web-crawler
[20] S. Tilkov and S. Vinoski, “Node. js: Using javascript to build high-performance network programs,” IEEE Internet Computing, vol. 14, no. 6, pp. 80–83, 2010.
[21] J. Sun, “ jieba chinese word segmentation tool,” 2012.
[22] M. Bostock, V. Ogievetsky, and J. Heer, “D3 data-driven documents,” IEEE transactions on visualization and computer graphics, vol. 17, no. 12, pp. 2301–2309, 2011.