MySocialTree: Browsing the Facebook feed using hierarchies

John Alexis Guerra GómezHCIL & CATT Lab

Computer Science DepartmentUniversity of Marylandjguerrag@cs.umd.edu

Abstract

Twitter and Facebook share one characteristic in com-mon, they both change rapidly, and every time is moredifficult for its users to keep up with all the updates andtweets post in their feeds, and to filter out the most rele-vant ones. I present MySocialTree a novel tool for nav-igating users feeds using hierarchical structures. Thispaper describes the goals of the project and the chal-lenges faced in its development. An initial implementa-tion of the tool was developed and deployed on http://

mysocialtree.appspot.com, and an exploratory usersatisfaction survey suggests that the tool can be easy tounderstand and effective at finding the most relevant postsin the feed.

Introduction

MySocialTree is a Facebook feed navigation tool usinghierarchies. The goal of this project is to build a webapplication that displays the updates in the user’s Face-book feed, by exploring it using a user defined hierar-chical criteria. A common example of this criteria (thatwill be used as default setting in the application) wouldbe to classify the feed by poster’s membership to theuser’s lists (Close Friends, Family, School, etc) and thetype of post (Photo, Status Update, Video, Link, Activ-ity, etc). By grouping the posts in a tree, users can findthe posts they care the most by clicking on the nodes ofthe tree, that answers queries like "show me photo up-dates from my close friends". Moreover, since the tree

will show the positive and relative amount of change ineach one of its nodes, users should be able to identifytrends like "there are a lot of status updates from my uni-versity friends". This paper describes the design and im-plementation of MySocialTree, as well as present a smalluser survey that seems to suggest that it is an effectiveand easy to understand tool for finding relevant posts in auser’s feed. A running version of the tool can be found at:http://mysocialtree.appspot.com.

MySocialTree is an application for social networks ofour work on TreeVersity [18, 19], a technique for com-paring tree structures by topological differences and nodevalue changes. This project was developed as a classproject for the Fall 2011 CMSC838C Social Computingcourse of the University of Maryland, and given the timeconstraints, the initial implementation of the tool doesn’tinclude the tree comparison component, however this isdescribed and designed in the paper, and is part of the fu-ture work of the project.

The rest of the document includes a description of thestate of the art in research on tree comparison, then MySo-cialTree design and implementation is described and fi-nally the results of an exploratory user study on the toolare analyzed.

Related WorkThis section focuses on research that has been done oncomparing, visualizing and analyzing multiple tree struc-tures. There is substantial work on single tree struc-tures, but since they are not relevant to the objective

1

of comparison, it won’t be described in this document.For a surveys of single tree visualizations please refer to[8, 21, 17, 33, 24].

The related work has been categorized in three areasaccording to each project’s focus: topological compari-son, node value comparisons and algorithmically orientedapproaches.

Topological ComparisonMost of the tree comparison work has been done on com-paring topological changes between tree structures. Thismight have been influenced by the well-known problemof comparing taxonomies of species. TreeJuxtaposer byMunzer et al.[30] is one of the best examples, present-ing an efficient algorithm for comparing hierarchies. Ituses a node link representation with side-by-side com-parison and a focus+context technique with guaranteedvisibility. TreeJuxtaposer scales well with the number ofnodes. Alternatively, Graham et al.’s [15] Icicle-like [25]representation and Bremm et al. [11] node-link visual-ization, scale to a large number of trees by dividing thescreen space into small interconnected views of the com-pared trees, but are limited by the screen size. In laterwork [16] Graham addresses this by switching from thesmall multiples to an aggregated representation using di-rected acyclic graphs (DAG). Others have used the con-cept of aggregation of multiple trees in one view, startingwith Furnas et al. [13] who proposed the concept in 1994and CandidTree[26] that uses a node-link representationthat uses color, shapes and dotted lines to represent uncer-tainty. Amenta and Klingner’s TreeSet [6] takes a differ-ent approach to comparing a large number of taxonomiesby calculating a bi-dimensional metric representing eachtree and plotting them in a scatter plot. Card et al.’s Time-Tree [12] explored the concept of time changing hierar-chies, combining SpaceTrees [32] with timeline to ana-lyze hierarchies that evolve with the time.

