2f:T47a,// Now render a voronoi grid { const svg = d3.select(combinedViz2).select('#svgOnTop'); const graph = combinedViz2.__graph; // This time rather than transforming our nodes via an svg transform, we'll get their positions in pixel space. const gVoronoi = svg.select('#voronoi') const gDelaunay = svg.select('#delaunay') const gNodes = svg.select("#nodes"); while (true) { const t = svgTransform(combinedViz2.__graph); const nodes = graph.getNodePositionsArray(); const nodesPixelSpace = nodes.map(n => t.coordinatesToPixels(n, width, 400)) gNodes .selectAll('circle') .data(nodesPixelSpace) .join('circle') .attr("cx", d=> d[0]) .attr("cy", d=> d[1]) .attr("r", 4) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 1) const delaunay = d3.Delaunay.from(nodesPixelSpace) console.log({nodesPixelSpace}) const voronoi = delaunay.voronoi([0, 0, width, 400]) gVoronoi.select("path") .attr("fill", "none") .attr("stroke", "#ccc") .attr("d", voronoi.render()); yield `Drew voronoi! ${nodes.length} nodes` } }30:T5c9,function svgTransform(graph) { // Return a function for mapping simulation space points to pixels. // Plus an svg space transform that can be used to transform a whole group of elements. const k = graph.store.transform[0]; const dx = graph.store.transform[6]; const dy = graph.store.transform[7]; const s = graph.config.spaceSize; const screenSize = graph.store.screenSize; const aspectRatio = graph.store.screenSize[1] / graph.store.screenSize[0]; const canvasWidthInSpace = s / k; const canvasHeightInSpace = canvasWidthInSpace * aspectRatio; // Return a transform from our graph that translates graph coordinates to pixel coordinates. const t = { translate: { x: (dx * screenSize[0] / 2) + (screenSize[0] / 2), y: - (dy * screenSize[1] / 2) + (screenSize[1] / 2) }, scale: { x: k, y: -k }, aspectRatio, transform: graph.store.transform } // SVG Transform String t.string = `translate(${t.translate.x} ${t.translate.y}) scale(${t.scale.x} ${t.scale.y})` // Transformation Functions for clip space and pixel space t.coordinatesToClip = (point) => { return [ (point[0] - s/2) * aspectRatio / canvasWidthInSpace + dx, (point[1] - s/2) / canvasWidthInSpace + dy, ] } t.coordinatesToPixels = (point, width, height) =>{ const p1 = t.coordinatesToClip(point); return [ (p1[0] / 2 + 0.5) * width, (-p1[1] / 2 + 0.5) * height, ] } return t }31:T655,{ const svg = htl.html``; // Plot our sim space coords. const scale = d3.scaleLinear().range([100, width-10]).domain([0, config.spaceSize]); const g = d3.select(svg).append('g') .attr('id', 'simAxis') .attr('transform', 'translate(0, 20)') .call(d3.axisTop(scale)) // Plot our clip space coords. // The x offset of our clip space origin from our space origin is determined by the scale and the offset. // With an offset of zero, our clip origin will always sit in the middle of the space. const xOriginSpace = config.spaceSize / 2 + explainTransform.offsetX * config.spaceSize / 2 / explainTransform.scaleK // A value of 1 in clip space will sit at xOriginSpace plus const xOneSpace = xOriginSpace + config.spaceSize / 2 / explainTransform.scaleK const scale2 = d3.scaleLinear().range([scale(xOriginSpace), scale(xOneSpace)]).domain([0, 1]); const g2 = d3.select(svg).append('g') .attr('id', 'clipAxis') .attr('transform', 'translate(0, 50)') .call(d3.axisTop(scale2).ticks(3)) // Plot our canvas space coords: const scale3 = d3.scaleLinear().range([scale(xOriginSpace), scale(xOneSpace)]).domain([0, explainTransform.canvasPixels]); const g3 = d3.select(svg).append('g') .attr('id', 'canvasAxis') .attr('transform', 'translate(0, 80)') .call(d3.axisTop(scale3).ticks(3)) return svg }32:[] 2d:{"title":"Enriching Cosmograph Network Visualisations","cells":[{"id":0,"value":"# Enriching Cosmograph Network Visualisations\n\nThis notebook explores rendering graphs with [cosmograph.app](https://cosmograph.app/) ([docs](https://github.com/cosmograph-org/cosmos)) and adding some information on top. Cosmograph does super-quick rendering of graphs with thousands or tens of thousands of nodes, but I'd like to display some information on top. To do this we need to retrieve the node positions from the graph and then create some kind of visualisation layer above it.\n\nFirst lets create a basic graph with some simple data and render it.","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"canvas1 = {\n // Initiate our canvas\n const canvas = DOM.canvas(width, 200);\n yield canvas; \n \n // Now add our graph to it\n const graph = new cosmo.Graph(canvas, config);\n graph.setData(nodes, links);\n graph.zoom(14);\n graph.setConfig({\n events: {\n onClick\t: (node, index, pos, event) => {\n console.log({node, index, pos, event});\n mutable clicked = {node, index, pos, event}\n }\n }\n });\n canvas.__graph = graph\n yield canvas;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"graph = canvas1.__graph","pinned":false,"hidden":false,"mode":"ojs"},{"id":1527,"value":"graph.store.scaleNodeX(100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":688,"value":"We can retrieve the data from this graph by calling `graph.getNodePositions()`","pinned":false,"hidden":false,"mode":"md"},{"id":696,"value":" {\n while (true) {\n const positions = graph.getNodePositionsArray();\n yield Promises.tick(100, Inputs.table(Object.values(graph.getNodePositions()))) \n }\n}\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"But these positions are in the coordinate system of the simulation cosmo runs. To transform them into something we can use for our svg layer, we need to retrieve some details of the simulations transforms.","pinned":false,"hidden":false,"mode":"md"},{"id":729,"value":"Lets retrieve some live info about our graph:","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"info = {\n var counter = 1\n while (true) {\n counter += 1\n const positions = graph.getNodePositionsArray();\n yield Promises.tick(50, {\n zoom: {... graph.canvas.__zoom},\n screenSize: graph.store.screenSize,\n spaceSize: graph.config.spaceSize,\n pixelRatio: graph.config.pixelRatio,\n transform: [... graph.store.transform],\n svgTransform: svgTransform(graph),\n nodeBounds: {\n x0: d3.min(positions.map(x => x[0])), \n y0: d3.min(positions.map(x => x[1])),\n x1: d3.max(positions.map(x => x[0])),\n y1: d3.max(positions.map(x => x[1])),\n width: d3.max(positions.map(x => x[0])) - d3.min(positions.map(x => x[0])),\n height: d3.max(positions.map(x => x[1])) - d3.min(positions.map(x => x[1])),\n }\n })\n \n }\n \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"The scaling factor is given by graph.store.transform[0], and flipped for the y axis by multiplying it by -1. This is because svg has the origin in the top left, whereas WebGL has the origin in the bottom left, with y pointing up.\n","pinned":false,"hidden":false,"mode":"md"},{"id":772,"value":"scale = info.svgTransform.scale","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"The offset of our cosmo graph is given by the transform in terms of clip coordinates (which run from -1 to 1 across the width or height of the canvas). We just need to multiply it by the canvas size and adjust by a factor of 2 (since our clip space has a range of two units), and then shift it over by half the size of the canvas so our origin is in the top left.\n","pinned":false,"hidden":false,"mode":"md"},{"id":777,"value":"translate = info.svgTransform.translate","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"## Adding an SVG Layer\n\nPutting this all together, we can render an svg on top of our canvas with the node positions added in.\n\n**Note:** We have to set the `pointer-events` property of our svg to `none` so that we can still zoom and interact with the cosmograph canvas with our cursor.\n```json\nLast Click: ${JSON.stringify(clicked)}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":815,"value":"combinedViz = {\n // Initiate our layered visualisation\n const div = htl.html`\n

