21:null 22:["$","title",null,{"children":"Path trace | valentinachaconbuitrago | Observable"}] 27:T275e,chart = { //TODO: Change value according to preferences let showIp = true; //TODO: define min latency threshold let minLatency = 200; const svg = d3.create('svg') .attr('viewBox', [0, 0,w, 700]) const edgeElements = svg.append('g') .attr('id', 'edges') const nodeElements = svg.append('g') .attr('id', 'nodes') svg.append('defs') .append('marker') .attr('id', 'arrow') .attr('viewBox', '0 -10 15 15') .attr('refX', 6) .attr('refY', 0) .attr('markerWidth', 15) .attr('markerHeight', 15) .attr('markerUnits', 'userSpaceOnUse') // disable the effect of stroke width on the arrow .attr('orient', 'auto') .append('path') .attr('d', 'M0,-5 L10,0 L0,5Z') .style('fill', '#999'); svg.append('defs') .append('marker') .attr('id', 'arrow_over') .attr('viewBox', '0 -10 15 15') .attr('refX', 6) .attr('refY', 0) .attr('markerWidth', 15) .attr('markerHeight', 15) .attr('markerUnits', 'userSpaceOnUse') // disable the effect of stroke width on the arrow .attr('orient', 'auto') .append('path') .attr('d', 'M0,-5 L10,0 L0,5Z') .style('fill', '#96263a'); return Object.assign(svg.node(), { update(g, nodes, edges, direction) { edgeElements.transition() .duration(delay * 0.75) .attr('transform', `translate(${(w - g.graph().width) * 0.5 - m.x}, 0)`); edgeElements .selectAll('path') .data(edges, d => d.v + d.w) .join( enter => enter.append('path') .attr('d', d => line(d.points)) .attr('marker-end', (d) => { if(d.latency > minLatency) return 'url(#arrow_over)' return 'url(#arrow)'}) .style('stroke', d => { //TODO: define which value determines red latency if(d.latency > minLatency) return "#96263a"; return 'rgba(0, 0, 0, 0.15)'}) .style('stroke-width', d => lineWidth(d.width)) .style('fill', 'none') .style('opacity', 0) .call( enter => enter.transition() .duration(delay * 0.5) .delay(delay * 0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .attrTween('d', function(d) { return d3.interpolatePath( this.getAttribute('d'), line(d.points) ); }) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.25) .style('opacity', 0) .remove() ) ) .on('mouseover', (event, d) => { let prevName = d.v.includes("*")? "*":d.v; let nextName = d.w.includes("*")? "*":d.w; //Tooltip let tipContent = ``; tipContent += ``; tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `

Agent	${d.agent}
Latency	${d.latency}
Prev Node	${prevName}
Next Node	${nextName}

`; chartTip.style("left", event.pageX + 50 + "px") .style("top", event.pageY - 50 + "px") .style("display", "inline-block") .html(`Link
${tipContent}`); //Path focus selectPath(d.w); }) .on('mouseout', () => { chartTip.style("display", "none"); // Hide toolTip unselectPath(); }) nodeElements.transition() .duration(delay * 0.75) .attr('transform', `translate(${(w - g.graph().width) * 0.5 - m.x}, 0)`); const currentNodeElements = nodeElements.selectAll('g') .data(nodes, d => d.name) .join( enter => enter.append('g') .attr('transform', d => `translate(${d.x}, ${d.y})`) .style('opacity', 0) .call( enter => enter.transition() .duration(delay * 0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .attr('transform', d => `translate(${d.x}, ${d.y})`) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.75) .style('opacity', 0) .remove() ) ) currentNodeElements .selectAll('circle') .data(d => [d], d => d.name) .join('circle') .attr('r', 9) .style('fill', d => d.fill) .on('mouseover', (event , d) => { //Tooltip let tipContent = ``; tipContent += ``; tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `

IP	${d.ip}
DNS	${d.dns}

`; chartTip.style("left", event.pageX + 50 + "px") .style("top", event.pageY - 50 + "px") .style("display", "inline-block") .html(`Node
${tipContent}`); //Path focus let name = d.name selectPath(name); }) .on('mouseout', () => { chartTip.style("display", "none"); // Hide toolTip unselectPath(); }) //Path focus functions function selectPath(name){ //Select nodes currentNodeElements.selectAll('circle').style('fill', m => { let belongs = false; paths[m.name].map(p => { if(paths[name].includes(p)){ belongs = true; } }) if(belongs) return m.fill; return "gray"; }) edgeElements.selectAll('path') .style('stroke', m=>{ let belongs = false; paths[m.v].map(p => { if(paths[name].includes(p)){ belongs = true; } }) if(belongs){ if(m.latency > minLatency) return "#96263a"; return 'rgba(0, 0, 0, 0.15)' } return "gray" }) .attr('marker-end', m=> { let belongs = false; paths[m.v].map(p => { if(paths[name].includes(p)){ belongs = true; } }) if(belongs){ if(m.latency > minLatency) return 'url(#arrow_over)'; } return 'url(#arrow)'}); } function unselectPath(){ currentNodeElements.selectAll('circle').style('fill', d => d.fill); edgeElements.selectAll('path') .style('stroke', d=> { if(d.latency > minLatency) return "#96263a"; return 'rgba(0, 0, 0, 0.15)'}) .attr('marker-end', (d) => { if(d.latency > minLatency) return 'url(#arrow_over)' return 'url(#arrow)'}); } //Agent Name currentNodeElements .selectAll('text.agent') .data(d => [d], d => d.agent) .join( enter => enter.append('text') .attr("class", "agent") .text(d => d.agent.includes("_")?" ":d.agent) .attr('text-anchor', 'middle') .attr('dy', 30) .style('font-family', 'Helvetica, Arial, sans-serif') .style('font-size', '11px') .style('paint-order', 'stroke') .style('stroke', '#FCFCFC') .style('stroke-width', 2.5) .style('stroke-linecap', 'round') .style('stroke-linejoin', 'round'), update => update.call( update => update.transition() .duration(delay * 0.75) .attr('dy', 40) ) ); if(showIp){ currentNodeElements .selectAll('text.ip') .data(d => [d], d => d.name) .join( enter => enter.append('text') .attr("class", "ip") .text(d => d.name.includes("*")?"*":d.name) .attr('text-anchor', 'middle') .attr('dy', -15 + (direction == 'TB') * 2) .style('font-family', 'Helvetica, Arial, sans-serif') .style('font-size', '11px') .style('paint-order', 'stroke') .style('stroke', '#FCFCFC') .style('stroke-width', 2.5) .style('stroke-linecap', 'round') .style('stroke-linejoin', 'round'), update => update.call( update => update.transition() .duration(delay * 0.75) .attr('dy', -10 + (direction == 'TB') * 2) ) ); } return svg.node() } }); }28:[{"id":"dcb78f0e264a9f5a5095e4522cb280768ea8ee5b88540d45b75f189fc863781e3078646afd12ddbe226cf6e24f563b6a4e4b6d6e216b0fd5aec7856d4bfb3c21","href":"https://static.observableusercontent.com/files/dcb78f0e264a9f5a5095e4522cb280768ea8ee5b88540d45b75f189fc863781e3078646afd12ddbe226cf6e24f563b6a4e4b6d6e216b0fd5aec7856d4bfb3c21","name":"nodes_edges_paths.json","type":"application/json","lastModified":1624395915031.424,"size":261568},{"id":"740c83a418e77e80e5c77c70034f6c88f20cc0136f2be01d58379aa70d6d63ebae891963c80be41f10d25e66f858f07992099998235d76f33d73488beca0ab05","href":"https://static.observableusercontent.com/files/740c83a418e77e80e5c77c70034f6c88f20cc0136f2be01d58379aa70d6d63ebae891963c80be41f10d25e66f858f07992099998235d76f33d73488beca0ab05","name":"nodes_edges@1.json","type":"application/json","lastModified":1624291618000.738,"size":230047}] 25:{"id":"cb4b7c3a0f8a3500","slug":"step-by-step-directed-graph-drawing-dagre-layout","title":"Path trace","thumbnail":"42ed290b335e7801493aa44642ed142e7bb8c98fa372b72383a3498666772bf6","access_level":"public","create_time":"$D2021-06-17T20:33:06.961Z","update_time":"$D2021-06-29T18:41:55.102Z","view_time":null,"first_public_time":"$D2021-06-21T15:37:34.186Z","has_unpublished_edits":null,"fork":{"id":"ddf9c2dbff2aed25","slug":"step-by-step-directed-graph-drawing-dagre-layout","title":"Step-by-step directed graph drawing (dagre layout)","owner":{"id":"44f043b020beee3d","login":"bartok32","name":"Bartosz Prusinowski"}},"stars":8,"starred":false,"owner":{"type":"team","id":"2310aa02e804044d","login":"valentinachaconbuitrago","name":"","avatar_url":"https://avatars-next.observableusercontent.com/adfe83c7d3749c9691384cde3d70357718856e82eae2bab51c58084ada1ab7b2","tier":"starter_2024","bio":""},"version":1610,"publish_version":1610,"role":null,"authored":false,"authors":[{"type":"individual","id":"b7718e0c43b791aa","login":"valentinachaconbuitrago","name":"","avatar_url":"https://avatars-next.observableusercontent.com/adfe83c7d3749c9691384cde3d70357718856e82eae2bab51c58084ada1ab7b2","tier":null,"bio":""}],"members":[{"type":"individual","id":"b7718e0c43b791aa","login":"valentinachaconbuitrago","name":"","avatar_url":"https://avatars-next.observableusercontent.com/adfe83c7d3749c9691384cde3d70357718856e82eae2bab51c58084ada1ab7b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Path trace","cells":[{"id":0,"value":"md`# Path trace`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"viewof direction = radio({\n title: 'Graph direction',\n options: [\n { label: 'top-bottom', value: 'TB' },\n { label: 'bottom-top', value: 'BT' },\n { label: 'left-right', value: 'LR' },\n { label: 'right-left', value: 'RL' },\n ],\n value: 'LR'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"viewof n = Scrubber(\n Array.from({ length: d3.max(edgesData, d => d.Hop)}, (_, i) => i), {\n initial: edgesData.length,\n autoplay: false,\n loop: false,\n delay,\n format: d => `${d} hops`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$27","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"md`### Graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"g = {\n console.log(\"inside graph\")\n const g = new dagre.graphlib.Graph()\n .setGraph({ rankdir: direction, marginx: m.x, marginy: m.y, ranksep: 55 })\n .setDefaultEdgeLabel(() => ({}));\n\n selectedNodes.forEach(d => {\n g.setNode(d, { width: 40, height: 50 });\n \n });\n \n selectedEdges.forEach(d => {\n //g.setEdge(d.V, d.W, { weight: 1, width: lineWidth(d.Latency) });\n \n g.setEdge(d.V, d.W, { weight: 1, width: lineWidth(d.Latency), latency: d.Latency, agent: d.AgentName});\n });\n \n \n dagre.layout(g);\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"nodes = g.nodes()\n .map(d => {\n const node = g.node(d);\n const nodeData = nodesData.find(n => n.Name == d);\n node.name = d;\n //TODO: according to nodeData.Type set the color (type 1: start, type2: middle, type3: end)\n node.fill = nodeData.Type == 1? \"#499951\": nodeData.Type==2 ? \"#6da6d1\" : \"#9dff7d\";\n node.dns = nodeData.DNS;\n node.ip = nodeData.Ip;\n \n let agentName = \"_\";\n if(nodeData.Type == 1){\n const nodeInfo = edgesData.find(n => n.V == d);\n agentName = nodeInfo.AgentName;\n }\n node.agent = agentName;\n return node;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"edges = g.edges()\n .map(d => {\n const edge = g.edge(d);\n //console.log(\"0)latency in edge\", edge)\n const edgeData = edgesData.find(e => e.V == d.v && e.W == d.w);\n edge.width = edgeData.Latency;\n edge.v = edgeData.V;\n edge.w = edgeData.W;\n \n //console.log(\"1)latency in edge\", d, edge, edgeData)\n return edge;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"chart.update(g, nodes, edges, direction)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"md`---\n### Data\n*Fake data to create a graph.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"selectedNodes = nodesData.map(d => d.Name)\n .filter(d => {\n const sources = selectedEdges.map(d => d.V);\n const targets = selectedEdges.map(d => d.W);\n return sources.includes(d) || targets.includes(d);\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"nodesData = data.Nodes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"selectedEdges = {\n let selectedData = []\n edgesData.map(d =>{\n if(d.Hop <= n && agents.includes(d.AgentName)){\n selectedData.push(d);\n }\n })\n \n return selectedData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"edgesData = data.Edges","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"agents = [\"wan-theyes-vm-eastasia-vm01\", \"wan-theyes-vm-eastus-az02\",\"wan-theyes-vm-brazilsouth-vm01\"]\n//agents = [\"wan-theyes-vm-brazilsouth-vm01\", \"wan-theyes-vm-eastus-az02\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1498,"value":"paths = data.NodePaths","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"data = FileAttachment(\"nodes_edges_paths.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"md`---\n### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"line = d3.line()\n .x(d => d.x)\n .y(d => d.y)\n .curve(d3.curveBasis)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"lineWidth = d3.scaleLinear()\n .domain([0, d3.max(edgesData, d => {\n console.log(\"inside line width\");\n return d.Latency})])\n .range([3, 5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"md`---\n### Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"w = 1200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"h = 780","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"m = ({\n x: 50,\n y: 50\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"delay = 650","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"chartTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip chartTip\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1428,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`---\n### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"dagre = require('dagre@0.8.5/dist/dagre.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"d3 = require('d3@6', 'd3-interpolate-path')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"import { radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"import { Scrubber } from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W28","stdlib":"1"}} 26:"$25:body"