The InfoVis2003 contest [20] promoted the develop-ment of projects on topological tree comparison. Someof the winning submissions presented innovative solu-tions for the problem, such as TreeJuxtaposer [30], al-ready described. Others include Zoomology [22] whichused radial representations combined with zooming inter-faces, InfoZoom [34] which used condensed side-by-sidetables, EVAT [7] with radial side-by-side comparisons

and TaxoNote [29] with a condensed Microsoft WindowsExplorer-like representation. However, many of thesepromising projects did not evolve beyond the competi-tion’s two page submission requirement.

Finally other approaches use zooming interfaces suchas MoireTrees [28], which allows navigation of multi hi-erarchies (different trees that categorize a shared group ofleaf nodes) using zooming and radial displays, and Dou-bleTree [31], that uses two connected, side-by-side Space-Trees [32] to highlight topological differences betweentaxonomies.

Despite the substantial work on topological differencesbetween trees, to the best of our knowledge, none of thesesolutions addresses the problem of comparing changes innode values. TreeVersity takes the task of comparison treestructures one step further, by looking also at node valuechanges. However more complex topological comparisonfeatures already supported by these projects, like findingmoved nodes and subtrees, have not yet been addressedin the TreeVersity design. More specifically, TreeVersityperforms topological comparison by identifying createdand removed nodes, reveals changes in the node values,tackling a richer set of problems than those that are re-stricted to topological differences only.

Node Values Comparison

The work on comparing node values is more limited, usu-ally employing treemaps. The original treemap tool [23]allowed the display of changing values on the hierarchybut it was never developed for comparison. AnimatedTreeMaps [14] represented changes in the nodes’ attributevalues using animation, focusing on stabilizing the layout.Both projects rely on user’s memory to keep track of theamount of change and the location of the nodes whichcan be taxing and confusing. TreeVersity in contrast com-bines side-by-side comparison with explicit differencesvisualizations that allow users to navigate differences ina more explicit way. SmartMoney’s Map of the Market[38] represents stock market price changes using coloredtreemaps1. This approach has proven to be popular, how-ever it only presents relative differences in the leaf nodeswithout topological changes, or what was called problemType 1 in the introduction.

1http://www.smartmoney.com/map-of-the-market/

2

Figure 1: Contrast TreeMaps uses color and differentshading techniques to encode node value and structuralchanges. The image shows the differences in NBAplayer’s points per game between two seasons, catego-rized by teams and conferences. The paper explains: "Foran item, if both corners are in the blue to black range, theplayer was in the same team for both seasons. If the colorfor the 02-03 season is pine green, it means the playertransferred to this team in the second season. If the colorfor the 02-03 season is dark yellow, the player joined theNBA in the second season".

Finally, the Contrast TreeMaps [37] represents the onlyproject that, to the best of our knowledge, combines sometopological differences and changes in node values. Itmodified the traditional treemap technique by splittingeach of the nodes’ rectangular shapes into two trianglesto represent value changes and structural differences, asseen in Figure 1. Compared to the Contrast TreeMaps,TreeVersity covers a broader set of problems (problemsType 3 and 4), uses a codification scheme that I believeis easier to comprehend, and uses a mixed representationapproach that allows the navigation of the differences in amore direct way.

Algorithmically orientedThe final approach for tree comparison makes use of treemetrics, which usually are algorithms that calculate dis-tances between two or more trees. These metrics can beclassified by the type of comparison they make, and Bille[9] presents an excellent survey of them. According to

him the most important classes of metrics are Edit Dis-tance, Alignment Distance and Inclusion (subtrees). Inthis work he describes efficient algorithms for each of thisareas that could be used to compare many trees at once.

Another common related strategy for analyzing mul-tiple trees is the consensus tree [6, 36, 27, 35]. This atechnique used in Phylogenetic analysis for summarizingmany trees into one. Future versions of TreeVersity willinclude Bille’s metrics and the consensus tree strategy.

MySocialTreeMySocialTree is a new approach for navigating a user’ssocial feed using trees. It has two main components,first a categorization technique that organizes the posts asnodes on a tree, and second a visualization tool to displaythe nodes highlighting the number of posts or the changeagainst the average rate of posts per unit of time. In thissection I describe in more detail those components:

