AttentionFlow: Visualising Influence in Networks of Time Series
Minjeong Shin, Alasdair Tran, Siqi Wu, Alexander Mathews, Rong Wang, Georgiana Lyall, Lexing Xie
AAttentionFlow: Visualising Influence in Networks of Time Series
Minjeong Shin ∗ , Alasdair Tran , ∗ , Siqi Wu ∗ Alexander Mathews , Rong Wang , Georgiana Lyall , Lexing Xie , Australian National University Data61, CSIRO{minjeong.shin,alasdair.tran,siqi.wu,alex.mathews,rong.wang,u6431454,lexing.xie}@anu.edu.au (a) (b)(c) (f)(d)(e) Q (g)P (h) (k)
Figure 1: AttentionFlow visualises the attention series of an entity and the influence flowing over its ego network. The meta-data view (a) provides high-level information about the ego node (g). The attention chart (b) presents two attention series ofthe ego and the hovered alter node, while the ego network (c) highlights the incoming and outgoing influence between them.Users can filter the alter nodes by setting the influence threshold (d), select a sorting criterion for the vertical axis (e), anddefine an observation window using the time slider (f). In this snapshot, we observe two spikes in the attention series of themusic video
Rolling in the Deep by Adele. The first spike (P) is related to the Grammy Awards of that year, while the second(Q) is due to the release of Adele’s new song
Hello . The remaining components are described in Section 4 and 5.
ABSTRACT
The collective attention on online items such as web pages, searchterms, and videos reflects trends that are of social, cultural, andeconomic interest. Moreover, attention trends of different itemsexhibit mutual influence via mechanisms such as hyperlinks orrecommendations. Many visualisation tools exist for time series,network evolution, or network influence; however, few systemsconnect all three. In this work, we present AttentionFlow, a newsystem to visualise networks of time series and the dynamic influ-ence they have on one another. Centred around an ego node, oursystem simultaneously presents the time series on each node usingtwo visual encodings: a tree ring for an overview and a line chartfor details. AttentionFlow supports interactions such as overlay-ing time series of influence, and filtering neighbours by time orflux. We demonstrate AttentionFlow using two real-world datasets, * These authors contributed equally to this work.Permission to make digital or hard copies of part or all of this work for personal orclassroom use is granted without fee provided that copies are not made or distributedfor profit or commercial advantage and that copies bear this notice and the full citationon the first page. Copyrights for third-party components of this work must be honored.For all other uses, contact the owner/author(s).
WSDM ’21, March 8–12, 2021, Virtual Event, Israel © 2021 Copyright held by the owner/author(s).ACM ISBN 978-1-4503-8297-7/21/03.https://doi.org/10.1145/3437963.3441703
VevoMusic and WikiTraffic. We show that attention spikes insongs can be explained by external events such as major awards, orchanges in the network such as the release of a new song. Separatecase studies also demonstrate how an artist’s influence changesover their career, and that correlated Wikipedia traffic is driven bycultural interests. More broadly, AttentionFlow can be generalisedto visualise networks of time series on physical infrastructuressuch as road networks, or natural phenomena such as weather andgeological measurements.
CCS CONCEPTS • Human-centered computing → Visualization systems andtools ; Visual analytics . KEYWORDS
Networks of time series; Influence visualisation; Ego network
ACM Reference Format:
Minjeong Shin, Alasdair Tran, Siqi Wu, Alexander Mathews, Rong Wang,Georgiana Lyall, Lexing Xie. 2021. AttentionFlow: Visualising Influencein Networks of Time Series. In the Proceedings of the Fourteenth ACMInternational Conference on Web Search and Data Mining (WSDM ’21),March 8–12, 2021, Virtual Event, Israel. ACM, New York, NY, USA, 4 pages.https://doi.org/10.1145/3437963.3441703 a r X i v : . [ c s . S I] F e b INTRODUCTION
Attention series measure user interests towards an online item overtime, such as visits to a website, posts in a community, and searcheson a topic. When multiple attention series are related, they can ex-ert mutual influence on one another, forming an influence network.For example, traffic on a web page influences linked pages [3], postsin an online community influences related communities [5], andthe degree to which a social group accepts an idea influences othersocial groups [9]. By visualising influence in networks of attentionseries, we can separate exogenous and endogenous influences, iden-tify attention series that have substantial influence, and understandthe network response to external shocks.One line of related works aims to visualise snapshots of influ-ence between entities. IdeaFlow [9] visualises how ideas flow withinand across multiple social groups by modelling the lead-lag rela-tionships in text clusters. Situ [3] combines flow visualisation andanomaly detection to identify suspicious network traffic. Shin et al.[7] propose a flower-like metaphor for visualising the intellectualinfluence between academic entities. These methods assume thenetwork to be static and focus on visualising events or flow ratherthan the complete time series. Another line of works focuses onvisualising network evolution. To visualise a scholar’s temporal col-laboration graph, egoLines [12] chooses a subway map metaphor,while egoSlider [11] uses a series of juxtaposed glyphs. Unlike ourwork, the networks in these visualisations are presented as mul-tiple snapshots and nodes do not represent individual time series.Moreover, several approaches have been developed for visualisingmultiple time series, including stacking [4] and clustering [6]. Baket al. [1] propose Growth Ring Maps where time series are pre-sented as circles with radially varying colours. By contrast, we takeon the challenge of simultaneously visualising multiple time se-ries, the degree of influence between these series, and the dynamicnetwork structure on which this influence acts. To the best of ourknowledge, no research has addressed these three angles at once.We develop AttentionFlow, a new system for visualising thedynamic influence flow in an ego network with time-series nodes. Itis so named to reflect the common use case of visualising time seriesof user attention in online networks. AttentionFlow visualises howthe time series of a focal node (the ego) and its direct neighbours(the alters) influence each other. For each node, we encode the timeseries in two visual styles. A tree ring encoding allows many timeseries to be compared simultaneously which is useful for identifyingcommon patterns and interesting dynamics. A line chart encodingallows a detailed comparison of two time series. The chart alsocontains a set of markers, each of which corresponds to a real-lifeevent that could have influenced the time series. The ego networkis presented as a node-link diagram which shares the time axis withthe line chart, allowing network structure changes to be visuallycompared with the time series. The position of an alter node on thetime axis indicates when it starts to influence the ego node. Thetwo main interactions are: (1) hovering over an alter node to showthe detailed line chart for that node, and (2) moving the time sliderto select an observation window. As the window shifts, the egonetwork structure changes, showing or removing nodes dependingon their influence flows and the dynamic graph structure. AttentionFlow is preloaded with two large-scale networkedtime series datasets: a network of 31K music videos induced bythe YouTube recommender system [10] and a network of 366KWikipedia web pages induced by hyperlinks [8]. Our case studiesdemonstrate that AttentionFlow helps explain sudden surges in theattention series by visualising both external and internal influences.The main contributions of this work are: • AttentionFlow, a new interactive web app for visualising a dy-namic network of mutually influencing time series . • A novel combination of visual elements that simultaneously dis-play the time series of nodes, the time-varying network structure,and the magnitude of influence flowing along edges. • Case studies that use AttentionFlow to interpret view count timeseries from YouTube and Wikipedia networks.
AttentionFlow is a general system for visualising multiple timeseries with a network structure. Each node in the network consistsof a univariate time series and other semantic metadata. Directededges model the flow of influence from source nodes to target nodes,with a weights quantifying the strength of influence. The networkcan be dynamic: edges can appear and disappear and edge weightscan vary over time.We use AttentionFlow to visualise two datasets: VevoMusic [10],a YouTube recommendation network of music videos; and Wiki-Traffic [8], a hyperlink network of Wikipedia articles. In Vevo-Music, there are 31K nodes, each containing daily view counts fora music video from its creation date to November 2018. If a video’srecommendation list contains the link of another video, we add anedge from the former to the latter. This results in 45K edges. Wecreate the artist-to-artist network by aggregating all videos fromeach of the 2,928 artists. In WikiTraffic, we have 366K pages and22M edges with traffic data from July 2015 to June 2020. A directededge is added if a page appears as a hyperlink on another page.Edge weights, which represents the influence strength of thesource node on the target node, are estimated by different methodsin VevoMusic and WikiTraffic. For VevoMusic, Wu et al. [10]use ARNet, a regression model that learns edge-specific weightson the network over time. The displayed edge strength correspondto the estimated number of daily views flowing on the edge. ForWikiTraffic, Tran et al. [8] use the multi-head attention scoresfrom the neural forecasting model RADflow as a proxy for influ-ence. Both models empirically outperform previous state-of-the-artmethods, thus giving credence to the usefulness of these weights.
AttentionFlow focuses on the ego network rather than the entirenetwork in order to show how the temporal changes in attentioncorrelate with the influence around an ego node. We introduce tworepresentations of nodes: an attention chart and a tree ring.The attention chart is a line chart for visualising the amount ofattention an ego attracts over time and providing detailed temporalpatterns such as peaks and valleys. It also allows users to comparetrends of the ego with an alter node by overlaying their attentiontime series on the same panel. In Figure 1b, the attention chart of an The demo is available at https://attentionflow.ml. a) Dec 2009 — Jun 2015 (b) Dec 2009 — Jul 2017 (c) Jul 2015 — Jul 2017
Mindless Behavior will..i.am
NewNew
Figure 2: Artist network page for Justin Bieber, showing neighbouring artists with more than 1% influence. Nodes are sortedalong the vertical axis by their total views. We show three network snapshots: (a) Dec 2009 – Jun 2015, before Bieber published
Sorry ; (b) Dec 2009 – Jul 2017, two years after it was published; and (c) Jul 2015 – Jul 2017, non-overlapping two years after (a). alter (pink) is overlaid on top of the chart of the ego (blue), showingthat
Someone Like You has a similar attention trend to
Rolling inthe Deep . We provide a time slider to select an observation window,which plays an important role in determining the sizes and coloursof the elements described below.The tree ring provides a coarse view of the attention series andallows us to quickly compare the temporal trends of all nodesin an ego network. We split the lifetime of a node into calendaryears (though other time units could also be used) each of which isassigned a colour. The size of the whole node denotes the magnitudeof attention within the observation window. The size of each ringrepresents the amount of attention within the corresponding year.In Figure 1,
Rolling in the Deep has a timeline spanning over 8 years(2010–2017), hence its node has 8 rings, with the innermost ringmapping to the attention in 2010 and outermost ring mapping to2017. Meanwhile,
Hello has a shorter timeline of 3 years. It hasthe biggest ring in the centre while the peripheral rings are muchthinner, indicating that it has an attention spike immediately afterits release and receives comparatively little attention in later years.The time-aligned ego network emphasises the correlation betweentemporal changes in the attention and influences from the alternodes. It is drawn below the attention chart so that they sharethe same timeline. We define the influencing time of a node to bethe time when the edge connecting it to the ego has a normalisedinfluence above a set threshold. We adapt the timeline networklayout introduced in EdgeMaps [2] to the setting where the alternodes are placed according to their influencing times. When theinfluence threshold is set to zero, the influencing time becomeseither the start time of the observation window or the creationtime of the node, whichever comes later. Increasing the influencethreshold will either move an alter node to the right, or hide it if itsinfluence falls below the threshold. The user can interactively movethe ego node along the timeline, defining the right boundary of theobservation window (Figure 2). Edge width is calculated based onthe amount of influence flowing from the source node to the targetnode, normalised by the maximum influence in the ego network.Figure 2 (a–b) shows an example network in two different timeperiods. In the earlier period (a), the ego node,
Justin Bieber , con-nects to five alter nodes because their edges have influence abovethe threshold. After two years (b),
Mindless Behavior and will.i.am are no longer influential to the ego and thus disappear. Meanwhile,two new alter nodes,
Ariana Grande and
Fifth Harmony , appear in the network. Time-varying attributes such as node attention (nodesize and vertical position) and the amount of influence (edge width)are visually changing from (a) to (b).
We implement AttentionFlow to allow users to search for entities ofinterest, and explore their temporal trends by interactively changingthe time periods and thresholds. The frontend is rendered in D3.jsand the backend uses the Neo4j graph database. Users can accessthe visualisation of an entity by searching for its name (e.g. thevideo name or the artist name), or by clicking on the correspondingnode in the ego network of another entity.Figure 1 presents the main visualisation layout for
Rolling inthe Deep (g), a popular music video from Adele. It consists of threecomponents: a metadata view, an attention chart, and a time-alignedego network. The metadata view (a) shows an ego’s attributes suchas the title, the embedded snippet, the creation time, and the genres.Below the description of the attributes, two controllers can be usedto alter the network layout. The influence slider (d) sets the influencethreshold, defaulting to 1%. The drop-down box (e) provides fivecriteria for sorting nodes along the vertical axis: force-directed(default), total views, incoming views, outgoing views, or categories.The attention chart (b) visualises the attention series of an ego (blue)and a hovered alter node (pink). The period between the alter’screation and influencing time is coloured in grey, indicating the timethat it takes to reach the chosen influence threshold relative to theego node. A time slider (f) is located on the horizontal axis to selectan observation window. The left handle changes the start time ofthe observation, while the right handle changes the position ofthe ego (g). The periods outside the selected time range are greyedout. The time-aligned ego network (c) changes dynamically whenusers interact with the time slider and the influence slider. Whenhovering over an alter, the edges between the alter and the ego arehighlighted, the alter’s attention series is revealed on the attentionchart, and an information card (h) pops up.
AttentionFlow can incorporate domain-specific datasets to helpusers interpret trend changes. It draws the event indicators on theattention chart as shown in Figure 1(k). For example, AttentionFlowuses a list curated from Wikipedia to show music awards related toevoMusic.
Rolling in the Deep received a surge of attention at thebeginning of 2012 (Figure 1P). Hovering on the event indicator nearthe peak tells us that the 54th Annual Grammy Awards happenedon the day before and Adele received three Grammys that year. Thealignment between the ego network and the attention chart helpsus see the correlated attention spikes easily. At the end of 2015(Figure 1Q),
Rolling in the Deep received another sudden surge aftera long period of stable attention. Examining the network view, the
Hello node is aligned with the time of the spike. One can hover over
Hello to have the video’s time series added to the attention chart. Athick edge pointing from
Hello to Rolling in the Deep is highlighted,suggesting that the latter regained popularity in late 2015 because
Hello was released. Furthermore, Adele’s other video,
Someone LikeYou , exhibits a similar tree ring to the ego but with thick edges inboth directions. By hovering over it, we discover that
Someone LikeYou has an almost identical attention series to
Rolling in the Deep ,with both benefiting from the release of
Hello .AttentionFlow also provides the same visual layout for the artistnetwork, which helps us track both the attention an artist receiveson YouTube and the evolution of their influence network. Figure 2presents three time periods of
Justin Bieber surrounding the releaseof his biggest hit song
Sorry in 2015: (a) 2009-15, the six years before
Sorry , (b) 2009-17 that includes two years post
Sorry , and (c) 2015-17, the two years after
Sorry . We set the influence threshold to 1%and sort the vertical axis by total view counts The publication of
Sorry was a big turning point as he gained 9.2 billion views withintwo years of
Sorry ’s release. The visualisation reveals (perhapssurprisingly) that the three American Music Awards in 2010, 2012,and 2016 did not have much affect on the attention trends. In (a), fiveartists influenced Bieber. Two years after
Sorry was released (b), twoartists disappeared and are replaced by two more popular artists.The remaining alters and the ego node moved upwards as theygained more views from (a) to (b). Bieber gained more views thanTaylor Swift in these two years. Comparing the non-overlappingperiods of (a) and (c) tells us that Bieber gained more attention inthe later two years than the previous six years. As he received moreinfluence from other artists in the later periods, Bieber’s influenceon his own videos decreases as shown by a thinner self-loop.
AttentionFlow can also visualise traffic flows between web pages.Figure 3 presents the attention chart and the time-aligned egonetwork of
Adam Driver ’s Wikipedia page, at an influence thresholdof 2%. We use film award data from IMDb to draw events related tothe ego.
Adam Driver made his debut in 2010 but did not becomewidely recognised until he was cast as
Kylo Ren in Star Wars: TheForce Awakens in 2015. The attention series of
Adam Driver (blue) ishighly correlated with the recent Star Wars films, getting a surge intraffic after the release of
The Force Awakens in 2015,
The Last Jedi in 2017, and
The Rise of Skywalker in 2019. In particular, the thickedges between Driver and
The Force Awakens indicates substantialtraffic flows between these two pages. The page of
Kylo Ren showsa similar attention series (pink) to
Adam Driver , especially before2018. However, Driver received a higher number of page views overtime as he gained more popularity from films outside the Star Warsfranchise. Driver’s attention chart also shows more peaks than
Kylo
Figure 3: AttentionFlow visualising the attention series ofthe Wikipedia page for
Adam Driver , an actor who gainedwider recognition for playing
Kylo Ren in the
Star Wars se-ries. The influence threshold is set to 2%.
Ren , as these correspond not only to releases of Star Wars films butalso to the release of his other films and to his award nominations.
AttentionFlow is a system for visualising networks of time series,with a novel combination of multiple interactive visual elementsincluding line charts, tree rings, and dynamic ego networks. Wepresent three case studies to explore the influence networks ofvideos and artists on YouTube, as well as Wikipedia traffic of culturalentities. The system allows us to better understand the effects of newnodes, the effects of external events, and to interpret the factorsaffecting an artist’s career. Future work includes deploying thissystem to networks of time series beyond online attention, andimproving network layout to reduce node overlap while preservingthe notion of time.
Acknowledgements
This research is supported in part by theAustralian Research Council Project DP180101985.
REFERENCES [1] Peter Bak, Florian Mansmann, Halldor Janetzko, and Daniel Keim. 2009. Spa-tiotemporal analysis of sensor logs using growth ring maps.
IEEE TVCG (2009).[2] Marian Dörk, Sheelagh Carpendale, and Carey Williamson. 2011. Edgemaps:Visualizing explicit and implicit relations. In
VDA .[3] John R Goodall, Eric D Ragan, Chad A Steed, Joel W Reed, G David Richardson,Kelly MT Huffer, Robert A Bridges, and Jason A Laska. 2018. Situ: Identifyingand explaining suspicious behavior in networks.
IEEE TVCG (2018).[4] Susan Havre, Beth Hetzler, and Lucy Nowell. 2000. ThemeRiver: Visualizingtheme changes over time. In
IEEE InfoVIS .[5] Srijan Kumar, William L Hamilton, Jure Leskovec, and Dan Jurafsky. 2018. Com-munity interaction and conflict on the web. In
WWW .[6] Bum Chul Kwon, Ben Eysenbach, Janu Verma, Kenney Ng, Christopher De Filippi,Walter F Stewart, and Adam Perer. 2017. Clustervision: Visual supervision ofunsupervised clustering.
IEEE TVCG (2017).[7] Minjeong Shin, Alexander Soen, Benjamin T Readshaw, Stephen M Blackburn,Mitchell Whitelaw, and Lexing Xie. 2019. Influence flowers of academic entities.In
IEEE VAST .[8] Alasdair Tran, Alexander Mathews, Cheng Soon Ong, and Lexing Xie. 2021.Radflow: A recurrent, aggregated, and decomposable model for networks of timeseries. In
WWW .[9] Xiting Wang, Shixia Liu, Yang Chen, Tai-Quan Peng, Jing Su, Jing Yang, andBaining Guo. 2016. How ideas flow across multiple social groups. In
IEEE VAST .[10] Siqi Wu, Marian-Andrei Rizoiu, and Lexing Xie. 2019. Estimating attention flowin online video networks.
ACM CSCW (2019).[11] Yanhong Wu, Naveen Pitipornvivat, Jian Zhao, Sixiao Yang, Guowei Huang, andHuamin Qu. 2015. egoSlider: Visual analysis of egocentric network evolution.
IEEE TVCG (2015).[12] Jian Zhao, Michael Glueck, Fanny Chevalier, Yanhong Wu, and Azam Khan. 2016.Egocentric analysis of dynamic networks with egolines. In