28:null 29:["$","title",null,{"children":"Neighbourhood Definitions for CNNs and GNNs | João Ricardo Mendes | Observable"}] 2e:T80a0,cnn_svg = html` `2f:T98cb,svg = html` ` 30:[] 2c:{"id":"fa7568faa00054c8","slug":null,"title":"Neighbourhood Definitions for CNNs and GNNs","thumbnail":"cbbccfaf5a69dba535707a76b5f8c1fda6e2d36a835857033b529f17be3d0604","access_level":"public","create_time":"$D2022-12-27T19:41:52.418Z","update_time":"$D2022-12-27T19:41:52.418Z","view_time":null,"first_public_time":"$D2022-12-27T19:41:52.418Z","has_unpublished_edits":null,"fork":{"id":"ff4a4ccd6c03add6","slug":"neighbourhoods-for-cnns-and-gnns","title":"Neighbourhood Definitions for CNNs and GNNs","owner":{"id":"29561bb86c3368e7","login":"ameyasd","name":"Ameya Daigavane"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7632798b0a0057f3","login":"joaormendes","name":"João Ricardo Mendes","avatar_url":"https://avatars-next.observableusercontent.com/5a37070bf9e58604859ec9aa7033b0dcb40e61c4ff0aeaba33424ba04567b1fd","tier":"pro_2024"},"version":243,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb55e01b401bd78d","login":"joaohurb","name":"João Ricardo Hurb Com","avatar_url":"https://avatars-next.observableusercontent.com/5a37070bf9e58604859ec9aa7033b0dcb40e61c4ff0aeaba33424ba04567b1fd","tier":null}],"members":[{"type":"individual","id":"fb55e01b401bd78d","login":"joaohurb","name":"João Ricardo Hurb Com","avatar_url":"https://avatars-next.observableusercontent.com/5a37070bf9e58604859ec9aa7033b0dcb40e61c4ff0aeaba33424ba04567b1fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2f","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":"$W30","stdlib":"1"}} 2d:"$2c:body"