Encoding the feed as a treeMySocialTree uses trees to organize a user’s social feed.These trees are created by categorizing the items in thefeed (Posts or Tweets) using classifiers according to cer-tain user criteria, like friend’s lists and type of Facebook’sposts. A classifier is a function C(p) that maps each postto a number of 1 or more classes. The user selects the de-sired criteria by choosing and ordering a list of classifiers,like Type of Post, List membership of the poster and Lo-cation. Being p a post. The user criteria is therefore justan ordered list of classifiers {C1,C2,...,Cn}. The initialimplementation of MySocialTree uses the fixed criteria{ListMembershipO f Poster, TypeO f Post}, future imple-mentations should include an user interface for selectingand ordering the classifiers.

Currently MySocialTree represents only the tree cor-respondent to all the posts in the user feed for a certainperiod of time Tcount , however the final objective of thisproject is to display the change of number posts comparedto the average rate Tdi f f = Tcount−Tavg. Let’s explain thisin more detail with an example: let’s say than a user wantto see her Tdi f f for the last hour∆t = 1hr, then the applica-tion calculate Tavg(∆t, t0, t2), the tree of the average num-ber of posts in each of the categories of the hierarchy for

3

the time window ∆t in the period of time between toand t2,where toand t2 are usually the time frame of the total his-tory of posts stored in the database for the user, or a con-stant frame bigger than ∆t (e.g. if ∆t = 1hour then t2− t0can be 1day). Then the application calculates Tcount(t1, t2)(The tree of the counts of the number of posts in each ofthe categories of the hierarchy for the period of time t1tot2, where t2−t1 = ∆t). MySocialDiffTree is the differencebetween Tdi f f (∆t, t0, t1, t2) = Tcount(t1, t2)−Tavg(∆t, t0, t2),where the difference is calculated node to node. Figure 2shows the timeline used for the example.

For an example using numbers, say that we want to cal-culate MySocialTree for ∆t = 1hour. Then we need tocount the number of posts in the last hour (Tcount(t1, t2) :t2 = now, t1 = 1hour ago) for each category in the hier-archy, say is 15 Friends Additions for my Close Friendsin USA. Now, to compare to the history we calculate theaverage number of posts in that same category, in peri-ods of time of 1 hour for the last day (Tavg(∆t, t0, t2) t0 =1dayago), say it is 2. Then in difference MySocial-Tree there is going to be a node with path /USA/CloseFriends/Friends Additions with value 15− 1 = 14 thatshows an increment of 1,400% as highlighted in the Fig-ure 3.

Visualizing the treeMySocialTree visualize the trees using TreeVersity[19,18], an interactive visualization technique for tree com-parison. TreeVersity can be used to visualize topologicalchanges and node value differences between two versionsof a tree. It uses a modified node-link representation en-hanced with an special glyph called The Bullet that en-codes the cardinality of the change, and the amount ofchange. The shape’s direction represents the cardinalityof the change: left for negative and right for positive in thehorizontal layout, and down for negative and up for pos-itive in the vertical layout. The bullet size represent theamount of change. Color is used to encode both the cardi-nality and amount of change in the nodes. To accommo-date for color blindness users can select from preset colorpalettes that are binned in five steps to ease differentia-tion. Gray rectangles represent nodes where the amountof change is zero. The bullet can represent also topologi-cal differences by means of different border colors on thenodes, but this feature was not used in MySocialTree. By

default both size and color are redundantly encoding theabsolute amount of change (e.g. the amount in dollarsin the case of a budget), but users can switch to relativechange (i.e. percent change), or assign color and size todifferent characterization of the changes.

Each node in the tree displays its current name, thatis the combination of the classes assigned by the clas-sifiers in the hierarchy criteria (e.g. the node /CloseFriends/Photos contains all of the photos posted by usersin the Close Friends list). The label also includes the num-ber of posts that fell into that node. Figure 5 shows ascreenshot of the initial implementation of MySocialTreethat uses Tcount only (therefore no negative values are dis-played), the mockup on Figure 3 shows the concept usingTdi f f .

