2c:null 2d:["$","title",null,{"children":"Neighbourhood Definitions for CNNs and GNNs | Ameya Daigavane | Observable"}] 32:T80a0,cnn_svg = html` `33:T98cb,svg = html` ` 34:[] 30:{"id":"ff4a4ccd6c03add6","slug":"neighbourhoods-for-cnns-and-gnns","title":"Neighbourhood Definitions for CNNs and GNNs","thumbnail":"8261cf42b38a843e7c953f40af2bbc1318f0ae080a395d4fb48012a9807bb6ee","access_level":"public","create_time":"$D2021-06-28T05:14:03.749Z","update_time":"$D2021-07-01T16:24:14.919Z","view_time":null,"first_public_time":"$D2021-06-28T06:10:56.403Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"29561bb86c3368e7","login":"ameyasd","name":"Ameya Daigavane","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":"starter_2024"},"version":243,"publish_version":243,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa35c1e295926184","login":"ameyasd","name":"Ameya Daigavane","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":null}],"members":[{"type":"individual","id":"aa35c1e295926184","login":"ameyasd","name":"Ameya Daigavane","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Neighbourhood Definitions for CNNs and GNNs","cells":[{"id":0,"value":"md`# Neighbourhood Definitions for CNNs and GNNs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"function get_neighbours(node_id){\n let key_id = node_id.split('-')[1];\n let neighbours_map = {\n 'A': ['A', 'B'],\n 'B': ['B', 'A', 'C'],\n 'C': ['C', 'B', 'D', 'E', 'F', 'G'],\n 'D': ['D', 'C'],\n 'E': ['E', 'C'],\n 'F': ['F', 'C'],\n 'G': ['G', 'C'],\n }\n return neighbours_map[key_id].map((id) => (`#node-${id}-before`));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function reset_nodes() {\n d3.select(svg)\n .selectAll('.node-before')\n .transition(1000)\n .style('fill', '#ffffff');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"function highlight_nodes(id) {\n d3.select(svg)\n .select(id)\n .transition(1000)\n .style('fill', '#e2e2e2');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"function get_node_position(id){\n let node = d3.select(svg).select(id);\n return [node.attr('cx'), node.attr('cy')];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"function remove_old_arrows(){\n d3.select(svg)\n .selectAll('.gnn-arrows')\n .remove();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"function draw_arrows_to_updated_node(id) {\n let position = get_node_position(id);\n let half_diff = [(updated_node_position[0] - position[0])/2,\n (updated_node_position[1] - position[1])/2];\n let position_str = position.join(',');\n let half_diff_str = half_diff.join(',');\n\n d3.select(svg)\n .select('#layer2')\n .append('path')\n .attr('d', `m ${position_str} l ${half_diff_str} l ${half_diff_str}`)\n .attr('class', 'gnn-arrows')\n .attr('stroke', '#000000')\n .attr('fill', 'none')\n .attr('stroke-width', 0.264583)\n .attr('stroke-linecap', 'butt')\n .attr('stroke-linejoin', 'miter')\n .attr('stroke-miterlimit', 4)\n .attr('stroke-dasharray', '0.264583, 3.175')\n .attr('stroke-dashoffset', 0)\n .attr('stroke-opacity', 1)\n .attr('marker-mid', 'url(#marker3144)');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"on_selected_node_change = {\n // Reset all node fills.\n reset_nodes();\n \n // Highlight neighbours.\n let neighbours_ids = get_neighbours(selected_node_id);\n neighbours_ids.map(highlight_nodes);\n \n // Draw arrows.\n remove_old_arrows();\n neighbours_ids.map(draw_arrows_to_updated_node);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"add_interactivity = {\n d3.select(svg)\n .selectAll('.dummy-node')\n .style('fill', '#ffffff')\n .style('fill-opacity', '0')\n .on('mouseover', function(event){\n mutable selected_node_id = '#' + d3.select(this).attr('id')\n .replace('-dummy', '').replace('-after', '-before');\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"adjust_dimensions = {\n d3.select(cnn_svg)\n .attr('width', svg_width)\n .attr('height', cnn_svg_height);\n d3.select(svg)\n .attr('width', svg_width)\n .attr('height', svg_height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"mutable selected_node_id = '#node-E-before';","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"updated_node_id = selected_node_id.replace('before', 'after')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"updated_node_position = get_node_position(updated_node_id)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"svg_width = 0.7 * width;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"svg_height = svg_width * 45 / 130","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"cnn_svg_height = svg_width * 28 / 130","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"