2d:null 2e:["$","title",null,{"children":"Interactive GNN Visualizations | Ameya Daigavane | Observable"}] 33:T630,style = html` `34:[] 31:{"id":"5453631f78ab2e96","slug":"interactive-gnn-visualizations","title":"Interactive GNN Visualizations","thumbnail":"5a22ad763754ccdf2b132e88a7d9d74d5670a4954dda2dc1aa3ba77ed7cf5bbb","access_level":"unlisted","create_time":"$D2020-11-12T09:25:04.352Z","update_time":"$D2021-06-29T14:54:56.980Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"29561bb86c3368e7","login":"ameyasd","name":"Ameya Daigavane","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":"starter_2024"},"version":352,"publish_version":352,"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":{"title":"Interactive GNN Visualizations","cells":[{"id":0,"value":"md`# Interactive GNN Visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"viz_list = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"buttons = html`\n

\n ${gcn_buttons}\n

\n\n

\n ${gat_buttons}\n

\n\n

\n ${graphsage_buttons}\n

\n\n

\n ${gin_buttons}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"fig = html`\n

\n ${gcn_div}\n

\n\n

\n ${gat_div}\n

\n\n

\n ${graphsage_div}\n

\n\n

\n ${gin_div}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"eqn = html`\n

\n ${gcn_eqn}\n

\n\n

\n ${gat_eqn}\n

\n\n

\n ${graphsage_eqn}\n

\n\n

\n ${gin_eqn}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"function select_fig(tag){\n d3.select(viz_list).select('ul').selectAll('li').classed('selected', (d) => (d.tag == tag));\n mutable selected_tag = tag;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"function handle_click(event, d){\n select_fig(d.tag);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"mutable selected_tag = \"gcn\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"interactive_list = {\n d3.select(viz_list)\n .select('ul')\n .selectAll('li')\n .data(gnn_models)\n .join(\n enter => enter.append('li')\n .text(d => d.descr)\n .classed('selected', (d) => (d.tag == selected_tag))\n .on('click', handle_click),\n update => update.selectAll('li')\n .classed('selected', (d) => (d.tag == selected_tag))\n .on('click', handle_click),\n exit => exit.remove(),\n );\n \n [buttons, fig, eqn].forEach((cell) => {\n d3.select(cell).selectAll('div:not(.' + selected_tag + ')').style('display', 'none');\n d3.select(cell).selectAll('div:not(.' + selected_tag + ')').selectAll('div').style('display', 'none');\n\n d3.select(cell).selectAll('div.' + selected_tag).style('display', '');\n d3.select(cell).selectAll('div.' + selected_tag).selectAll('div').style('display', '');\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {buttons_display as gcn_buttons, W_curr as gcn_W_slider, main_div as gcn_div, network_static as gcn_network_static, network_dynamic as gcn_network_dynamic, eqn_display as gcn_eqn} from \"@ameyasd/graph-convolutional-networks\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"import {buttons_display as gat_buttons, main_div as gat_div, network_static as gat_network_static, network_dynamic as gat_network_dynamic, eqn_display as gat_eqn} from \"@ameyasd/graph-attention-networks\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"import {buttons_display as graphsage_buttons, main_div as graphsage_div, network_static as graphsage_network_static, network_dynamic as graphsage_network_dynamic, eqn_display as graphsage_eqn} \nfrom \"@ameyasd/graph-sample-and-aggregate-graphsage\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"import {buttons_display as gin_buttons, main_div as gin_div, network_static as gin_network_static, network_dynamic as gin_network_dynamic, eqn_display as gin_eqn} from \"@ameyasd/graph-isomorphism-networks\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"network_display_hack = [\n viz_list,\n gcn_network_static,\n gcn_network_dynamic,\n gat_network_static,\n gat_network_dynamic,\n graphsage_network_static,\n graphsage_network_dynamic,\n gin_network_static,\n gin_network_dynamic,\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"gnn_models = [\n {'descr': 'GCN', 'tag': 'gcn'},\n {'descr': 'GAT', 'tag': 'gat'},\n {'descr': 'GraphSAGE', 'tag': 'graphsage'},\n {'descr': 'GIN', 'tag': 'gin'},\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"