ArchitectureMySocialTree was developed using a combination oftools that include: the Google App Engine[5], the Face-book Developers Platform[3] and the Python SDK forit[4] with some modifications2, the Data Driven Docu-ment framework D3[2, 10], and Bootstrap from Twitter[1]. Putting all of this pieces to work together was a bigtechnical challenge, but each one of them gave the appli-cation different qualities. The whole application was builtfor the Google App Engine, which gave it the scalabil-ity and robustness of Google’s technologies. The directconnection with the Facebook Platform, allows users toaccess their feeds directly without the need of external im-porters. The use of D3 allowed the creation of the tree vi-sualization and most of the JavaScript interactions, whileusing open web standards that offers portability. And fi-nally Bootstrap from Twitter gave it a nice look and feelfrom the beginning.

A running version of the application should be avail-able on http://mysocialtree.appspot.com. Figure4 presents an overview of the architecture of the applica-tion. The user is faced with a main view with one mainuse case show the MySocialTree, depending of the state ofthe system this can trigger three actions showTree, show-Posts and crawlPosts. The crawlPosts actions triggers the

2The original version of the Python SDK contained some bugs thatwere corrected. Also, in the middle of this project Facebook enforcedOAuth login only for the apps, and since this feature wasn’t available inthe original SDK, the functionality was added

4

Figure 2: Timeline used for the example of how to calculate MySocialDiffTree

connection to Facebook to obtain the latest posts in thefeed, that are later stored in a table. This table is used todisplay the feed to the user and to calculate the trees usingthe current hierarchy (initially Facebook Lists then PostsType). The trees are then stored in another table that iscrawled later for the tree comparison and the final displayof the trees.

EvaluationMySocialTree included a small survey requesting feed-back from users, that with the following questions:

• q1: How easy is for you to find the posts that matterthe most to you on the traditional Facebook Feed?

• q2: How useful do you think MySocialTree can befor organizing and browsing your Facebook posts?

• q3: How easy was it for you to understand and navi-gate the tree?

• q4: How likely would you be of using this MySocial-Tree in the future to navigate your Facebook Feed?

• q5: Any other comments, suggestions, bugs?

The answers were rated in a 7 point Likert scale, withthe answers ranging from 1: Very difficult/Not useful/Notlikely to 7: Very easy/Very useful/Very Likely. The surveywas completed by 15 of the 47 users of the application

between December 9th and 13th 2011, their responses aresummarized in the Figure 6. According to the responses,q1 seems to indicate that users find it difficult to iden-tify the important posts in the traditional Facebook newsfeed (75% of the responses where less than 5, betweensomehow easy and neutral). According to q2 and q3 mostusers (more than 75%) found MySocialTree useful (onlyone person responded less than 4) and easy to understand,while on q4 more than 50% of the users expressed thatthey would be likely to use the application in the future.

No personal information was collected from the par-ticipants, however since the announcement of availabil-ity of the application and the call for participation in thesurvey was made trough the author’s personal Facebookpage, and different university email lists, most of the par-ticipants can be assumed to directly know the author andtherefore might have some type of bias in favor of thiswork.

The survey also included an open ended question, re-questing more feedback and comments. This questionprove to very informative, because participants use it toexpress experience with MySocialTree in a more openway. The responses for this question were overall posi-tive and constructive. Participants submitted all sorts ofcomments, ranging from the very excited and supportiveof MySocialTree like: "Great idea!", "...it was *really*nice to have that news feed grouped in sensible way! Itwas fantastic to be able to tease out the posts..." and "As avisualization, I think MySocialTree is neat and pretty. It is

5

Figure 3: MySocialTree idea mockup

6

Figure 4: MySocialTree Architecture

7

Figure 5: MySocialTree Screenshot

8

●●

● ●

q1 q2 q3 q4

12

34

56

7

MySocialTree User Feedback Survey

Questions

1: V

ery

diffi

cult/

Not

use

ful/N

ot li

kely

7

: Ver

y ea

sy/V

ery

usef

ul/V

ery

likel

y

Figure 6: MySocialTree user survey responses. Includesthe feedback of 15 participants that responded four ques-tions about their perception of MySocialTree.

