3e:null 3f:["$","title",null,{"children":"Dynamic infrastructure maps with graph theory | Chris Stanley | Observable"}] 45:T68a,html``46:T9bc,keypresscontrol= { document.cells = document.querySelectorAll(".observablehq") document.current=0; document.stopnumber = document.cells.length- 5 //keymap document.onkeyup = function(e) { console.log(e) ; if (e.which === 83){console.log('re -s- tart'); document.current=0 document.cells.forEach(e => e?.classList?.remove("kiosk")) var elmnt = document.cells[document.current] elmnt.classList.add("kiosk") elmnt.scrollIntoView(); } if (e.which === 32| e.which === 39| e.which === 40){console.log('space'); let cells = [...document.querySelectorAll(".observablehq")].filter(e => e.querySelector(".resizeme")) document.cells.forEach(e => e?.classList?.remove("kiosk")) document.current+=1 ++mutable nonce if (document.current < (document.stopnumber)){ var elmnt=cells[document.current]; console.log(elmnt) elmnt.classList.add("kiosk") try { fitToParent(elmnt.querySelector(".resizeme"),0) } catch (error) {} if (elmnt.innerHTML != '

'){ elmnt.scrollIntoView(); } else { document.stopnumber = document.current; } }else{document.current = document.stopnumber } } if (e.which === 38 | e.which === 37){console.log('back'); let cells = [...document.querySelectorAll(".observablehq")].filter(e => e.querySelector(".resizeme")) document.cells.forEach(e => e?.classList?.remove("kiosk")) document.current-=1 if (document.current <0){document.current = 0} var elmnt = cells[document.current] elmnt.classList.add("kiosk") elmnt.scrollIntoView(); } } }47:Tab1,slide_style = html``48:Tdb7,slide = { function slide() { const resizeable = document.createElement("div"); resizeable.className = "slide"; resizeable.classList.add("resizeme") resizeable.appendChild(md.apply(this, arguments)); return resizeable; } function end() { const resizeable = document.createElement("div"); resizeable.classList.add("resizeme") resizeable.classList.add("end") return resizeable; } slide.end = end; function iframe(strings) { const resizeable = document.createElement("div"); resizeable.style.background = "white" resizeable.innerHTML="" resizeable.className = "slide"; resizeable.classList.add("resizeme") const frame = resizeable.querySelector("iframe") frame.style.background = 'white'; return resizeable; } slide.iframe=iframe; function html(strings) { const resizeable = document.createElement("div"); resizeable.innerHTML = strings; resizeable.className = "slide slide--html"; resizeable.classList.add("resizeme") return resizeable; } slide.html = html; function htmlsplit(left, right) { const resizeable = document.createElement("div"); resizeable.appendChild(left); resizeable.appendChild(right); resizeable.className = "slide slide--html flex-container"; resizeable.classList.add("resizeme") return resizeable; } slide.htmlsplit = htmlsplit; function htmldark(strings) { const resizeable = document.createElement("div"); resizeable.innerHTML = strings; resizeable.className = "slide slide--split dark"; resizeable.classList.add("resizeme") return resizeable; } slide.htmldark = htmldark; function code(strings) { const resizeable = document.createElement("div"); const pre = resizeable.appendChild(document.createElement("pre")); const code = pre.appendChild(document.createElement("code")); let string = strings[0] + "", i = 0, n = arguments.length; while (++i < n) string += arguments[i] + "" + strings[i]; code.textContent = string.trim(); resizeable.className = "resizeme slide slide--code"; resizeable.classList.add("resizeme") return resizeable; } slide.code = code; slide.js = function() { const resizeable = code.apply(this, arguments); const content = resizeable.firstChild.firstChild; content.className = "js hljs javascript"; hl.highlightBlock(content); return resizeable; }; slide.img = function(strings) { const container = document.createElement("div"); container.style.backgroundImage = `url(${strings})` container.style.backgroundSize= "cover" container.style.backgroundPosition= "center"; container.style.backgroundSize= "cover" container.className = "slide slide--img"; return container; }; function cell(cell) { const container = document.createElement("div") container.append(cell) container.className = "slide cell"; container.classList.add("resizeme") container.style='position:relative;display:block; top:0px; left:0px; bottom:0px; right:0px; max-width:100%;width:100%; max-height:100%,height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;' return container; } slide.cell = cell return slide; }49:[{"id":"3c81498c468c9a7180bd75d3f0c50d8b5833e31b4b08f41da0cad03320e93d25715b80254c76498910574f218be8a45ad90d77981f6756a494ab0022daeb1542","href":"https://static.observableusercontent.com/files/3c81498c468c9a7180bd75d3f0c50d8b5833e31b4b08f41da0cad03320e93d25715b80254c76498910574f218be8a45ad90d77981f6756a494ab0022daeb1542","name":"world_of_goo.gif","type":"image/gif","lastModified":1668111278507.979,"size":3371525},{"id":"c0948468ee6e4afd703d11ca1a27828929ee6277edad57c28a885a080338ad952917028a50ac40d05fa3711d07944499369f76e76ae6fc20baa9c7aa8b472575","href":"https://static.observableusercontent.com/files/c0948468ee6e4afd703d11ca1a27828929ee6277edad57c28a885a080338ad952917028a50ac40d05fa3711d07944499369f76e76ae6fc20baa9c7aa8b472575","name":"graph_elements (1).json","type":"application/json","lastModified":1668091682704.968,"size":9146}] 43:{"id":"ff9f2f686243c587","slug":null,"title":"Dynamic infrastructure maps with graph theory","thumbnail":"b2eb89e87334fedb44fdde943fbd4997d03709ab9d6562a4d848daca5e37c550","access_level":"public","create_time":"$D2022-11-09T23:30:54.929Z","update_time":"$D2022-11-11T12:53:49.982Z","view_time":null,"first_public_time":"$D2023-04-16T19:58:21.534Z","has_unpublished_edits":null,"fork":{"id":"547180e11449cb03","slug":"a-presentation-framework-built-on-a-observablehq-notebook","title":"A simple presentation medium built on a observablehq notebook","owner":{"id":"5ac3a182adb31463","login":"wolfiex","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"d6a36d1843592687","login":"propolisa","name":"Chris Stanley","avatar_url":"https://avatars-next.observableusercontent.com/b9dae0ea273274b656f3f0f3920e5ef3437913a4dc303e5fc3b006906a8f6e5d","tier":"starter_2024","bio":"Cybersecurity and data visualization.\nEverything is a graph.\nSecurity Engineer @ Zivver","following":false},"version":1040,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9578f02a8efdf1d2","login":"propolisa","name":"Chris Stanley","avatar_url":"https://avatars-next.observableusercontent.com/b9dae0ea273274b656f3f0f3920e5ef3437913a4dc303e5fc3b006906a8f6e5d","tier":null,"bio":"Cybersecurity and data visualization.\nEverything is a graph.\nSecurity Engineer @ Zivver","following":false}],"members":[{"type":"individual","id":"9578f02a8efdf1d2","login":"propolisa","name":"Chris Stanley","avatar_url":"https://avatars-next.observableusercontent.com/b9dae0ea273274b656f3f0f3920e5ef3437913a4dc303e5fc3b006906a8f6e5d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dynamic infrastructure maps with graph theory","cells":[{"id":0,"value":"md`\n# Dynamic infrastructure maps with graph theory\n\nClick fullscreen and then use the arrows / space bar to navigate\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"slide`Dynamic infrastructure maps with __graph theory__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"slide`\n\n**What is Graph Theory?**\n\nPutting it simply, graph theory is about _things_ and their _relationships_.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"nonce ? slide.iframe`https://observablehq.com/embed/@d3/temporal-force-directed-graph?cells=viewof+time%2Cchart` : null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"slide`**Why graphs?**\n\n- solve relational problems\n- represent relational data intuitively\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"nonce ? slide.iframe`https://observablehq.com/embed/@propolisa/pov-you-woke-up-wanting-to-use-graph-theory-for-something-for?cells=nodesHeader%2Ctable_nodes_short%2CedgesHeader%2Ctable_edges_short` : null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"nonce ? slide.iframe`https://observablehq.com/embed/@propolisa/pov-you-woke-up-wanting-to-use-graph-theory-for-something-for?cells=viewof+button3%2Cgraph_container` : null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"slide`\nIt's Friday!\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"slide`\nBuilding infrastructure maps with graph theory\n\n${await FileAttachment(\"world_of_goo.gif\").image({width:800})}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"slide`\n- Let's call infra things resources.\n- E.g. firewalls, servers, databases\n- Different kinds of resources have different properties\n- But they all need a unique id\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"slide.js`\n// Example\n\nfetch(\"api/servers\")\n\n[\n {\"id\": \"Webserver\", \"type\": \"server\"},\n {\"id\": \"Mailserver\", \"type\": \"server\"},\n {\"id\": \"Database\", \"type\": \"server\"},\n {\"id\": \"FTP-001\", \"type\": \"server\"}\n]\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"slide.js`\n// Example\n\nfetch(\"api/servers\")\n\n[\n {\"id\": \"Webserver\", ...type, subnet: \"west\", vpc: \"A\"},\n {\"id\": \"Mailserver\", ...type, subnet: \"east\", vpc: \"A\"},\n {\"id\": \"Database\", ...type, subnet: \"west\", vpc: \"A\"},\n {\"id\": \"FTP-001\", ...type, subnet: \"west\", vpc: \"A\"}\n]\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"slide.js`\ngroup(servers).by(\"vpc\", \"subnet\", \"type\")\n\n{\n \"A\": {\n \"west\": {\n \"server\": {\n \"Webserver\": {},\n \"Database\": {},\n \"FTP-001\": {}\n }\n },\n \"east\": {\n \"server\": {\n \"Mailserver\": {}\n }\n }\n }\n}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"slide.iframe`http://localhost:9000/#/`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"slide` To end, use *slide.end()*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"slide.end('this ends the presentation')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"mutable nonce = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"function fitToParent(element, margin) {\n const scale = scaleAmountNeededToFit(element, margin);\n element.style.transformOrigin = \"0 0\";\n element.style.transform = `translate(${margin}px, ${margin}px) scale(${scale})`;\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"function scaleAmountNeededToFit(el, margin = 0) {\n const parentSize = {\n width: el.parentElement.clientWidth - margin * 2,\n height: el.parentElement.clientHeight - margin * 2\n };\n\n // return Math.min(parentSize.width / el.clientWidth,\n // parentSize.height / el.clientHeight);\n return parentSize.height / el.clientHeight;\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"hl = require(\"@observablehq/highlight.js@1.0.0/highlight.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"graph_elements = FileAttachment(\"graph_elements (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"import {\n cytoscape_instance as cy1,\n graph_container as gc1} with { graph_elements as data} from \"9a35c7e9c3ebc5ae\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"tomorrow_github = FileAttachment(\"tomorrow_github.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"