\n \n

\n `\n console.log('div', div)\n yield div; \n \n // Now add our graph to it\n const canvas = d3.select(div).select('canvas').node()\n console.log('canvas2', canvas)\n const graph = new cosmo.Graph(canvas, config);\n graph.setData(nodes, links);\n graph.zoom(14);\n graph.setConfig({\n events: {\n onClick\t: (node, index, pos, event) => {\n console.log({node, index, pos, event});\n mutable clicked = {node, index, pos, event}\n }\n }\n });\n div.__graph = graph\n yield div\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"// Now render our nodes on top of our graph\n{\n const svg = d3.select(combinedViz).select('#svgOnTop');\n // svg.style('pointer-events', 'auto')\n // set it's transform\n const t = svgTransform(combinedViz.__graph);\n const gNodes = svg.select('#nodes')\n gNodes.attr('transform', t.string)\n // Bind nodes to data.\n const graph = combinedViz.__graph;\n const nodes = graph.getNodePositionsArray();\n gNodes\n .selectAll('circle')\n .data(nodes)\n .join('circle')\n .attr(\"cx\", d=> d[0] - info.spaceSize/2)\n .attr(\"cy\", d=> d[1] - info.spaceSize/2)\n .attr(\"r\", 0.25)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.1)\n return `Rendered nodes to svg! Transform: ${t.string}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"This by itself is not so impressive, we've just drawn nodes we had already drawn, but what about drawing something else - like a voronoi pattern?","pinned":false,"hidden":false,"mode":"md"},{"id":909,"value":"combinedViz2 = {\n // Initiate our layered visualisation\n const div = htl.html`\n

\n \n

\n `\n yield div; \n // Now add our graph to it\n const canvas = d3.select(div).select('canvas').node()\n const graph = new cosmo.Graph(canvas, config);\n graph.setData(nodes, links);\n graph.zoom(14);\n graph.setConfig({\n events: {\n onClick\t: (node, index, pos, event) => {\n console.log({node, index, pos, event});\n mutable clicked = {node, index, pos, event}\n }\n }\n });\n div.__graph = graph\n yield div\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1168,"value":"Lets get a realtime readout of our node locations, plus the origin.","pinned":false,"hidden":false,"mode":"md"},{"id":927,"value":"{\n const graph = combinedViz2.__graph\n while (true) {\n // Show node positions transformed\n const nodes = [\n ['origin', 0,0],\n ...graph.getNodePositionsArray().map((d, i) => [`node ${i}`, ...d])\n ]\n const t = svgTransform(graph)\n const nodesT = nodes.map(n => {\n const n1 = t.coordinatesToPixels([n[1], n[2]], width, 400)\n return {\n \"Point\": n[0], \n \"x (simulation space)\": n[1], \n \"y (simulation space)\": n[2], \n \"x (pixel space)\": n1[0], \n \"y (pixel space)\": n1[1],\n }\n })\n yield Promises.tick(100, Inputs.table(nodesT))\n \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1461,"value":"And here's where we draw our points and Voronoi diagram.","pinned":false,"hidden":false,"mode":"md"},{"id":911,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"## SVG Transform Function \nRetrieves the transform needed to plot node coordinates in an svg","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":883,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"cosmo = import(\"https://cdn.skypack.dev/@cosmograph/cosmos@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"// \"https://cosmograph.app/data/jan99jac040sc.csv\"\ndata = [\n // a very simplified graph\n {source: 1, target: 2, w: 1},\n {source: 2, target: 3, w: 1},\n {source: 2, target: 4, w: 1},\n {source: 3, target: 4, w: 1},\n {source: 4, target: 1, w: 1},\n {source: 4, target: 5, w: 1},\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"nodes = [...new Set(data.flatMap((d) => [d.source, d.target]))].map(id => ({id}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"links = data","pinned":true,"hidden":false,"mode":"ojs"},{"id":888,"value":"mutable clicked = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"config = ({\n backgroundColor: \"#151515\",\n nodeSize: 1,\n nodeColor: \"#984040\",\n linkWidth: 0.1,\n linkColor: \"#8C8C8C\",\n linkArrows: false,\n spaceSize: 200,\n pixelRatio: 2,\n simulation: {\n linkDistance: 4,\n linkSpring: 2,\n repulsion: 0.1,\n gravity: 0.1,\n decay: 10000\n },\n events: {\n onClick: (node) => (mutable clicked = node)\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1171,"value":"## Transformation Logic\nI got super confused messing with transforms between simulation space, clip space and svg pixel space. Here's some working through it.\n\nWe have node positions in a simulation space with a size set by `graph.config.spaceSize`. I went with ${config.spaceSize} above. So our node positions will be something like [100, 100] for a node in the middle of the space. The origin for this space is in the bottom left.","pinned":false,"hidden":false,"mode":"md"},{"id":1179,"value":"Then we have our webgl canvas that is like a window onto that space. It can move and scale. Our offset for transformation is defined relative to the current size of the window. An x offset of -1 always moves the centre of the simulation space one screen to the left (and +1 one screen to the right).\n ","pinned":false,"hidden":false,"mode":"md"},{"id":1183,"value":"viewof explainTransform = Inputs.form({\n offsetX: Inputs.range([-2,2], {\"label\": \"X Offset\", step: 0.1}),\n scaleK: Inputs.range([1, 4], {\"label\": \"Scale\"}),\n canvasPixels: Inputs.range([10, 1000], {\"label\": \"Canvas Size (px)\", value: 400, step: 10})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}