much more organized than a simple list of posts...", to thevery frustrated like: "...the category nodes were not usefulfor me.", "...I am not sure that it is offering me anythingdifferent than what Facebook already provides through itslist views." and "...I’m not sure exactly what this does :-P". The wide range of responses received helped in a wayto validate the results, and dismisses some of fear of thatthe participants might be biases towards the applications.

Conclusions

I present MySocialTree, a Facebook application thatenables users to navigate their news feed using hier-archies. An initial implementation of the applicationwas developed and deployed at http://mysocialtree.appspot.com and an exploratory user satisfaction surveysuggests that the tool can be easy to understand and effec-tive at finding the most relevant posts in the feed.

Future work include the implementation of the changein the number of posts compared to the average rate

(Tdi f f ) as well as more comprehensive evaluation.

AcknowledgementsI want to thank professor Ben Bederson for a very inter-esting class and for his insightful comments, CatherinePlaisant and Ben Shneiderman for their thoughtful advice,Audra Buck-Coleman for crafting beauty out of my rawapplications, and the CATT Lab and the Fulbright Scienceand Technology scholarship for funding my research.

References[1] Bootstrap, from twitter.

http://twitter.github.com/bootstrap/.

[2] d3.js. http://mbostock.github.com/d3/.

[3] Facebook developers HomePage.https://developers.facebook.com/.

[4] Facebook platform python SDK.https://github.com/facebook/python-sdk.

[5] Google app engine - google code.http://code.google.com/appengine/.

[6] N. Amenta and J. Klingner. Case study: Visualiz-ing sets of evolutionary trees. In Information Visual-ization, 2002. INFOVIS 2002. IEEE Symposium on,page 71–74, 2002.

[7] D. Auber, M. Delest, J. P Domenger, P. Ferraro, andR. Strandh. EVAT: environment for vizualisationand analysis of trees. IEEE InfoVis Poster Com-pendium, page 124–125, 2003.

[8] G. Battista. Algorithms for drawing graphs: anannotated bibliography. Computational Geometry,4(5):235–282, October 1994.

[9] Philip Bille. A survey on tree edit distance andrelated problems. Theoretical Computer Science,337(1-3):217–239, June 2005.

[10] Michael Bostock, Vadim Ogievetsky, and JeffreyHeer. D³ Data-Driven documents. IEEE

9

Transactions on Visualization and Computer Graph-ics, 17(12):2301–2309, December 2011.

[11] Sebastian Bremm, Tatiana von Landesberger, andKay Hamacher. Interactive visual comparison ofmultiple phylogenetic trees. http://www.gris.tu-darmstadt.de/research/vissearch/projects/ViPhy/,October 2011.

[12] Stuart K Card, Bongwon Suh, Bryan A Pendleton,Jeffrey Heer, and John W Bodnar. Timetree: explor-ing time changing hierarchies. In Proceedings of theIEEE Symposium on Visual Analytics Science andTechnology, volume 7, page 3–10. IEEE, 2006.

[13] George W Furnas and Jeff Zacks. Multitrees: en-riching and reusing hierarchical structure. In Pro-ceedings of the SIGCHI conference on Human fac-tors in computing systems: celebrating interdepen-dence, CHI ’94, page 330–336, New York, NY,USA, 1994. ACM. ACM ID: 191778.

[14] M. Ghoniem and J. D Fekete. Animating treemaps.In Proc. of 18th HCIL Symposium-Workshop onTreemap Implementations and Applications, 2001.

[15] M. Graham and J. Kennedy. Combining linking andfocusing techniques for a multiple hierarchy visu-alisation. In Information Visualisation, 2001. Pro-ceedings. Fifth International Conference on, page425–432, 2001.

[16] M. Graham and J. Kennedy. Exploring multipletrees through DAG representations. IEEE Transac-tions on Visualization and Computer Graphics, page1294–1301, 2007.

[17] M. Graham and J. Kennedy. A survey of multipletree visualisation. Information Visualization, 2009.

[18] J.A. Guerra Gómez, A. Buck-Coleman, C. Plaisant,and B. Shneiderman. TreeVersity: comparing treestructures by topology and node’s attributes differ-ences.

