2e:null 2f:["$","title",null,{"children":"Advanced visualisation techniques for embracing complexity of Dynamic Networks of Networks | Figay | Observable"}] 34:[] 32:{"id":"96e0637bcd413eaf","slug":"untitled","title":"Advanced visualisation techniques for embracing complexity of Dynamic Networks of Networks","thumbnail":"a06e3f4dbaf7cbd9d708e2d64a0d72d746a9e6188791f4a9585e13c4a94ee46f","access_level":"public","create_time":"$D2020-11-13T14:57:18.772Z","update_time":"$D2021-08-14T16:38:42.098Z","view_time":null,"first_public_time":"$D2020-11-13T15:42:37.417Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/071fc1ce1d8fbec71d4409987642a0c881b8a3651627b51e2cdaa7fcde295a10","tier":"starter_2024"},"version":420,"publish_version":420,"role":null,"authored":false,"authors":[{"type":"individual","id":"71983294fb89ee80","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/604017b640b1f50c2b41a96fcf316faa227738b7b2b4d0f6221ace789ebbfd42","tier":null}],"members":[{"type":"individual","id":"71983294fb89ee80","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/604017b640b1f50c2b41a96fcf316faa227738b7b2b4d0f6221ace789ebbfd42","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Advanced visualisation techniques for embracing complexity of Dynamic Networks of Networks","cells":[{"id":59,"value":"md`# Advanced visualisation techniques for embracing complexity of Dynamic Networks of Networks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`\nWithout being a specialist in this field, I've always been surveying the state of the art and the state of the practices concerning advanced visualisation technics. It started when I discovered the semantic cartography, through the thesis of Christophe Tricot: \"Semantic Cartography: from knowledge to map\".\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`Let's consider the expression:\n\n>>** _A picture is worth a thousand words _ **\n\nand its counterpart:\n\n>>** _As the Chinese say, 1001 words is worth more than a picture _ **\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`Properly combining models with semantic and visual technics should be very helpful in order to crawl visually into big model and huge data. Here is the idea behind semantic cartography, and an the derived important derived principle to be considered when using visual modeling:\n\n>>** _Drawing is not modeling!_ **\n\nThis post aims at sharing some thoughts and experiences concerning semantic visual representations coupled with visualisation techniques and tools I found on the Web.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`## Ontology defined as semantic graph\n\nAll what is related to graph representation can be used, being for:\n\n>Technique 1: Automated production of static graphs from a model: let's consider family of solutions such as Graphviz, the graph visualization software.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"viewof player = youtubePlayer('ZmxEt_OgVpg', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`\n> Technique 2: Automated production of dynamic graphs with some interactivity for crawling inside the model and switching between automated layouts: let's consider family of solutions such as Cytoscape.js or JIT.js. Such visualisation feature is provided with Archi, based on the usage of Eclipse Zest.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`Some advanced libraries can be used for such dynamic graphs with R, as described by Katherine Ognyanova at kateto.net.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"viewof player2 = youtubePlayer('ueS22AlCWqY', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`\n* Some examples can be found at visNetwork\n* Some tools proposing force constrained graphs add the grouping feature, illustrated on top image of the post. A solution proposing this feature is Keylines.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`\n> Technique 3: Manual creation of graphs with visual interface allowing creation of nodes and arcs a very easy and productive way. A lot is to be learnt from mind map solutions, such as Freemind or Xmind.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":" viewof player4 = youtubePlayer('6YyJNCZLZ4A', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`\n> Technique 4: Combination of automated production of dynamic graphs, with ergonomic manual interaction for creation of nodes and arc. Here you can experiment with Yed, which provide the same ergonomic interaction with graph creation than mind map solutions, but also provide automated generation with automated lay outing as Graphviz.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":" viewof player5 = youtubePlayer('OmSTwKw7dX4', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`\n> Technique 5: Some libraries are also available for web browsers, with automated creation of dynamic graphs you can interact with. It is the case of vis. js. I'm currently exploring how to use it for interactive visualization of ArchiMate models.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`\n>Technique 6: From the Bluebridge project, a 3D LOD visualization was proposed. Looks promising :)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"viewof player6 = youtubePlayer('dplDvKXWxRs', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`\n>Technique 7: Adding some 3D on dynamic graphs with tools such as OpenGraphiti, which is used with OpenDNS and relies on OpenGL.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof player7 = youtubePlayer('TE9qsYBu8MM', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`\n>Technique 8: 3D Force-Directed Graph based on three.js is proposed by Vasco Asturiano at bl.ocks.org. I invite you to explore his web site, many great ideas for advanced visualisation! Such technique is also used with GraphXR, used by advanced online visualization services provided by Kineviz, and that you can experiment for free.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`# Models with hierarchies\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`We can find the same categorization than for graphs. But several more specific visual component have to be used, as a hierarchy can be formalized as a specific graph, with cardinality constraints.\n\n* Technique 9: Trees - graph visualisation tools can be used with tree layouts. But tree widgets are also available and used for most of the system, being file management systems or model editors.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`* Technique 10: Nested boxes - can also be a solution, considering hierarchical relationships such as items of a set, inner elements of a component, instances of class, members of a group, etc.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`* Technique 11: Combining graph and nested elements - it was addressed by the Jambalaya plugin made available for Protégé 3 by the CHISEL Group, with the ability to define \"hierarchies\" from which views can be created, with as parameters hierarchic relations to be considered for nested boxes, and the relations to be considered for graphs. Unfortunately, this was not adapted for the next versions.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md`* Technique 12: Combining graphs and containers - a very good illustration is provided by Cola.js, which allows combining force constrained graphs including containers. If it doesn't support nested containers, it's probably an extension that can be easily provided in order to support visual representation of complex composite models. Let's have a look on the link, which shows that what is captured on the following snapshot is dynamic.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`* Technique 13: Crossing hierarchies or taxonomies - how to deal when willing to display and compare two classification? I identified two approaches of interest implemented by two open source tools. The first tool is Xmind, with the special Matrix structure which is in fact a graph layout (so what is displayed is not a table, but a graph with labels). The second tool is MatrixBrowser visualisation kit, an old open source tool which can be used in order to cross two taxonomies.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md` * Technique 14a: Treemaps - special kind of nested box, with some scaling restrictions, in particular all the leaves should be visible on a single screen. Let's imagine having a nap under a tree.\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":" viewof player8 = youtubePlayer('JVam5-fYeFk', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md`* Technique 14b: 14a similar, but using nested circles (here produced with D3.js)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"infovis = import(\"http://www.eads-iw.net/html/js/jit/jit.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md` # Multi-scale model\n\n* Technique 15: Interactive visual representations allowing to navigate within nested elements, up and down - nested elements with ability to \"open\" one of them and then visualizing an element of a lower scale. Or navigating up in order visualizing the containing element, at an upper scale. Available with Yed, and implemented by many modeling tools, for UML, ArchiMate, etc.\n* Technique 16: The same, with usage of zoomable interface which reinforce visually the filling of moving up and down, from high level views to low level views. Here let's have look at Shrimp or Jambalaya, from the Chisel Group. It is also supported by interactive Treemaps implemented for the Web, such as the one provided by JIT.js.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":" viewof player09 = youtubePlayer('1vfDNVCgtLs', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md` * Technique 17: Built on top of D3.js, Vega adds the ability building reactive building blocks with interactive visualisation, relying on several visualisation technics, including the treemaps and many others.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":" viewof player10 = youtubePlayer('Y8Fp9z-9DWc', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"md` * Technique 18a: Other interesting approach discovered on git, a Treemap navigator produced by Matteo Abrate\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":" viewof player11 = youtubePlayer('STkFSjXGyl8', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md` * Technique 18b: Dynamic Treemap reflecting temporal evolution based on animation technics with Java Scritps.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`# Multi layered enterprise architecture\n\nHere you can use Multi-scale model visualization technics, when there is a change of scale between layers. But what if it is no the case?\n\n* Technique 19: 3D graphs combined with colors and plans - I've just discovered the pages concerning the VALACON project from which I extracted the new top picture. The video here illustrates visualisation technics usage by one of the member of the project team.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":" viewof player12 = youtubePlayer('H-ZUQD0lP9E', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md` * Technique 20: Dynamic Networks visualisation with matrix cubes - another way to explore multi-scale and multi-layered models?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":" viewof player13 = youtubePlayer('exBDkQkKQEk', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"md`* Technique 21: Interactive spheres with Thorts, as illustrated by Thortspace`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"md` * Technique 22: Multi layer visualization - I discovered very late MuxViz, which is a framework for the multilayer analysis and visualization of networks. A new visualization mean suited for enterprise architecture and ArchiMate models?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":" viewof player14 = youtubePlayer('gcpYSdi_-xI', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"md` * Technic 23: combining graph and sets visualisation, as illustrated by SemSpec\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md` More and more powerful computers and usage of 3D, combined with dynamic and interactive representation, is an open field for investigation. Let's have a look at three.js, and let's image the following capture is representing complex data. Let's enjoy. An important set of WebGL resources is freely available on the web following this link.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md` 2D and 3D representation can be combined taking advantage of D3.js and Three.js, as demonstrated delimited.io (cf. next figure).\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md` # Conclusion\n\nThis exploration is not exhaustive, but the idea is more here pointing out visualisation techniques that can be combined with modeling in order providing interactive semantic cartography of complex systems of systems or multi-layered multi-scale networks of networks.\n\nThe growing interest for advanced visualization related to data analytics and big data will probably be at the origin of new advanced techniques and tools on the shelves. Waiting for them, many tools of interest can already be used allowing to experiment innovative visual ways for embracing complexity of emerging digital systems of systems. It can be done before assessing exiting solutions such as CoSMo or Troux technologies.\n\nAlso, many passionate people are creating and sharing open source libraries for simplifying the life of non computer scientist for being able to explore their data. A good representative is Patrick Martin's dex.j.\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":" viewof player15 = youtubePlayer('eUmcVtIOcc0', 10, 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md` _** Assessment criteria: the visual technics used should combine interactive and ergonomic interfaces for the user, and easy and unambiguous interpretation of the information (semantic) displayed using these technics. It is a condition for ensuring the semantic interoperability required for PLM, Big Data or Digitalisation. **_\n\n\nLet's follow futur posts which will illustrate the usage of these technologies for Enterprise Modeling and PLM.\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`## Imported scripts for the article`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"import { youtubePlayer } from \"@radames/youtube-player-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"