應用集合視覺化之社群網路使用者交集活動探索與分析工具 - 政大學術集成

全文

(1)國立政治大學資訊科學系碩士學位論文. PageSet: Visualization of Social Network User Activitiy Intersections. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 士. 國 DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(2) PageSet: Visualization of Social Network User Activitiy Intersections Student: Chun-Min Liao Advisor: Ming-Te Chi. 國. 立. 政. 治. 大. 學. 資訊科學系. 學. ‧ 國. 立. 治政碩士學位論文大 A Thesis. ‧. Submitted to Department of Computer Science. National Chengchi University. sit. Nat. y. College of Science. n. al. for the Degree of. Ch. e Master ngchi. er. io. in partial fulfilment of the requirements. i n U. v. in Computer Science. June 2018 Taipei, Taiwan. 國. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(3) 學. 士國立政治大學資訊科學系. 論文. 資. (Task) 資資文. 資. 立資. 文. 政治大資系. ‧. ‧ 國. 學. 論. n. er. io. sit. y. Nat. al. Ch. engchi. iv. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(4) PageSet: Visualization of Social Network User Activitiy Intersections Student: Chun-Min Liao. Advisor: Dr. Ming-Te Chi. Department of Computer Science National Chengchi University. Abstract Analyzing the common elements belong to the two collections of hierarchical data is the critical task of our work. According to the state of the art intersection visualization method, we enhance the visual expression of data, especially for the hierarchical relationship, set/element. 政治大. attribute exploration, and apply our approach on social media to identify key users and behaviors. 立. by user activity data analysis. We use multi-view visualization and interaction to achieve the. ‧ 國. 學. following goals: browse the posts and user profiles of pages(set of posts), compare user activity between pages, observe the activities of the intersection users, and highlight the detail infor-. ‧. mation of posts and user profiles. According to the characteristics of the data, the hierarchical. y. Nat. visualization method such as Sunburst and Treemap is used to represent the hierarchical rela-. io. sit. tionship, and focus on presenting the intersection elements only to achieve reliable scalability.. n. al. er. Finally, we compare the work tasks and scalability supported by the state of the art set visual-. i n U. v. ization method, discuss the advantages and limitations of our work, and conclude the research. Ch. engchi. direction that can be refined in the future.. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(5) 碩士學. 政大資科系學. 學. 學系. 學. 立. 政治學大. ‧ 國. 學. 文學. ‧. 立. 學. n. er. io. sit. y. Nat. al. Ch. engchi. vi. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(6) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. iv. Abstract . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. v. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. vi. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. vii. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. ix. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. x. 論 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 1. 1.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 4. 7. y. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. sit. Glyph. 2. 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. io. er. 2.3. 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. Nat. 資. 2.2. ‧. 資. 2.1. ‧ 國. 1.1. 學. 1.2. 治 ................ . . . . . .政 . . . . . . . . . . .大 . . .立 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. al. 11 13. 3.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 19. 3.4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 20. 3.5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 26. 3.6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 28. 論 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 30. 4.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 30. 4.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 35. 4.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 40. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 40. n. 3.2. v .C . . . . . . . . . . . . . .n. i . . . . . . . . . . . . . . hengchi U . . . . . . . . . . . . . . . . . . . . . . . . . .. 3.1. 系. 4.3.1. 資. vii. 13 15. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(7) 4.3.2. . . . . . . . . . . . . . . . . . . . . . . . . . . .. 41. 4.3.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 43. 論 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 43. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 45. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 46. 論. 立. 政治大. 學 ‧. ‧ 國. y. Nat. io. sit. 文. n. al. er. 4.4. Ch. engchi. viii. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(8) Glyph task. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 12. 3.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 27. 4.1. 資訊 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 35. 4.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 40. 4.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 42. 4.4. Scalability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 43. 立. 政治大. 學 ‧. ‧ 國 io. sit. y. Nat. n. al. er. 2.1. Ch. engchi. ix. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(9) 資. 2.2. Bubble trees. 2.3. Booc.io. 2.4. SetVis. 2.5. Upset. 2.6. Powerset. 2.7. Powerset. 9. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 9. . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 10. 系. 治 ................ . . . . . . .政 . . . . . . . . . . .大立. PTT. 13 14. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 20. . . . . . . . . . . . . . . . . . . . . . . . . . .. 21. Facebook 資. y. ‧ 國. 11. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . .. 22. (Setview). . . . . . . . . . . . . . . . . . . .. 23. Facebook. al. 3.8. PTT. 3.9. PTT. v ni. (Elementview). n. 3.7. . . . . . . . . . . . . . . . . . . . . . . . . . . . .. io. 3.6. 7. sit. PTT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. Nat. 3.5. 6. ‧. 3.4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 資系. 6. 學. 3.3. . . . . . . . . . . . . . . . . . . .. 系. 系. 3.2. 5. 系. 2.8 3.1. . . . . . . . . . . . . . . . . . . . . . . . . . .. er. 2.1. Ch. 文資. 資. . . . . . . . . . . . . . . .. 24. e n g. .c. h. .i . U. . . . . . . . . . . . . . . . .. 25. . . . . . . . . . . . . . . . . . . . . . .. 25. 3.10. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 28. 3.11 系. 文. . . . . . . . . . . . . . . . . . . . . . . . . .. 29. . . . . . . . . . . . . . . . . . . . . . . . .. 29. 3.12 系 4.1. PTT. Overview. 4.2. PTT. 4.3. PTT. 論. 4.4. PTT. 論. 4.5. PTT. . . . . . . . . . . . . . . . . . . . (SetView). . . . . . . . . . . . . . .. (ElementView). 文. x. 30 31. . . . . . . . .. 32. . . . . . . . . . . . . . . . . . .. 33. . . . . . . . . . . . .. 34. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(10) PTT. . . . . . . . . . . . . . . . .. 立. 34. 政治大. 學 ‧. ‧ 國 io. sit. y. Nat. n. al. er. 4.6. Ch. engchi. xi. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(11) 論 1.1 資訊. 資訊. 大訊. 資訊. 資訊. 資. 資資. 資. 資. 資訊. 資訊. 資資. : 資. 政治大. 資訊. 立. Pinterest. ‧. ‧ 國. (Twitter) LinkedIn. 學. (Facebook). 資訊. y. Nat. n. al. 大. Ch. 大. er. io. sit. 大. i n U. 資. engchi. v. 大. PTT. 大. 大. PTT BBS 大. Alexa. PTT. 論 PTT. 論. PTT. 文. 論. 文論. 文(. 文) 文. 文. (. ). 系. 文資. (ex 士. ). 1. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(12) 論. 1.2 立. (network graph). Nodes(Vertices). Ties(Edges, Arcs). (Centrality). Clustering &. Transitivity. 立. NodeXL [2]. 文. 資. Cores. 文. ‧. 文. n. al. er. io. sit. y. Nat. 資訊. Clans. Pajek [3] 資. PTT. Cliques. 學. ‧ 國. Gephi [1]. 政治大 (community). focus+context. Ch. engchi. i n U. v. 資資資. (Set 資. Visualization) 文. 文文. (Universal Set). 文. 文. 2. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(13) 資資系. 大. 2n. n. 大. 大 (Task) (Glyph). 資訊. (Perception). 立. 資. Sunburst. ‧ 國. task. 學. 資. 論. y. ‧. Nat. 資. n. al. sit. 1.3. Ch. engchi. er. io. •. 政治大. i n U. v. 資. •. •. 文. (glyph). 3. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(14) Heer et al. [4] 資. 資訊. 資資. 資. 資. 2.1 資. 立. Hierarchical tree radial layout B. Treevis.net [5]. Hierarchical circular tree layouts C. Treemap layout 大. Figure 2.1. 資. Treemap Sunburst. ‧. Hierarchical circular tree Treemap: Ben Shneiderman et al. [6]. N. Kong et al. [7] 資. n. al. J. Stasko et al. Treemap. y. sit. io. 資. 大. Ch. 大. engchi. i n 9/2 U. [8] [9]. Treemap. er. Space-filling Layout. Treemap. 資. Nat. Treemap. Sunburst. 學. partition layout D. ‧ 國. A. 資. 政治大. v. 1. Sunburst 資. (<500). 資. Sunburst. 4. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(15) 政治大. 立. ‧. ‧ 國. 學 y. 資. io. sit. Nat. 2.1:. n. al. clutter). Figure 2.2. Bubble trees [10]. er. Hierarchical circular tree layouts Boardman 資. Ch 1. engchi. i n U. v. (visual 國. 2 3. 3. 科. 4. 科. 科. 5 大. 6. 5. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(16) 政治大. 2.2: Bubble trees. 立. [10]. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 系. 2.3: Booc.io. Schwab et al.. Booc.io [11]. i n U. v. [11]. Bubble Trees. Fig學. ure 2.3 學. 學. 學. 資. 科. 6. 學. Booc.io. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(17) 學. 資訊. 學. 學. 資. 2.2 資. B. Alsallakh et al. [12] 大. (Task). Figure 2.4. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 2.4: SetVis [12] 文. (Euler and Venn diagrams). 資. 7. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(18) (Euler diagram variants) 資文 (Overlays). (Region-based). (Line-based) Glyph-based 位. 資. (Node-link diagrams). 立. 政治大. (Matrix-based techniques). ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat. (Aggregation-based techniques). Ch. engchi. 8. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(19) Figure 2.5. 系. 立. 資. [13]. 學. ‧ 國. UpSet [13]. 政治大. 2.5: Upset. 資訊. al. er. sit. y. 資. io. B. Alsallakh et al.. n. PowerSet [14]. 大. Nat. 大. (box plot chart). ‧. 資訊. (bar chart). 資. Ch. engchi. 2.6: Powerset. 9. i n U. v. [14]. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(20) PowerSet. Figure 2.6. 大 (a). (b). (c). 資訊. 立. 資訊. 政治大. ‧. ‧ 國. 學. Nat. 系. io. n. al. [14]. er. 2.7: Powerset. y. (e). (d). sit. Figure 2.7. Treemap. Ch. engchi. 10. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(21) 2.3. Glyph. 政治大. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. 2.8:. i n U. [15]. engchi 資訊. v. 資. nested. 資. 大資. Figure 2.8 R. Borgo et al. [16] 學. 論系. 資. J. Fuchs et al. [17] 位. ( et al. [18]. 系. (Glyph). ). J. Fuchs. (Star Glyph). 11. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(22) 文. J. Fuchs et al. [15] 文. 系. 資 Elementary Task. Lookup. Similarity Search. 3D Navigation. Synoptic Task. Trend Detection. Visual Search. 2.1 2.1: Glyph task Type. Synoptic tasks. Elementary tasks. tasks involve the glyph as a whole. tasks focus on single specific characteristics of a glyph. Visual search. Lookup task. Categories 1 find a glyph differing from others,. focus on single dimensions of a glyph. or tell whether a specific glyph is present or not.. and read individual values. Similarity search Categories 2 compare the overall structure of glyphs and group similar representations. Trend detection tasks. 立. 政治大. distance calculation. keep track of the development of data values across dimensions.. 學. ‧ 國. [15]. 論. ‧ y. Nat. io. sit. [17] [18]. n. al. er. Categories 3. 3D Navigation. Ch. engchi. 12. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(23) 系. 3.1 系. 資. 大. Figure 3.1 資. 資. 資資. Graph API. 政. 資. 位. 資. API. 政治大. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 3.1: 系. PTT 資. Github. 資. 資. PTT. i n U. 論. [19]. (raw pagedata). v. -. 文. 文-. 資. 資資. 資 (clean pagedata). 位資資. 資訊 MongoDB 資. 資資. PTT 資. 位. Figure 3.2. 13. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(24) 政治大. 立. ‧. ‧ 國. 學資. 3.2:. Nat. sit. y. Node.js [20]. (Query) 資. n. al. er. io. 資. 立資. Ch. 資. [21] word. engchi. i n U. v. 文. 資. 位. 文. 文立資. 資. 資. (Userdata). 立文. 系. 資文資. n∗m. 文. Algorithm 1. P ost(Pi ). Ux. U ser(Uj ) Ux. Ux U ser(Uj ). U ser(Uj ). 14. m. O (n ∗ m2 ). DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(25) Algorithm 1: Create Active User List Input: P ost(Pi ) is a list contain all query post’s data, each Pi contain 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 ] U ser(Uj ) = []; for i = o; i ≤ n; do while not end of U serinPi do if find Ux in U ser(Uj ) then Update the Ux ’s log in Uj ; else Create Ux object represent the U ser; Push Ux in U ser(Uj ); next User; return U ser(Uj );. 資. 資. 資. (Pagedata) (Summary) 資訊. 文. sit er. io. (SetView). (ElementView). n. al. n C h資 U engchi (Detailview). (SetView) 資. D3.js [22]. y. Nat. Figure 3.2. (OverView). (Userdata). ‧. (Query). 立. 學. ‧ 國. 立. 政治大. iv. (Menu) (DetailView) (ElementView) 資. 立. 資. 3.2 (Task) 學. 系. 4.1 G1. 文. 資. (Goal) 資資. PTT. 15. (. SetView). DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(26) 資. (. ElementView). 資. G2. (. OverView, SetView). G3. ( 文. 資文. 立. 文. 政治大資. Alsallakh et al. [12] 資. DetailView). 學. ‧ 國. (. 資訊. ‧. 系. (Task). io. sit. y. Nat. Type A. al. n. A1 Find elements belonging to a specific set. Ch. 文. 文. engchi. degree. er. G4. DetailView). i n U. v. 文. A2 Find sets containing a specific element 文. 文. 文 A3 Find elements based on their set memberships 文文. 文. 系. 文 A4 Find elements with a specific set membership degree. 16. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(27) 文 (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 治大. 立. ‧ 國. 文 Treemap. y B1. io. n. B3 Analyze inclusion hierarchies 文. sit. 文. er. Nat. B2 Analyze inclusion relations. al. Ch. 資. ‧. Sunburst. 系. 學. B1 Find the # of sets in the set family. AB. engchi. iv n U B1. B4 Analyze exclusion relations 文. 文. 立. B5 Analyze intersection relations 文. 文. 立. B6 Find intersections between k sets 文. 立. B7 Find sets involved in certain intersection. 17. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(28) 文. 立. B8 Find set intersections of a specific set 文. 立. B9 Find the set with largest pairwise set intersections 大. 文. 立. B10 Analyze set & set intersection cardinalities. 政治大. 立. Detailview. 學. ‧ 國. Treemap. Sunburst. B11 Analyze and compare set similarities 系. ‧. B12 Analyze and compare set exclusiveness. n 文. Ch. 文. engchi. er. io. al. sit. y. Nat B13 Highlight specific sets, subsets, or set relations. i n U. v. 文. 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. 18. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(29) 系. C4 Analyze the set memberships for elements having certain attribute values 文(. ). C5 Create a new set out of elements having certain attribute values 文. 3.3 系. F. n. 政治大 F = {S , S , . . . , S } : S ⊆E 立 1. ‧ 國. 2n. power set. ‧. 系. F. X =. 論. n. er. io. al. C∩h. engchi. i n U. v. (X) = Si1 ∩ Si2 ∩ . . . ∩ Sik. I (X) =. F \ X(. X {I (X) : X ∈ P (F )}. F. (3.2) X. I (X2 ⊆ F ) Si1 , Si2 , .., Sik. Exclusive Intersection. Iex (X) = {Iex (X) : X ∈ P (F )}. ) E. full intersection. I (X1 ⊆ F ). X. F. sit. {Si1 , Si2 , . . . , Sin } ⊆ F. 文. 系. Exclusive Intersection. Nat. Full Intersection. Full Intersection. (3.1). 1≤n. X ⊆ F. (Cardinality)P (F ) = {X : X ⊆ F } P (F ). n. 學. F. 2. y. E. ∩. (X) \. ∪. (F \ X). Exclusive Intersection 系. F. (3.3) E. 文. Exclusive Intersection. PowerSet [14]. 19. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(30) E. F. degree. e ∈ Iex (X). exclusive intersection. degree|X| degree (Iex (X)) = |X|. (3.4). 資論. PTT. 文. 論. 論. 文. 論. x 文P. x. 文. 論文P. a. a. a. 文. P. (PTT). 政治(Task)大. 學. ‧ 國. 立 3.4. ‧. (OverView). (DetailView). n. er. io. sit. (ElementView). al. Ch. 3.3: 系 (SetView). Figure 3.3. y. (Menu). Nat. (SetView). (Facebook). engchi. i n U. v. (Menu) (ElementView). (OverView) (DetailView). 20. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(31) 資. (Menu). 資. ure 3.4 (page). (parameter). Fig-. 資. 資. 資. Figure 3.4. 文. PTT 大. 文. 文. 文 (submit). 資. Figure 3.4. new submit. 資. submit+. 資. Download. 資. csv. 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat. 3.4:. Figure 3.4. Ch. engchi. i n U. v. (Menu). 資. (parameter) 資. (Overiew) 資. 資. 資訊資. Figure 3.5. 資文. Comment. 21. Figure 3.5 Share. Reaction Like. Love. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(32) Haha. Wow. Sad. Angry. (SetView). (ElementView). 資. 政治大. 立. Sunburst. n. Figure 3.6. al. C文h. (space-filling). Figure 3.6 文. Facebook. sit. PTT. er. io. (SetView). (OverView). y. ‧. ‧ 國. 學. Nat. 3.5:. e n資g c h i. i n U. v. Treemap. Figure 3.6. Treemap. Sunburst 資文. 文 Sunburst Sunburst. 資訊 (. 文. ). Treemap 文. (OverView). 系. 22. 系. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(33) 文文文. 文. 文. (Overview). 文. Pageview 文. (highlight) Detailview. 資. Figure 3.6. 文. 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat (a) Treemap. 3.6:. C h(Setview) engchi U. v ni. (b) Sunburst. 資. (ElementView) (Degree). 大 3.5 (. 資. )Degree Figure 3.7. PTT. Default. Default Public. Push. Reaction Comment Share. Neutral. Boo 資. (Glyph). 23. Push 文 (Push). DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(34) 資立. 資. 立. 政治大. ‧ 國. 學 (b) Facebook Elementview. Facebook. (Elementview). Powerset. n. al. degree. Ch. er. io. sit. y. Nat. 3.7: PTT. ‧. (a) PTT Elementview. 資. engchi. i n U. vPowerset. Treemap 資訊資. Figure 3.7 SetView 文. Degree(. 文. 文. ). Degree. Degree. Degree Degree. Degree. 2. Degree. 資. Degree. Degree 大資. Degree. 24. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(35) 立. 政治大文資. ‧. ‧ 國. PTT. 學. 3.8:. n. er. io. sit. y. Nat. al. 3.9:. Ch. engchi. PTT. i n U. v. 資. (DetailView). (SetView). (ElementView). Figure 3.8. (Gossiping2 p36 資. Figure 3.9. DarkHolbach) 資. 25. 文. (Timeline). DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(36) 文. A 文. B. 文文文. 文. PTT 文. Postid 文. (. 文文. 文). 資訊 (. ). 3.5 資. J. Fuchs et al. [17] [18]. 立 (Star glyph). (Glyph). (Linear glyph). 論. ‧ 國. 位. ). ‧. Nat. n. al. 大. er. io. sit. y. [18]. Ch. log2 大. 資. 學. (. 政資訊治大 [15]. engchi. i n U. v. (Normalize). 系. Figure 3.10. 資. Facebook. A. 立. B. A B. reaction(27. ). comment(84. 26. reaction(17. ). ). DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(37) 3.1:. Synoptic task. 立. Elementary task. [15]. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 27. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(38) 3.10:. 政治大. 學. ‧ 國. 立 3.6. ‧. 資訊. 資訊. (OverView). er. 資訊. io. Tooltip a(ElementView) iv l資C n hengchi U. n. (SetView). sit. y. Nat. Overview first, zoom and filter, then details-. 系. on-demand. 資. (ElementView). (Zoom In. 資. 資. 資訊 (DetailView). Zoom Out) 大. 大文. Figure 3.11 (DetailView) Figure 3.12 (ElementView). (SetView) (. 文. (Highlight). 文). (. ). (OverView) (Highlight). ( (. (. ) ). 文). (DetailView). 28. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(39) 文. Figure 3.11. (ElementView). 文 Figure 3.12 (. (SetView). ). 學. 文. 系. ‧. 3.11:. ‧ 國. 立. 政治大. (ElementView). (SetView). n. er. io. sit. y. Nat. al. 3.12:. 系. Ch. engchi. (SetView). 29. i n U. v. (ElementView). DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(40) 論 4.1 系. 國. PTT 論. 文. PTT. 論. 2018. 系. G1. 文. 資資. 學. G3 文. ‧. G4. 立. ‧ 國. G2. 政治大. 資. n. er. io. sit. y. Nat. al. Ch. engchi. 4.1: PTT 文論文 (683). v. (OverView). Figure 4.1. (256) 文. i n U. (OverView). (130) (2802). (2529) 文. (2159). 30. (566). (2222) (509). DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(41) 論 tooltip 566. 立. Gossiping. 資. 文. (b) Gossiping 資 (SetView) 文. io. al. n. (SetView). 國. y. 1. Nat. 4.2: PTT. ‧. ‧ 國. 學. (a) Gossiping 資. 政治大. 文. 2. Gossiping. 資. sit. 文). 文. 文. er. boo(. Ch. i n U 大. engchi. 31. v. 論. Figure 4.2 國. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(42) (b). (a). degree 10. 政治大. 立. ‧. ‧ 國. 學 y (ElementView) 文. n. al. 文. er. io. degree 2. 文. sit. 論文. 4.3: PTT. (f). (e). Nat. 文. (d). 文. (c). (ElementView). Ch. engchi. v. i n U. 10. 文. 論. degree 10 文. Figure 4.3 (. (. ). 文. ). degree (. 2. 11. ) 文. 文. 32. (. (. ). 文. (. ). 文. ). 文. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(43) 政治大. (a). 立. ‧. ‧ 國. 學. al. 論. n. 4.4: PTT. )大. 文. Ch. engchi. 論. (. v. 文). (PTT. 文. 論 Figure 4.4. i n U PTT. 文 degree. er. io. sit. y. Nat. (b). 文. angellll (. 文. ) (. ). 2017. 2018 士. PTT. (. ). 文. 文系. 士文. Figure 4.5. (SetView). 文. 文. 33. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(44) 文. 位. Pujols5. 文. (DetailView) 系. 文. 立. (OverView). 士. 文文. 政治大. ‧ 國. 學 ‧. 文. 4.5: PTT. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 4.6: PTT Figure 4.5. 34. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(45) 文 ID. (OverView) 文. (SetView) 文. 系. 4.2 系系. 資. 文資訊. 6. 20. 30. 26. 30. Nat. 30. io. sit. y. PTT 文資. n. al. 資. ‧. PTT. 1. 資訊. 文資. er. 4.1. 立. PTT. 學. ‧ 國. PTT. 政資治大 2018. C h4.1: e n g c資訊 hi. i n U. v. 系. 系系. 系. 系. 35. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(46) 1.. 論. collection →. )?. (. collection. 2.. collection. 3.. collection. 文?. ?. 資. 4.. 位. 政治大. 論. 3.. 3.. 論立. 論. 論. 政治立. 文. ?. er. al. n. 系. ?. sit. io. 資. 文 7.. 文. y. Nat 系. 6.. )? 文. ‧. 文. 論. →. 學. 5.. ‧ 國. 立. (. Ch. engchi. i n U. v. ?. 大系 15 ; 3:. ; 4: 系. ; 5:. (. ) (1:. ; 2:. 系. ) 資. 1. 系. 36. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(47) • 1. 學. • 2. 學. • 3. 學. 系. 系系. • 4. 學. 學. • 5. 系系. 3. 學. 2. 系 • 1 • 2. 立. • 3. ‧ 國. ‧ 系. y. 4. io. sit. Nat. al. collection 資. n. 3. 系. 3. er. • 5. 學. • 4. 政治大. • 1. Ch. engchi. i n U. v. • 2 資. • 3 資. • 4 • 5. 5 系 4. 系. 4. 3. 資 collection 資. 文. • 1. 37. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(48) 資. • 2 • 3 • 4. 資. • 5 5. 4. 系. 5. 系. 3. 文. collection 資. 政治大. • 1. 立. • 2. io. 3. n. al. 6. Overview (. ) (1:. 7. Setview (. )(1:. ; 2: 2. engchi ; 3:. 4 Sunburst. 1. C資h. ; 2: 5. 3. y. Nat. 4. 系. sit. • 5. er. • 4. ‧. ‧ 國. 學. • 3. i n U. ; 4:. v. 15. ; 5:. ). 3 Treemap. 15. ; 3:. 4. ; 4:. Sunburst 5:. ). 5. Sunburst 8. Setview. Sunburst. Treemap 文. Treemap 大. Sunburst. 38. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(49) 文. 9. Setview )(1:. 15. ; 2: 5. ; 3:. ; 4:. (. ; 5:. ). 4. 10. Elementview. collection (. )(1:. 5. ; 2:. 4. 15. ; 3:. ; 4:. ; 5:. 3. 11. Elementview. 15 )(1:. ; 2:. 5. 文. ‧ 國. 資訊. ; 2:. ; 4:. y. ; 2:. 4. ; 3:. Ch. engchi. i n U. 5. ; 2:. ; 3:. 15 ; 4:. ; 5:. 文 )(1: 5. ). 4. 15. (. ; 5:. v. 文 )(1:. ; 4:. er. al. )(1:. 14. (. ). ‧. (. n 5. ; 5:. collection. io. ). ; 3:. 15. Timeline. Nat. 15. ). 4. 5 13. Detailview. ; 5:. 學. )(1:. ; 4:. 政3 治 2 大. 4. 立 (. ; 3:. sit. (. 12. Detailview. ). ; 2: 4. ; 3:. ; 4:. ; 5:. 15 ). 3. 39. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(50) 4.2:. 立. 政治大. ‧. ‧ 國. 學. 4.3. y. Nat. n. er. io. al. 系. sit. 系. 4.3.1. Ch. engchi. 系. i n U. v. 資. 系論. • • 系. 論. 文資. • PTT. 40. 文. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(51) 文. •. 系大. •. 大. 文資論. •. • 系. 政治大 slider bar. 立. • UI. ). ( 資訊. 文. PTT. 論. 論. sit. n. al. 4.3.2. 文. Ch. 文. engchi. er. io. •. y. Nat. •. FB. ‧. 文. •. ]. ‧ 國. [. 學. • PTT 文. i n U. v. (Task) 資. Setvis survey[12]. 4.3. 資. Upset. 大. Powerset 論文 A3. A4. A5. B4 C1. Upset[13] 系. 系. C1 3.2. 資大. 41. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(52) 4.3:. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 42. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(53) 4.3.3 Treemap. Sunburst. 資 4.4. 資. Sunburst. 政資治大. 立. ‧ 國. Set. Our work. Upset. Powerset. 1000 after filter. <50000 >50000. 100∼1000 for hierarchy relation. 40∼50. ‧. Element. 學. Scalability. 4.4: Scalability. Nat. y. 20∼30 for overview. n. er. io. 論. 4.4. al. sit. Treemap. C系h. engchi. i n 資 U. v. 資. 文. 大資. 大. 系資. 系文. svg 大 canvas 論. 4.3.1 立. 43. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(54) 文資文. 論資. 文. 論資. 系. 4.2 系. 資. 文. 文. 資. Sunburst. 資. Treemap. 文資訊. 立資. ‧. 系. 資. n. al. er. io. 資. Ch. 資. y. Nat. 系. 系. sit. 立. 文. 學. ‧ 國. 文系. 政治大. engchi. 44. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(55) 論資. 文. 資. 系 (OverView). (SetView) (ElementView) 資訊. (DetailView). 系. 文. 系. 立. 系. 資. 系. 資. sit. al. n. 立. 論. 資. er. io. 4.4. 立. 資. y. Nat. 系. ‧. ‧ 國. 系. 學. 4.3.2. 文. 政治大. 資. 4.2. 資. Ch. ecanvas ngchi. i n U. v. ID. 文資. 資資. 45. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(56) 文 [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-. sit. y. Nat. chies,” 1998.. al. er. io. [7] N. Kong, J. Heer, and M. Agrawala, “Perceptual guidelines for creating rectangular. v. n. treemaps,” IEEE transactions on visualization and computer graphics, vol. 16, no. 6, pp. 990–998, 2010.. Ch. engchi. i n U. [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.. 46. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(57) [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, Association, 2014. 政治The Eurographics 大. R. Borgo, R. Maciejewski, and I. Viola, Eds.. 立. [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,”. y. Nat. n. al. er. io. 2017.. sit. IEEE transactions on visualization and computer graphics, vol. 23, no. 1, pp. 361–370,. Ch. i n U. v. [15] J. Fuchs, P. Isenberg, A. Bezerianos, and D. Keim, “A systematic review of experimen-. engchi. 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 applications.” 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.. 47. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(58) [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.. 政治大 on visualization and computer graphics, vol. 17, no. 12, pp. 2301–2309, 2011. 立. [22] M. Bostock, V. Ogievetsky, and J. Heer, “D3 data-driven documents,” IEEE transactions. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 48. i n U. v. DOI:10.6814/THE.NCCU.CS.019.2018.B02.

(59)