[19] J.A. Guerra Gómez, C. Plaisant, B. Shneiderman,and A. Buck-Coleman. Interactive visualizations forcomparing two trees with structure and node valuechanges.

[20] HCIL. Infovis benchmark -PairWise comparison of trees.http://www.cs.umd.edu/hcil/InfovisRepository/contest-2003/, August 2011.

[21] I. Herman, G. Melançon, and M.S. Marshall. Graphvisualization and navigation in information visual-ization: A survey. Visualization and ComputerGraphics, IEEE Transactions on, 6(1):24–43, 2000.

[22] J. Y Hong, J. D’Andries, M. Richman, and M. West-fall. Zoomology: comparing two large hierarchicaltrees. Poster Compendium of IEEE Information Vi-sualization, 2003.

[23] B. Johnson and B. Shneiderman. Tree-maps: Aspace-filling approach to the visualization of hierar-chical information structures. In Proceedings of theIEEE Conference on Visualization (Vis), pages 284– 291. IEEE, 1991.

[24] S. J\ürgensmann and H.J. Schulz. Poster: a visualsurvey of tree visualization. Proceedings of IEEE In-formation Visualization (Salt Lake City, USA, 2010),IEEE Press.

[25] J. B. Kruskal and J. M. Landwehr. Icicle plots: Bet-ter displays for hierarchical clustering. The Ameri-can Statistician, 37(2):162 – 168, 1983.

[26] B. Lee, G. G Robertson, M. Czerwinski, and C. SParr. CandidTree: visualizing structural uncertaintyin similar hierarchies. Information Visualization,6(3):233–246, 2007.

[27] T. Margush and F. R. McMorris. Consensusn-trees.Bulletin of Mathematical Biology, 43(2):239–244,March 1981.

[28] M. J Mohammadi-Aragh and T. J. Jankun-Kelly.MoireTrees: visualization and interaction for multi-hierarchical data. 2005.

[29] D. R Morse, N. Ytow, D. M. Roberts, and A. Sato.Comparison of multiple taxonomic hierarchies usingTaxoNote. In Compendium of Symposium on Infor-mation Visualization, page 126–127, 2003.

10

[30] Tamara Munzner, François Guimbretière, SerdarTasiran, Li Zhang, and Yunhong Zhou. Tree-Juxtaposer: scalable tree comparison using Fo-cus+Context with guaranteed visibility. In ACMSIGGRAPH 2003 Papers, pages 453–462, SanDiego, California, 2003. ACM.

[31] C. S Parr, B. Lee, D. Campbell, and B. B Bederson.Visualizations for taxonomic and phylogenetic trees.Bioinformatics, 20(17):2997, 2004.

[32] C. Plaisant, J. Grosjean, and B. B Bederson. Space-Tree: supporting exploration in large node link tree,design evolution and empirical evaluation. In Pro-ceedings of the IEEE Symposium on Information Vi-sualization, page 57–64. IEEE, 1998.

[33] Hans-Jorg Schulz, Steffen Hadlak, and HeidrunSchumann. Point-based tree representation: A newapproach for large hierarchies. In Proceedings of theIEEE Pacific Visualization Symposium, page 81–88.IEEE, April 2009.

[34] Michael Spenke. Visualization and interactive anal-ysis of blood parameters with InfoZoom. ArtificialIntelligence in Medicine, 22(2):159–172, May 2001.

[35] C. Stockham, L.-S. Wang, and T. Warnow. Statisti-cally based postprocessing of phylogenetic analysisby clustering. Bioinformatics, 18(Suppl 1):S285–S293, July 2002.

[36] J. L Thorley and R. D.M Page. RadCon: phyloge-netic tree comparison and consensus. Bioinformat-ics, 16(5):486, 2000.

[37] Ying Tu and Han-Wei Shen. Visualizing changesof hierarchical data using treemaps. Visualizationand Computer Graphics, IEEE Transactions on,13(6):1286–1293, 2007.

[38] M. Wattenberg. Visualizing the stock market. InCHI’99 extended abstracts on Human factors incomputing systems, page 188–189, 1999.

11