31:T6dc,// Specifying global styles is not advised. This is a stop-gap html` `32:[] 2f:{"title":"Graph Visualization Introduction","cells":[{"id":0,"value":"md`# Graph Visualization Introduction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`\n\n#### What is this?\nA notebook to introduce at a high level ways to visualize graph data structures on the web. This by no means is an exhaustive list and is meant to inspire new creative ideas in your own work.\n\n> **Nothing contained in this notebook is original content. This was pieced together from sources around the interwebs. All credit goes to the people and organizations from which the content was taken. Expand the code block and visit the source for more information.**\n\n\n#### What is covered?\n* Available Techniques\n* Node & Edge Visual encodings\n* Mix & Matching Techniques\n* Dynamic Graphs\n* Additional Resources\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"md`\n## Techniques\n\n

\n\n[Two Six Labs](https://www.twosixlabs.com/6-ways-visualize-graphs/)\n\n* More than six but less than infinity\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`### Force Directed\n[Wikipedia](https://en.wikipedia.org/wiki/Force-directed_graph_drawing)\n* Several graph layout algorithms\n* Great for simple networks\n* No spacial encoding\n* Scalability = E < 4N\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"import {chart as forcegraph }\nfrom \"@mbostock/d3-force-directed-graph\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"forcegraph","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`\nInteractions and custom layout algorthyms are **key**. Similar [d3](http://bl.ocks.org/GerHobbelt/3071239) interaction example\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`### Radial TreeDiagrams\n[Wikipedia](https://en.wikipedia.org/wiki/Radial_tree)\n* Best for hierarchies\n* Can understand topology or follow paths\n* Poor for deep and/or broad trees\n* Scalablity = 1 - 10K nodes\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"import { chart as radialtree }\nfrom \"@mbostock/d3-radial-tidy-tree\"\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"radialtree","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"import { chart as sunburst } from \"@mbostock/d3-sunburst\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"sunburst","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`### Enclosures\n* Good for decoding attributes on leaf nodes\n* Scalability = 1M leaf nodes\n* Sunburst can be considered an enclosure\n* Several user studies on the effectiveness of different layouts\n * [User perception of 4 hierarchical layouts](https://onlinelibrary.wiley.com/doi/pdf/10.1002/meet.14505001126)\n * [A Study on the Effectiveness of Tree-Maps as Tree Visualization\nTechniques](https://ac.els-cdn.com/S1877050917329046/1-s2.0-S1877050917329046-main.pdf?_tid=d9c0f5b3-3d73-4522-a3aa-a245a0cfe018&acdnat=1531156273_a3c46de4c4192b0a6e2564a63908df40)\n * [A User Study of Techniques for Visualizing Structure\nand Connectivity in Hierarchical Datasets](https://creativecoding.soe.ucsc.edu/pdfs/Dang_TreeStudy_VOILA_2017.pdf)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"md`\n[Treemap](https://en.wikipedia.org/wiki/Treemapping)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"import { chart as treemap } from \"@mbostock/d3-treemap\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"treemap","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"md`[Circle Packing](https://en.wikipedia.org/wiki/Circle_packing)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"import { chart as circlepack } from \"@mbostock/d3-circle-packing\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"circlepack","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`### Arc Diagrams\n[Wikipedia](https://en.wikipedia.org/wiki/Arc_diagram)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"import { chart as arc } from \"@bstaats/arc-diagram\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"arc","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`\nDifferent ways to think about label legibility\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`\nor separating arcs by type\n\n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`\n### Adjacency Matrix\n\n[Wikipedia](https://en.wikipedia.org/wiki/Adjacency_matrix)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"import { chart as matrix } from \"@bstaats/matrix-diagram\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"matrix","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"md`How to read\n\n

\n[NodeTrix](http://www.aviz.fr/Research/Nodetrix)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`\n

\n\n

\n[Nature Methods](https://www.nature.com/articles/nmeth.1862)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"md`\n[MatrixExplorer: a Dual-Representation System to Explore Social Networks](https://www.researchgate.net/publication/6715553_MatrixExplorer_a_Dual-Representation_System_to_Explore_Social_Networks?_sg=xeDmbpR3T6JxAgV67z44HkK3nl8j1wFM16zwOZFRP0BYBwafAcx4wI4LG63ouA_vhbpTEGpVWg)\n

\n* Note the interesting use of arcs\n\n[Tamara Munzner](http://www.cs.ubc.ca/~tmm/talks.html)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`#### What do they get you? (Connectivity vs. Adjacency)\nAdjacency matrix strengths\n* predictable screen space\n* scalability for large and dense networks\n* stability for dynamic graphs\n* supports reordering (algorithm important)\n* some topology tasks trainable\n\nNode-link diagram strengths\n* topology understanding, path tracing\n* intuitive for many abstract tasks\n\nEmpirical study\n* node-link best for small networks\n* matrix best for large networks (if tasks don’t involve topological structure)\n\n[Information Visualization, 4(2):114–135, 2005.](https://dl.acm.org/citation.cfm?id=1103525)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"md`\nExample of of the HDE (left) and NNTSP (right) reordering algorithms applied to a social network.\n

\n\n[ResearchGate](https://www.researchgate.net/publication/221536265_ZAME_Interactive_Large-Scale_Graph_Visualization)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"md`\n#### ZAME\nA visualization tool for exploring graphs at a scale of millions of nodes and edges\n[ZAME: Interactive Large-Scale Graph Visualization](http://www.aviz.fr/Research/Zame) **[Video](https://www.youtube.com/watch?v=Zr25Lt_pmfw)**\n\n

\n\nZoomed Out\n

\n\nZoomed In\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"md`\n#### GeneaQuilts\n[GeneaQuilts: A System for Exploring Large Genealogies](http://www.aviz.fr/Research/Geneaquilts)\n\n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"md`\n### Semantic Substrate\n[Ben Shneiderman](https://www.cs.umd.edu/~ben/papers/Shneiderman2006Network.pdf)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"import { chart as substrate } from \"@bstaats/semantic-substrate\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"substrate","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"md`\n

\n[HCIL](http://www.cs.umd.edu/hcil/nvss/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md`\n

\n[SetCoLa](http://idl.cs.washington.edu/papers/setcola/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"md`\n

\n[GraphDice](http://www.aviz.fr/Research/Graphdice)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"md`\n

\n\n[IPv4 Census Map](https://www.caida.org/research/id-consumption/census-map/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`Excellent Examples\n* [Flavor Connection](https://www.scientificamerican.com/article/flavor-connection-taste-map-interactive/)\n* [Royal Constellations](http://www.datasketch.es/october/code/nadieh/)\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`\n### Hive Plots\n[www.hiveplot.com](http://www.hiveplot.com/)\n\n* Think of parallel coordinates radially\n* Node layout is rational, allows for time/network comparisons\n* Similar strengths and weakness of parallel coordinates\n* [More details](http://www.hiveplot.com/talks/hive-plot.pdf)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"import { chart as hive } from \"@bstaats/hive-plot\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"hive","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"md`\n

\n[Seeing Complexity](https://seeingcomplexity.wordpress.com/2011/02/05/hive-plots-and-hairballs/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"md`\n

\n[Gene Regulatory Network Case Study](https://academic.oup.com/bib/article/13/5/627/412507)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"md`\n

\n[Cancer Gene Network Case Study](https://academic.oup.com/bib/article/13/5/627/412507)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"md`\n

\n[Disease Gene Network Case Study](https://academic.oup.com/bib/article/13/5/627/412507)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"md`\n

\n[Hive Panels](https://academic.oup.com/bib/article/13/5/627/412507)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"md`\n

\n[DataBlick](http://www.datablick.com/blog/2016/11/16/data16-twitter-network-project)\n\n* Structure change over time\n\n[Hive Area (d3)](https://bl.ocks.org/mbostock/2066421)\n

\n* What fraction / ratio is X?\n\n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`\n### Sankey\n[Wikipedia](https://en.wikipedia.org/wiki/Sankey_diagram)\n\n* Useful for looking at bidirectional graphs one direction at a time.\n* Also as a secondary view based on selections\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"import { chart as sankey } from \"@mbostock/d3-sankey-diagram\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"sankey","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`\n

\n[Elijah Meeks](https://medium.com/@Elijah_Meeks/alluvial-charts-and-their-discontents-10a77d55216b)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"md`\n## Node & Edge Visual Encodings\nIf you make a mark, make it mean something (i.e. data > ink)\n\n#### Nodes\n* Size\n* Color (careful)\n* Shape (Glyphs)\n* Position\n* Encapsulation\n* None!\n\n#### Edges\n* Width\n* Length\n* Endpoints (e.g. [Arrows](https://github.com/emeeks/d3-glyphEdges))\n* Offsets\n* Curves\n* Particles ([Elijah](https://github.com/emeeks/d3-glyphEdges))\n* Bundling (see below)\n* None!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"import { chart as edgebundle } from \"@mbostock/d3-hierarchical-edge-bundling\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"{\n const this_div = document.createElement(\"div\");\n this_div.appendChild(edgebundle);\n return this_div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"md`\n

\n\n[Force-Directed Edge Bundling for Graph Visualization](https://www.win.tue.nl/vis1/home/dholten/papers/forcebundles_eurovis.pdf)\n\n[Skeleton-based edge bundling for graph visualization](https://hal-enac.archives-ouvertes.fr/hal-01021607/document)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`\n

\n\n[Seeing Complexity](https://seeingcomplexity.wordpress.com/2011/02/05/hierarchical-edge-bundles/)\n\n[Hierarchical Edge Bundles:\nVisualization of Adjacency Relations in Hierarchical Data](http://www.aviz.fr/wiki/uploads/Teaching2014/bundles_infovis.pdf)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`\n

\n[CactusTrees](https://cactustrees.github.io/layout.html)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"md`\n

\n[Confluent Graphs](http://www.aviz.fr/~bbach/confluentgraphs/?utm_content=buffer50be0&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer#twitter_main3)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"md`\n

\n\n[Divided Edge Bundling](http://www.selassid.net/DividedEdgeBundling/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`\n## Mix & Match Techniques\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"import { chart as networktreemap } from \"@bstaats/group-in-a-box-layout\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"networktreemap","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`\n

\n\n

\n\n[NodeTrix: a Hybrid Visualization of Social Networks](http://www.aviz.fr/Research/Nodetrix) **[Video](https://www.youtube.com/watch?v=7G3MxyOcHKQ)**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"md`\n\n

\n\n[TreeMatrix: A Hybrid Visualization of Compound Graphs](http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.225.1067&rep=rep1&type=pdf) **[Video](https://www.youtube.com/watch?v=1t7sqSfw8H4)**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"md`\n

\n[GraphCuisine](http://www.aviz.fr/Research/Graphcuisine)\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"md`\n

\n\n[egoComp: A node-link-based technique for visual comparison of ego-networks](https://www.semanticscholar.org/paper/egoComp%3A-A-node-link-based-technique-for-visual-of-Liu-Guo/b116a0f0909a61fa350e45500790616ec0b8c391)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`\n## Dynamic Graphs (over time)\nMany more examples out there\n\n

\n\n[Small MultiPiles: \nPiling Time to Explore Temporal Patterns in Dynamic Networks](http://www.aviz.fr/~bbach/multipiles/) **[Example](http://www.aviz.fr/~bbach/multipiles/multipiles.html?data=data/109019_1_graphdat_20.dyjson)**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"md`\n

\n\n

\n\n[VisAware](http://www.sci.utah.edu/publications/yarden05/VisAware.pdf)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"md`\n

\n\n[Fluency of visualizations: linking spatiotemporal visualizations to improve cybersecurity visual analytics](https://link.springer.com/article/10.1186/s13388-014-0006-4/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"md`\n

\n\n[Network-wide intrusion detection supported by multivariate analysis and interactive visualization](https://ieeexplore.ieee.org/document/8062198/)\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"md`\n## A Trillion Edge Graph?!\n\n\n

\n\n[MOSAIC: Processing a Trillion-Edge Graph on a Single Machine](https://taesoo.kim/pubs/2017/maass:mosaic.pdf)\n\n

\n\n[Moore Curve](https://en.wikipedia.org/wiki/Moore_curve)\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"md`\n## Additional Resources\n* [VizSec](http://vizsec.org/) part of [VisWeek - October 22nd 2018, Berlin Germany](http://ieeevis.org/year/2018/welcome)\n* [The Network Visualization Catalog](https://networkvisualization.org/)\n* [Journal of Complex Networks](https://academic.oup.com/comnet)\n* [Interaction Data Lab](http://idl.cs.washington.edu/papers/)\n* [Visual Complexity](http://www.visualcomplexity.com/vc/)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}