{"id":364481,"date":"2017-03-06T08:07:15","date_gmt":"2017-03-06T16:07:15","guid":{"rendered":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/?post_type=msr-project&#038;p=364481"},"modified":"2020-03-13T08:26:58","modified_gmt":"2020-03-13T15:26:58","slug":"visualizing-networks","status":"publish","type":"msr-project","link":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/project\/visualizing-networks\/","title":{"rendered":"Visualizing Networks"},"content":{"rendered":"<h2><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-369146 size-full\" src=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/complexnetworks-5.png\" width=\"1454\" height=\"343\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/complexnetworks-5.png 1454w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/complexnetworks-5-300x71.png 300w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/complexnetworks-5-768x181.png 768w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/complexnetworks-5-1024x242.png 1024w\" sizes=\"auto, (max-width: 1454px) 100vw, 1454px\" \/><\/h2>\n<p>This page explores algorithms, interfaces and prototypes we developed over the years for visualizing and interacting with complex networks.<\/p>\n<h2><\/h2>\n<h2><strong>Interactive Visual Exploration of Dynamic Networks<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-369098 alignleft\" src=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/NetworkCube-300x206.png\" alt=\"\" width=\"232\" height=\"159\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/NetworkCube-300x206.png 300w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/NetworkCube.png 697w\" sizes=\"auto, (max-width: 232px) 100vw, 232px\" \/>NetworkCube is a platform for network visualization, with a focus on dynamic networks. \u00a0It is a javascript library that provides: data import, a dynamic graph API, network visualizations and components, messages that synchronize views after user interaction, and, general functionalities, such as history, brushing+linking, search, coloring. NetworkCube runs locally in a browser; user data is stored solely in the browser\u2019s local storage. Messages keep views coordinated across iframes, tabs, and even windows.<\/p>\n<p>NetworkCube is a javascript library hosted on Github. <a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"https:\/\/github.com\/networkcube\/networkcube\" target=\"_blank\" rel=\"noopener noreferrer\">Use it & contribute<span class=\"sr-only\"> (opens in new tab)<\/span><\/a>!<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-369101 alignleft\" src=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/vistorian-300x271.png\" alt=\"\" width=\"233\" height=\"211\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/vistorian-300x271.png 300w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/vistorian.png 759w\" sizes=\"auto, (max-width: 233px) 100vw, 233px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>The Vistorian is a visualization platform for historians built with NetworkCube. \u00a0Analysts can map their data tables to a network structure online, by defining columns for source and target node, edge type, and time; then visualizing their data using node-link diagrams, adjacency matrices, map and a dynamic ego-network visualization, each in separate tabs.\u00a0Tabs\u00a0are connected by brushing+linking, and colored selections.<\/p>\n<p>Try it at\u00a0<a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/vistorian.net\" target=\"_blank\" rel=\"noopener noreferrer\">vistorian.net<span class=\"sr-only\"> (opens in new tab)<\/span><\/a><\/p>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n<h3><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-369104 alignleft\" src=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/connectoscope-300x237.png\" alt=\"\" width=\"235\" height=\"186\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/connectoscope-300x237.png 300w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/connectoscope.png 613w\" sizes=\"auto, (max-width: 235px) 100vw, 235px\" \/>ConnectoScope is a visualization platform for brain connectivity in neuroscience built with NetworkCube. ConnectoScope allows exploring fMRI data from a neuroscience standard format. Brain connectivity networks are automatically extracted from fMRI files and visualized using a 3D glass brain visualization, adjacency matrices, and LinkWave. Views are connected by brushing+linking, and colored selections.<\/p>\n<p>Try it at <a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/connectoscope.azurewebsites.net\" target=\"_blank\" rel=\"noopener noreferrer\">connectoscope.azurewebsites.net<span class=\"sr-only\"> (opens in new tab)<\/span><\/a><\/p>\n<p>More research on\u00a0<a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/visualizingbrainconnectivity.org\" target=\"_blank\" rel=\"noopener noreferrer\">visualizing brain connectivity<span class=\"sr-only\"> (opens in new tab)<\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Interactive Visual Exploration Leveraging Search & Browsing<\/strong><\/h2>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-369110 alignleft\" src=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/Refinery-300x179.png\" alt=\"\" width=\"256\" height=\"153\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/Refinery-300x179.png 300w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/Refinery-768x458.png 768w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/Refinery-1024x611.png 1024w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/>Refinery is an interactive visualization for exploring multivariate graphs leveraging associative browsing. Refinery explores a\u00a0new\u00a0strategy for bottom-up exploration of large, heterogeneous networks. The query model allows users to simply and expressively construct queries by rating nodes up or down. The system computes the degree-of-interest scores for associated content using a fast, random-walk algorithm. Refinery then visualizes query nodes within a subgraph of results, providing explanatory context, facilitating serendipitous discovery, and stimulating continued exploration.<\/p>\n<p><a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/refinerychi.herokuapp.com\/R\" target=\"_blank\" rel=\"noopener noreferrer\">Try Refinery online<span class=\"sr-only\"> (opens in new tab)<\/span><\/a> on publication data (start by searching for &#8220;Microsoft&#8221; for example).<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-369107 alignleft\" src=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/pivotpaths-300x156.png\" alt=\"\" width=\"244\" height=\"127\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/pivotpaths-300x156.png 300w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/pivotpaths-768x400.png 768w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/pivotpaths.png 898w\" sizes=\"auto, (max-width: 244px) 100vw, 244px\" \/>PivotPaths\u00a0is\u00a0an interactive visualization for exploring faceted information resources. During both work and leisure, we increasingly interact with information spaces that contain multiple facets and relations, such as authors, keywords, and citations of academic publications, or actors and genres of movies. To navigate these interlinked resources today, one typically selects items from facet lists resulting in abrupt changes from one subset of data to another. While filtering is useful to retrieve results matching specific criteria, it can be difficult to see how facets and items relate and to comprehend the effect of filter operations. In contrast, the PivotPaths interface exposes faceted relations as visual paths in arrangements that invite the viewer to \u2018take a stroll\u2019 through an information space. PivotPaths supports pivot operations as lightweight interaction techniques that trigger gradual transitions between views. We designed the interface to allow for casual traversal of large collections in an aesthetically pleasing manner that encourages exploration and serendipitous discoveries.<\/p>\n<p>Try <a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/mariandoerk.de\/pivotpaths\/demo\/#\/1:0_497686\" target=\"_blank\" rel=\"noopener noreferrer\">PivotPaths online<span class=\"sr-only\"> (opens in new tab)<\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3><\/h3>\n<h2><strong>Interactive Visual Exploration with Matrix-Based Representations<\/strong><\/h2>\n<p><img decoding=\"async\" class=\"alignleft\" src=\"http:\/\/www.aviz.fr\/~bbach\/multipiles\/teaser.png\" \/><a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/aka.ms\/multipiles\" target=\"_blank\" rel=\"noopener noreferrer\">MultiPiles<span class=\"sr-only\"> (opens in new tab)<\/span><\/a>\u00a0is\u00a0an interactive visualization interface to explore time-series of dense and weighted networks. MultiPiles is based on the physical analogy of piling adjacency matrices, each one representing a single temporal snapshot. Common interfaces for visualizing dynamic networks use techniques such as: flipping\/animation; small multiples; or summary views in isolation. Our proposed \u2018piling\u2019 metaphor presents a hybrid of these techniques, leveraging each one\u2019s advantages, as well as offering the ability to scale to networks with hundreds of temporal snapshots.<\/p>\n<p><a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/aka.ms\/multipiles\" target=\"_blank\" rel=\"noopener noreferrer\">Try the online demo<span class=\"sr-only\"> (opens in new tab)<\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"http:\/\/aviz.fr\/~bbach\/matrixordering\/matrixordering-teaser.png\" width=\"245\" height=\"95\" \/>This <a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/aviz.fr\/~bbach\/matrixordering\/Behrisch2016matrixordering.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">survey<span class=\"sr-only\"> (opens in new tab)<\/span><\/a> provides a description of algorithms to reorder visual matrices of tabular data and adjacency matrix of networks. The goal of this survey is to provide a comprehensive list of reordering algorithms published in different fields such as statistics, bioinformatics, or graph theory. While several of these algorithms are described in publications and others are available in software libraries and programs, there is little awareness of what is done across all fields. Our survey aims at describing these reordering algorithms in a unified manner to enable a wide audience to understand their differences and subtleties. We organize this corpus in a consistent manner, independently of the application or research field. We also provide practical guidance on how to select appropriate algorithms depending on the structure and size of the matrix to reorder, and point to implementations when available.<\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Tell Stories about Dynamic Networks with Graph Comics<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.aviz.fr\/~bbach\/graphcomics\/Graph%20Comics_files\/ww1-2.png\" width=\"714\" height=\"440\" \/><\/p>\n<p>Visit <a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/www.aviz.fr\/~bbach\/graphcomics\/\" target=\"_blank\" rel=\"noopener noreferrer\">graphcomics online<span class=\"sr-only\"> (opens in new tab)<\/span><\/a>. \u00a0Read <a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/www.aviz.fr\/~bbach\/datacomics\/\" target=\"_blank\" rel=\"noopener noreferrer\">a\u00a0comic on data comics<span class=\"sr-only\"> (opens in new tab)<\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Interaction & Algorithms for Edge Compression and Bundling<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"http:\/\/www.aviz.fr\/~bbach\/confluentgraphs\/figures\/social-networks\/karate.png\" width=\"247\" height=\"186\" \/>Confluent Drawing is a technique for bundling edges in node-link diagrams based on network connectivity. Edge-bundling techniques are designed to reduce edge clutter in node-link diagrams by coalescing lines into common paths or bundles. Unfortunately, traditional bundling techniques introduce ambiguity since edges are only bundled by spatial proximity, rather than network connectivity; following an edge from its source to its target can lead to the perception of incorrect connectivity if edges are not clearly separated within the bundles. Contrary, confluent drawing bundles edges based on common sources or targets. Thus, a smooth path along a confluent bundle indicates precise connectivity. See <a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/www.aviz.fr\/~bbach\/confluentgraphs\/\" target=\"_blank\" rel=\"noopener noreferrer\">more examples<span class=\"sr-only\"> (opens in new tab)<\/span><\/a>\u00a0and try the<a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/www.aviz.fr\/~bbach\/confluentgraphs\/designbox\/\" target=\"_blank\" rel=\"noopener noreferrer\"> technique online<span class=\"sr-only\"> (opens in new tab)<\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-369143 alignleft\" src=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/Edgecompression-1-300x188.png\" alt=\"\" width=\"247\" height=\"155\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/Edgecompression-1-300x188.png 300w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/Edgecompression-1-768x481.png 768w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/Edgecompression-1-1024x642.png 1024w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/Edgecompression-1.png 1348w\" sizes=\"auto, (max-width: 247px) 100vw, 247px\" \/>We explore the effectiveness of visualizing dense directed graphs by replacing individual edges with edges connected to \u201cmodules\u201d\u2014or groups of nodes\u2014such that the new edges imply aggregate connectivity. We only consider techniques that offer a lossless compression: that is, where the entire graph can still be read from the compressed version. The techniques considered are: a simple grouping of nodes with identical neighbor sets; Modular Decomposition which permits internal structure in modules and allows them to be nested; and Power Graph Analysis which further allows edges to cross module boundaries. These techniques all have the same goal\u2014to compress the set of edges that need to be rendered to fully convey connectivity\u2014but each successive relaxation of the module definition permits fewer edges to be drawn in the rendered graph. User studies we conducted indicate that people can accurately decode these compressed diagrams, even in most extreme cases of compression. More details\u00a0<a href=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2016\/12\/edgecompression_infovis2013.pdf\">here<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Algorithms for\u00a0Visualizing Overlapping Sets and Clusters<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-369149 alignleft\" src=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/sets-300x158.png\" alt=\"\" width=\"271\" height=\"143\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/sets-300x158.png 300w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/sets-768x404.png 768w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/sets-1024x539.png 1024w, https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2017\/03\/sets.png 1033w\" sizes=\"auto, (max-width: 271px) 100vw, 271px\" \/>\u00a0In many common data analysis scenarios the data elements are logically grouped into sets. Venn and Euler style diagrams are a common visual representation of such set membership where the data elements are represented by labels or glyphs and sets are indicated by boundaries surrounding their members. Generating such diagrams automatically such that set regions do not intersect unless the corresponding sets have a non-empty intersection is a difficult problem. Further, it may be impossible in some cases if regions are required to be continuous and convex. Several approaches exist to<br \/>\ndraw such set regions using more complex shapes, however, the resulting diagrams can be difficult to interpret. We investigate novel approaches for simplifying a complex collection of intersecting sets into a strict hierarchy that can be more easily automatically arranged and drawn.<\/p>\n<p>More details on\u00a0<a href=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2016\/12\/eulerdiagrams_infovis2010.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">leveraging hierarchical nesting<\/a>\u00a0and <a href=\"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-content\/uploads\/2011\/12\/linesets_infovis2011.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">using lines to represent sets<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h3><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>This page explores algorithms, interfaces and prototypes we developed over the years for visualizing and interacting with complex networks.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"msr-url-field":"","msr-podcast-episode":"","msrModifiedDate":"","msrModifiedDateEnabled":false,"ep_exclude_from_search":false,"_classifai_error":"","footnotes":""},"research-area":[13563],"msr-locale":[268875],"msr-impact-theme":[],"msr-pillar":[],"class_list":["post-364481","msr-project","type-msr-project","status-publish","hentry","msr-research-area-data-platform-analytics","msr-locale-en_us","msr-archive-status-active"],"msr_project_start":"2005-01-01","related-publications":[],"related-downloads":[],"related-videos":[],"related-groups":[],"related-events":[],"related-opportunities":[],"related-posts":[],"related-articles":[],"tab-content":[],"slides":[],"related-researchers":[{"type":"user_nicename","display_name":"Nathalie Henry Riche","user_id":33058,"people_section":"Section name 0","alias":"nath"}],"msr_research_lab":[199565],"msr_impact_theme":[],"_links":{"self":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/364481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-json\/wp\/v2\/msr-project"}],"about":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-json\/wp\/v2\/types\/msr-project"}],"version-history":[{"count":5,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/364481\/revisions"}],"predecessor-version":[{"id":643413,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/364481\/revisions\/643413"}],"wp:attachment":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-json\/wp\/v2\/media?parent=364481"}],"wp:term":[{"taxonomy":"msr-research-area","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-json\/wp\/v2\/research-area?post=364481"},{"taxonomy":"msr-locale","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-json\/wp\/v2\/msr-locale?post=364481"},{"taxonomy":"msr-impact-theme","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-json\/wp\/v2\/msr-impact-theme?post=364481"},{"taxonomy":"msr-pillar","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/research\/wp-json\/wp\/v2\/msr-pillar?post=364481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}