28:null 29:["$","title",null,{"children":"Graph Visualization Introduction | Steven Sun's Workspace | Observable"}] 2e:T6dc,// Specifying global styles is not advised. This is a stop-gap html` `2f:[] 2c:{"id":"947eece185a4e0d3","slug":null,"title":"Graph Visualization Introduction","thumbnail":"a2dd50d5af0d56e6846a0a08312c428f9a6dc8ef3a74bf37e697715a29d532e0","access_level":"public","create_time":"$D2023-09-07T19:12:37.143Z","update_time":"$D2023-09-07T19:12:37.143Z","view_time":null,"first_public_time":"$D2023-09-07T19:12:37.143Z","has_unpublished_edits":null,"fork":{"id":"bd800ad96c29807e","slug":"graph-visualization-introduction","title":"Graph Visualization Introduction","owner":{"id":"b21421f607c70dd3","login":"bstaats","name":"Brian Staats"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4e568abc72ef3824","login":"steven-sun2-ws","name":"Steven Sun's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/29c7a7be050bf154a475353146387a55da8e6aee88ea00e55296cfc3cdc73948","tier":"starter_2024"},"version":619,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36a4736dedf73d5","login":"steven-sun2","name":"Steven Sun","avatar_url":"https://avatars-next.observableusercontent.com/74cd6d6a06ddc4b648f41ec6af8a76ed2bb5f51746c5d2d9715133b26167e46d","tier":null}],"members":[{"type":"individual","id":"d36a4736dedf73d5","login":"steven-sun2","name":"Steven Sun","avatar_url":"https://avatars-next.observableusercontent.com/74cd6d6a06ddc4b648f41ec6af8a76ed2bb5f51746c5d2d9715133b26167e46d","tier":null,"role":"editor"},{"type":"team","id":"4e568abc72ef3824","login":"steven-sun2-ws","name":"Steven Sun's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/29c7a7be050bf154a475353146387a55da8e6aee88ea00e55296cfc3cdc73948","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Graph Visualization Introduction","cells":[{"id":0,"value":"md`# Graph Visualization Introduction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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\n[Two Six Labs](https://www.twosixlabs.com/6-ways-visualize-graphs/)\n\n* More than six but less than infinity\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"import { chart as radialtree }\nfrom \"@mbostock/d3-radial-tidy-tree\"\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"radialtree","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"import { chart as sunburst } from \"@mbostock/d3-sunburst\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"sunburst","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"md`\n[Treemap](https://en.wikipedia.org/wiki/Treemapping)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"import { chart as treemap } from \"@mbostock/d3-treemap\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"treemap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"md`[Circle Packing](https://en.wikipedia.org/wiki/Circle_packing)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"import { chart as circlepack } from \"@mbostock/d3-circle-packing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"circlepack","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`\n

\n\n

\n[NodeTrix](http://www.aviz.fr/Research/Nodetrix)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`\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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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\n

\n[HCIL](http://www.cs.umd.edu/hcil/nvss/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"md`\n

\n[SetCoLa](http://idl.cs.washington.edu/papers/setcola/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"md`\n

\n[GraphDice](http://www.aviz.fr/Research/Graphdice)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"import { chart as hive } from \"@bstaats/hive-plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"hive","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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[Elijah Meeks](https://medium.com/@Elijah_Meeks/alluvial-charts-and-their-discontents-10a77d55216b)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"html`

\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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"md`\n

\n[CactusTrees](https://cactustrees.github.io/layout.html)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"md`\n

\n\n[Divided Edge Bundling](http://www.selassid.net/DividedEdgeBundling/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md`\n## Mix & Match Techniques\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"import { chart as networktreemap } from \"@bstaats/group-in-a-box-layout\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"networktreemap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"md`\n

\n[GraphCuisine](http://www.aviz.fr/Research/Graphcuisine)\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"html`

\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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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\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