3e:null 3f:["$","title",null,{"children":"Exploring multi graph results | Zipeng Liu | Observable"}] 45:T470,fetchData = async function(path) { const emb = await fetchCsvData(path + 'node-embeddings.csv'); const predRes = await d3.json(path + 'prediction-results.json'); const graphData = await d3.json(path + 'graph.json'); const embGraph = predRes.graph_embeddings; const labels = { predLabels: predRes.predictLabels, trueLabels: predRes.trueLabels, nodeLabels: graphData.nodes.map(d => d.label) }; // Add a gid to each node and edge for (let gid in graphData.graph) { if (graphData.graph.hasOwnProperty(gid)) { const g = graphData.graph[gid]; for (let nid of g.nodes) { graphData.nodes[nid].gid = g.id; } for (let eid of g.edges) { graphData.edges[eid].gid = g.id; } } } // Transform the dict of graph to array const graphArr = new Array(Object.keys(graphData.graph).length).fill(0).map((x, i) => graphData.graph[i]) return {emb, embGraph, labels, links: graphData.edges, nodes: graphData.nodes, graphs: graphArr, numNodes: graphData.nodes.length, numEdges: graphData.edges.length, numGraphs: graphArr.length, graphMetrics: []}; }46:Teac,function renderMultiGraphs(graphs, coords, edges, graphWH, graphMetrics=[]) { const n = graphs.length; const width = 1000; const margin = 10, margin2 = 20, radius = 3; const metricH = 4, metricMargin = 1; const cols = Math.floor(width / (graphWH + margin2)), rows = Math.ceil(n / cols); const height = rows * (graphWH + margin2 + (metricH + metricMargin) * graphMetrics.length); // console.log(rows, cols); const colors = d3.schemeCategory10; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); const g = svg.append("g") .attr("transform", `translate(${margin},${margin})`); // place the highlighted graphs at front // const selected = {}; // for (let id of selectionGraphs.sel[0]) selected[id] = true // let graphsSorted = graphs; // if (Object.keys(selectionGraphs.sel[0]).length > 0) { // graphsSorted = graphs.sort((g1, g2) => selected[g1.id]? -1: 0); // } const graphsSVG = g.append("g") .selectAll("g") .data(graphs) .join("g") .attr("transform", (d, i) => `translate(${(i % cols) * (graphWH + margin2)},${Math.floor(i / cols) * (graphWH + margin2 + (metricH + metricMargin) * graphMetrics.length)})`); graphsSVG.append("rect") .attr("x", -1) .attr("y", -1) .attr("width", graphWH + 2) .attr("height", graphWH + 2) .style("stroke", d => graphLabelColors[dataset.labels.predLabels[d.id]]) .style("stroke-width", "1px") .style("fill", d => dataset.labels.predLabels[d.id] === dataset.labels.trueLabels[d.id]? "none": "#eee"); graphsSVG.append("rect") .attr("x", -4) .attr("y", -4) .attr("width", graphWH + 8) .attr("height", graphWH + 8) .style("stroke", d => graphLabelColors[dataset.labels.trueLabels[d.id]]) .style("stroke-width", "1px") .style("fill", "none"); // graphsSVG.append("text") // .attr("x", graphWH + 2) // .attr("y", graphWH + 2) // .text("v") // .style("visibility", d => selected[d.id]? "visible": "hidden") if (graphMetrics.length > 0) { const metricScales = graphMetrics.map( gm => d3.scaleLinear().domain([0, gm.extent[1]]).range([0, graphWH])); const metricsEl = graphsSVG.append("g") .selectAll("g") .data(d => graphMetrics.map(gm => gm.values[d.id])) .join("g") .append("g") .attr("transform", (d, i) => `translate(0, ${graphWH + 6 + i * (metricH + metricMargin)})`); metricsEl.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", (d, i) => metricScales[i](d)) .attr("height", metricH) .style("fill", "#ccc") metricsEl.append("text") .text(d => d) .attr("x", (d, i) => metricScales[i](d) + 4) .attr("y", 6) .style("font-size", "8px") } // console.log(graphs[0].edges); const edgesEl = graphsSVG.append("g") .selectAll("line") .data(d => d.edges) .join("path") .attr("d", eid => generateBondPath(coords[edges[eid].source], coords[edges[eid].target], edges[eid].label)) // .join("line") // .attr("x1", d => coords[edges[d].source].x) // .attr("y1", d => coords[edges[d].source].y) // .attr("x2", d => coords[edges[d].target].x) // .attr("y2", d => coords[edges[d].target].y) .style("stroke", "#888") .style("stroke-dasharray", eid => edges[eid].label === 0? '2': 'none') .style("stroke-width", "1px") .style("fill", "none"); const nodesEl = graphsSVG.append("g") .selectAll("circle") .data(d => d.nodes) .join("circle") .attr("cx", id => coords[id].x) .attr("cy", id => coords[id].y) .attr("r", radius) .style("fill", id => colors[dataset.labels.nodeLabels[id]]); return Object.assign(svg.node(), {}) }47:Ta52,function renderGraphs(coords, width, height, labels) { const margin = 10, radius = 3; const colors = graphLabelColors; const hasHighlight = Object.keys(graphsToHighlight).length > 0; const svg = d3.create("svg") .attr("width", width + 2*margin) .attr("height", height + 2 * margin) .attr("viewBox", [0, 0, width + 2 * margin, height + 2 * margin]); const g = svg.append("g") .attr("transform", `translate(${margin},${margin})`) const nodes = g.append("g") .selectAll("circle") .data(coords) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", radius) .style("fill", (d, i) => colors[labels[d.id]]) .style("opacity", (d, i) => !hasHighlight || graphsToHighlight[d.id]? 1.0: 0.1); const brush = d3 .brush() .on("start", brushStart) //.on("brush", brushed) .on("end", brushEnd) .extent([ [-margin, -margin], [width + margin, height + margin] ]); var sel = []; var selDict = {}; const quadtree = d3.quadtree() .extent([[-margin, -margin], [width + margin, height + margin]]) .x(d => d.x) .y(d => d.y) .addAll(coords); const gBrush = g.append("g").attr("class", "gBrush"); gBrush.call(brush); // clear previous brush styles function brushStart() { } // style brushed circles function brushEnd() { // use d3.brushSelection to get bounds of the brush const ext = d3.brushSelection(this); if (ext !== null) { search(quadtree, ext); } svg.node().dispatchEvent(new CustomEvent("input", { bubbles: true })) } // add selected nodes to sel and selDict // add the nearest neighbors of selected nodes to nn (only work for embedding space) function search(quadtree, [[x0, y0], [x3, y3]]) { const selTemp = [], nnTemp = []; quadtree.visit((node, x1, y1, x2, y2) => { if (!node.length) { // leaf nodes do { const {data: d, data: {x, y}} = node; if (x >= x0 && x < x3 && y >= y0 && y < y3 && (!hasHighlight || graphsToHighlight[d.id])) { selTemp.push(d.id); selDict[d.id] = true; } } while ((node = node.next)); } return x1 >= x3 || y1 >= y3 || x2 < x0 || y2 < y0; }); if (selTemp.length > 0) { nodes.style("stroke", (d, i) => selDict[i]? "black": "none"); sel.push(selTemp); } } function clearSelections() { console.log("called clear"); nodes.style("stroke", "none"); brush.clear(gBrush); sel.length = 0; selDict = {}; } return Object.assign(svg.node(), {value: {sel}, clearSelections}); }48:T4b4,neighborCoords = { // Coords of neighbors are determined by (1) angle: same angle as the nearest selected nodes; (2) distance: embedding distance to nearest nodes const width = 180, margin = 10, centerRadius = 50, cx = 250, cy = 250; // remap the edges of the subgraph to zero-based index source and target, and keep the neighbor nodes only const neiMapping = {}; for (let i = 0; i < neighborNodes.length; i++) { neiMapping[neighborNodes[i]] = i; } const remapEdges = subgraph.edges .filter(e => neiMapping.hasOwnProperty(e.source) && neiMapping.hasOwnProperty(e.target)) .map(e => ({source: neiMapping[e.source], target: neiMapping[e.target], eid: e.eid})); const s = d3.scaleLinear().domain(d3.extent(neighborAvrDist)).range([layers[1].r0, layers[1].r1]); const coords = neighborAvrDist.map((d, i) => ({id: neighborNodes[i]})) const sim = d3.forceSimulation(coords) .force('link', d3.forceLink(remapEdges).distance(100)) .force('radial', d3.forceRadial().radius((d, i) => s(neighborAvrDist[i])).x(cx).y(cy).strength(1)) .force("collide", d3.forceCollide().radius(4)) .stop() for (let i = 0; i < 100; i++) { sim.tick(); yield coords; } }49:Ta9a,function renderCircularLayout(coords, edges, layers, width, height, labels, includeNodeIds) { const margin = 10, nodeR0 = 2, nodeR1 = 4; const colors = d3.schemeCategory10; const layerColors = ['#999', '#666'] // const ll = colorBy === "true label"? labels.trueLabels: labels.predLabels; const ll = Array.isArray(labels)? labels: labels.trueLabels; const svg = d3.create("svg") .attr("width", width + 2*margin) .attr("height", height + 2 * margin) .attr("viewBox", [0, 0, width + 2 * margin, height + 2 * margin]); const g = svg.append("g") .attr("transform", `translate(${margin},${margin})`) const renderLayers = g.append("g") .selectAll("circle") .data(layers.reverse()) .join("circle") .attr("cx", d => d.cx) .attr("cy", d => d.cy) .attr("r", d => d.r1) .style("fill", (d, i) => layerColors[i]) .style("opacity", 0.1); const renderEdges = g.append("g") .selectAll("line") .data(edges) .join("line") .attr("x1", d => coords[d.source].x) .attr("y1", d => coords[d.source].y) .attr("x2", d => coords[d.target].x) .attr("y2", d => coords[d.target].y) .style("stroke", "#ccc") .style("stroke-width", "1px"); const incCoords = coords.filter(c => includeNodeIds.has(c.id)); const renderNodes = g.append("g") .selectAll("circle") .data(incCoords) .join("g"); // outer ring color represents predictive labels const outer = renderNodes.append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", nodeR1) .style("fill", (d, i) => colors[labels[d.id]]) .style("stroke", "none") // .style("opacity", (d, i) => !hasHighlight || nodesToHighlight[d.id]? 1.0: 0.1); // center color represents true labels // const inner = renderNodes.append("circle") // .join("circle") // .attr("cx", d => d.x) // .attr("cy", d => d.y) // .attr("r", nodeR0) // .style("fill", (d, i) => colors[labels.trueLabels[d.id]]); // Build a mapping from node id to zero-based index const nodeMap = {}; for (let i = 0; i < incCoords.length; i++) { nodeMap[incCoords[i].id] = i; } renderNodes .on('mouseenter', function() { //d3.select(this).style("stroke", "black"); outer.style("stroke", "none"); const hoverId = d3.select(this).data()[0].id; console.log(hoverId); d3.select(outer.nodes()[nodeMap[hoverId]]).style("stroke", "black") for (let neighId of neiInfo.neighborMasks[hoverId].toArray()) { d3.select(outer.nodes()[nodeMap[neighId]]).style("stroke", "black") } }) .on('mouseleave', function() {outer.style("stroke", "none")}) return Object.assign(svg.node(), {}); }4a:[] 43:{"id":"730fdc9b7675fba9","slug":null,"title":"Exploring multi graph results","thumbnail":"5eb39a8efff6667211e9bc269d603e7746c5c1913d50eac1cee67e160f37bc89","access_level":"public","create_time":"$D2023-01-18T14:41:27.057Z","update_time":"$D2023-02-22T09:59:26.936Z","view_time":null,"first_public_time":"$D2023-01-18T14:41:27.057Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"412485c08e0f3413","login":"zipengliu","name":"Zipeng Liu","avatar_url":"https://avatars-next.observableusercontent.com/4ed20aee090c7d54363eede156b891d6afbd04cc95530d94840d9e6d25e3cacd","tier":"starter_2024","bio":"","following":false},"version":729,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c36864b43c4594a2","login":"zipengliu","name":"Zipeng Liu","avatar_url":"https://avatars-next.observableusercontent.com/4ed20aee090c7d54363eede156b891d6afbd04cc95530d94840d9e6d25e3cacd","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"c36864b43c4594a2","login":"zipengliu","name":"Zipeng Liu","avatar_url":"https://avatars-next.observableusercontent.com/4ed20aee090c7d54363eede156b891d6afbd04cc95530d94840d9e6d25e3cacd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Exploring multi graph results","cells":[{"id":0,"value":"# Exploring multi graph results","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"baseUrl = 'http://localhost:3000/datasets/'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"fetchCsvData = async function(url) {\n return d3.csvParseRows(await d3.text(url), function(d) {\n return d.map(Number);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"fetchLabelData = async function(url) {\n var x = await d3.text(url)\n return x.trim().split('\\n').map(Number)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"dataset = fetchData(baseUrl + 'mutag-mpnn2/')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"function dedupBidirectional(dataset) { // dedup the bi-directional edges, re-assign eid\n const newLinks = dataset.links.filter((e, i) => (i & 1) === 0);\n const newLinks2 = newLinks.map((e, i) => ({...e, eid: i}));\n dataset.links = newLinks2;\n let k = 0;\n for (let g of dataset.graphs) {\n g.edges = [];\n while (k < newLinks2.length && newLinks2[k].gid === g.id) {\n g.edges.push(k);\n k++;\n }\n }\n dataset.numEdges = dataset.numEdges >> 1;\n return dataset;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"dedupBidirectional(dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"edgeInfo = filterEdgeAndComputeDict(dataset.numNodes, dataset.links)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"edgeDict = edgeInfo.edgeDict","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"neiInfo = computeNeighborMasks(dataset.numNodes, edgeDict, 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function* computeForceLayout(ids, links, width, height) {\n const coords = (new Array(ids.length).fill(0)).map((x, i) => ({id: ids[i]}));\n // copy the links to prevent d3 from changing the original link data formats\n const linkCopy = links.map(l => ({...l}));\n const sim = d3.forceSimulation(coords)\n .force('link', d3.forceLink(linkCopy).id(d => d.id))\n .force('charge', d3.forceManyBody())\n .force('center', d3.forceCenter().x(height / 2).y(width / 2))\n .stop();\n\n for (let i = 0; i < 100; i++) {\n sim.tick();\n yield coords;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"initCoords = computeForceLayout(dataset.nodes.map(d => d.id), dataset.links, width, height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"reCoords = rescaleCoords(initCoords, width, height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"chartForce = renderGraph(reCoords, dataset.links, width, height, dataset.labels.nodeLabels)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Swatches(d3.scaleOrdinal(nodeLabelMapping, d3.schemeCategory10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof clearForce = Inputs.button(\"Clear selection\", {value: null, reduce: chartForce.clearSelections })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"selectionForce = Generators.input(chartForce)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"umapResult = new UMAP({\n nComponents: 2,\n minDist: 0.1,\n nNeighbors: 15\n}).fit(dataset.emb)\n.map(c => ({x: c[0], y: c[1]}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"drCoords = rescaleCoords(umapResult, width, height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"chartDR = renderGraph(drCoords, dataset.links, width, height, dataset.labels.nodeLabels, true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"Swatches(d3.scaleOrdinal(nodeLabelMapping, d3.schemeCategory10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"viewof clearDR = Inputs.button(\"Clear selection\", {value: null, reduce: chartDR.clearSelections })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"selectionDR = Generators.input(chartDR)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"selNei = getNeighborsOfSelection(selectionDR)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"### Show each graph in small multiples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"graphSize = 100;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"graphLabelColors = [\"grey\", \"red\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"function computeSingleForceLayout(ids, links, width, height) {\n let coords = (new Array(ids.length).fill(0)).map((x, i) => ({id: ids[i]}));\n // copy the links to prevent d3 from changing the original link data formats\n const sim = d3.forceSimulation(coords)\n .force('link', d3.forceLink(links).id(d => d.id))\n .force('charge', d3.forceManyBody().strength(-20))\n .force('center', d3.forceCenter().x(height / 2).y(width / 2))\n .stop();\n for (let i = 0; i < 1000; i++) {\n sim.tick();\n }\n const sx = d3.scaleLinear().domain(d3.extent(coords.map(c => c.x))).range([0, width]);\n const sy = d3.scaleLinear().domain(d3.extent(coords.map(c => c.y))).range([0, height]);\n return coords.map(c => ({x: sx(c.x), y: sy(c.y), id: c.id})); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"coordsMultiGraph = {\n const coords = new Array(dataset.numNodes);\n for (let g of dataset.graphs) {\n const tmpCoords = computeSingleForceLayout(\n g.nodes, g.edges.map(eid => ({...dataset.links[eid]})), graphSize, graphSize);\n for (let c of tmpCoords) {\n coords[c.id] = c;\n }\n }\n return coords;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"function generateBondPath(p, q, bondType) {\n const offset = 1;\n const path = d3.path();\n if (bondType === 1) { // single\n path.moveTo(p.x, p.y);\n path.lineTo(q.x, q.y);\n } else {\n if (p.x > q.x) { // swap\n let t = p;\n p = q;\n q = t;\n }\n const l = Math.sqrt(Math.pow(p.x - q.x, 2) + Math.pow(p.y - q.y, 2))\n const sina = Math.sin((q.y - p.y) / l), cosa = Math.cos((q.x - p.x) / l);\n path.moveTo(p.x + sina * offset, p.y - cosa * offset);\n path.lineTo(q.x + sina * offset, q.y - cosa * offset);\n if (bondType === 0 || bondType === 2) { // double or aromatic\n path.lineTo(q.x - sina * offset, q.y + cosa * offset);\n path.lineTo(p.x - sina * offset, p.y + cosa * offset);\n } else { // triple\n path.lineTo(q.x, q.y);\n path.lineTo(p.x, p.y);\n path.lineTo(p.x - sina * offset, p.y + cosa * offset);\n path.lineTo(q.x - sina * offset, q.y + cosa * offset);\n }\n }\n return path;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"chartTestPath = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", 100)\n .attr(\"height\", 100);\n const p = {x: 70, y: 90}, q = {x: 50, y: 50}, r = 4;\n svg.append(\"circle\")\n .attr(\"cx\", p.x)\n .attr(\"cy\", p.y)\n .attr(\"r\", r)\n .style(\"stroke\", \"black\")\n // .style(\"fill\", \"none\");\n svg.append(\"circle\")\n .attr(\"cx\", q.x)\n .attr(\"cy\", q.y)\n .attr(\"r\", r)\n .style(\"stroke\", \"black\")\n // .style(\"fill\", \"none\");\n svg.append(\"path\")\n .attr(\"d\", generateBondPath(p, q, 0))\n .style(\"stroke-width\", \"1px\")\n .style(\"stroke\", \"black\")\n .style(\"stroke-dasharray\", \"none\")\n .style(\"fill\", \"none\");\n // svg.append(\"path\")\n // .attr(\"d\", generateBondPath(q, p, 0))\n // .style(\"stroke-width\", \"1px\")\n // .style(\"stroke\", \"black\")\n // .style(\"stroke-dasharray\", \"none\")\n // .style(\"fill\", \"none\");\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"chartMultiGraphTest = renderMultiGraphs(\n [dataset.graphs[0]], \n coordsMultiGraph, dataset.links, graphSize, graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"chartMultiGraph = renderMultiGraphs(dataset.graphs, coordsMultiGraph, dataset.links, graphSize, graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"Swatches(d3.scaleOrdinal(nodeLabelMapping, d3.schemeCategory10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"renderMetricSummary(dataset.graphs.map(g => g.id), graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"umapResultGraph = new UMAP({\n nComponents: 2,\n minDist: 0.1,\n nNeighbors: 15\n}).fit(dataset.embGraph)\n.map(c => ({x: c[0], y: c[1]}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"drCoordsGraph = rescaleCoords(umapResultGraph, width, height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"chartDRGraph = renderGraphs(drCoordsGraph, width, height, dataset.labels.trueLabels)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"Swatches(d3.scaleOrdinal([\"non-mutagenic\", \"mutagenic\"], graphLabelColors))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"viewof clearDRGraph = Inputs.button(\"Clear selection\", {value: null, reduce: chartDRGraph.clearSelections })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"selectionGraphs = Generators.input(chartDRGraph)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"numClasses = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"viewof selCond = Inputs.form({\n pred: Inputs.select([...Array(numClasses).keys(),'all'], {label: 'predictive label', value: 'all'}),\n true: Inputs.select([...Array(numClasses).keys(),'all'], {label: 'AND true label', value: 'all'}),\n correct: Inputs.select(['wrong','correct','all'], {label: 'AND prediction correctness', value: 'all'}),\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"chartMultiGraphSelection0 = renderMultiGraphs(\n selectionGraphs.sel[0].map(gid => dataset.graphs[gid]), \n coordsMultiGraph, dataset.links, graphSize, graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"renderMetricSummary(selectionGraphs.sel[0], graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"chartMultiGraphSelection1 = renderMultiGraphs(\n selectionGraphs.sel[1].map(gid => dataset.graphs[gid]), \n coordsMultiGraph, dataset.links, graphSize, graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"renderMetricSummary(selectionGraphs.sel[1], graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"chartMultiGraphSelection2 = renderMultiGraphs(\n selectionGraphs.sel[2].map(gid => dataset.graphs[gid]), \n coordsMultiGraph, dataset.links, graphSize, graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"renderMetricSummary(selectionGraphs.sel[2], graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"graphsToHighlight = {\n const h = {};\n if (selCond.pred === 'all' && selCond.true === 'all' && selCond.correct === 'all') return h;\n for (let i = 0; i < dataset.labels.trueLabels.length; i++) {\n const p = dataset.labels.predLabels[i],\n t = dataset.labels.trueLabels[i];\n if (isNodeHighlight(p, t, selCond)) {\n h[i] = true;\n }\n }\n return h;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"### Graph metrics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"function getComputeNumberOfElements(el) {\n return (graph) => graph.nodes.reduce((acc, nodeId) => acc + (dataset.labels.nodeLabels[nodeId] === el), 0)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"function getComputeNumberOfBondType(t) {\n return (graph) => graph.edges.reduce((acc, eid) => acc + (dataset.links[eid].label === t), 0)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"getComputeNumberOfBondType(0)(dataset.graphs[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"function computeNumberOfNO2(graph) {\n const nl = dataset.labels.nodeLabels;\n let s = 0;\n for (let nodeId of graph.nodes) {\n if (nl[nodeId] === 1) {\n // CAUTION better use neighborMasksByHop[0] if multiple hops in count\n const neighs = neiInfo.neighborMasksByHop[0][nodeId].toArray();\n const numberOfO = neighs.reduce((acc, cur) => acc + (nl[cur] === 2), 0);\n if (numberOfO === 2) {\n s++;\n }\n }\n }\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"function computeNumberOfNH2(graph) {\n const nl = dataset.labels.nodeLabels;\n let s = 0;\n for (let nodeId of graph.nodes) {\n if (nl[nodeId] === 1) {\n const neighs = neiInfo.neighborMasksByHop[0][nodeId].cardinality() - 1;\n if (neighs === 1) s++;\n }\n }\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"function computeNumberOfBenzenes(graph) {\n let count = 0;\n const cycLen = 6, el = 0; // cycle of 6 carbons\n \n let visited = {};\n function dfs(start, curNode, remLen) {\n const neighs = neiInfo.neighborMasksByHop[0];\n if (remLen === 0) {\n if (neighs[curNode].get(start) === 1) {\n count++;\n }\n return;\n }\n for (let nid of neighs[curNode].toArray()) {\n if (!visited[nid] && dataset.labels.nodeLabels[nid] === el) {\n visited[nid] = true;\n dfs(start, nid, remLen - 1);\n visited[nid] = false;\n }\n }\n }\n\n for (let startId of graph.nodes) {\n if (dataset.labels.nodeLabels[startId] === el) {\n visited[startId] = true;\n dfs(startId, startId, cycLen - 1);\n visited[startId] = false;\n }\n }\n return count / 12; // each carbon is counted twice (both direction)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"computeNumberOfBenzenes(dataset.graphs[50])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"getComputeNumberOfElements(0)(dataset.graphs[40])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"computeNumberOfNO2(dataset.graphs[5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"computeNumberOfNH2(dataset.graphs[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"function computeGraphMetrics(name, func) {\n const r = {\n name,\n func,\n values: dataset.graphs.map(g => func(g)),\n };\n r.extent = d3.extent(r.values);\n return r;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"graphMetrics = [\n computeGraphMetrics(\"# Benzenes\", computeNumberOfBenzenes),\n computeGraphMetrics(\"# NO2\", computeNumberOfNO2),\n computeGraphMetrics(\"# NH2\", computeNumberOfNH2),\n computeGraphMetrics(\"# C\", getComputeNumberOfElements(0)),\n computeGraphMetrics(\"# F\", getComputeNumberOfElements(3)),\n computeGraphMetrics(\"# I\", getComputeNumberOfElements(4)),\n computeGraphMetrics(\"# Cl\", getComputeNumberOfElements(5)),\n computeGraphMetrics(\"# Br\", getComputeNumberOfElements(6)),\n computeGraphMetrics(\"# aromatic bonds\", getComputeNumberOfBondType(0)),\n computeGraphMetrics(\"# single bonds\", getComputeNumberOfBondType(1)),\n computeGraphMetrics(\"# double bonds\", getComputeNumberOfBondType(2)),\n computeGraphMetrics(\"# triple bonds\", getComputeNumberOfBondType(3)),\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"function renderMetricSummary(graphs, metrics) {\n const data = [];\n for (let gm of metrics) {\n for (let gid of graphs) {\n data.push({metricName: gm.name, value: gm.values[gid]});\n }\n }\n // console.log(data);\n return Plot.plot({\n height: 150,\n width: 1000,\n grid: true,\n facet: {data: data, x: \"metricName\"},\n marks: [\n Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"value\", thresholds: 20, fill: \"#888\"})),\n Plot.ruleY([0])\n ]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"renderMetricSummary(dataset.graphs.map(g => g.id), graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"function compareMetricSummary(graphSelections, metrics) {\n const data = [];\n for (let gm of metrics) {\n for (let selId = 0; selId < graphSelections.length; selId++) {\n for (let gid of graphSelections[selId]) {\n data.push({metricName: gm.name, group: selId, value: gm.values[gid]});\n }\n }\n }\n // console.log(data);\n return Plot.plot({\n height: 120 * metrics.length,\n width: 1000,\n grid: true,\n facet: {data: data, x: \"group\", y: \"metricName\", marginRight: 100},\n marks: [\n Plot.frame(),\n Plot.rectX(data, Plot.binY({x: \"count\"}, {y: \"value\", fill: \"#888\"})),\n Plot.ruleX([0])\n ]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"chartCompareMetricsTest = compareMetricSummary(\n [dataset.graphs.filter(g => dataset.labels.trueLabels[g.id] === 1).map(g => g.id), \n dataset.graphs.filter(g => dataset.labels.trueLabels[g.id] === 0).map(g => g.id)], \n graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"chartCompareMetricsTest2 = compareMetricSummary(\n [dataset.graphs.filter(g => dataset.labels.trueLabels[g.id] === 0 && dataset.labels.predLabels[g.id] === 1).map(g => g.id), \n dataset.graphs.filter(g => dataset.labels.trueLabels[g.id] === 0 && dataset.labels.predLabels[g.id] === 0).map(g => g.id)], \n graphMetrics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"### Only show one graph","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"// viewof pickGraphId = Inputs.select([...Array(dataset.numGraphs).keys()].map(i => `${i} pred: ${dataset.labels.predLabels[i]} true: ${dataset.labels.trueLabels[i]}`), {label: 'pick a graph', value: '0'})\nviewof pickGraphId = Inputs.select([...Array(dataset.numGraphs).keys()], {label: 'pick a graph', value: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"linksOneGraph = dataset.graphs[pickGraphId].edges.map(eid => dataset.links[eid]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"coordsOneGraph = {\n const g = dataset.graphs[pickGraphId];\n console.log(g)\n return computeForceLayout(g.nodes, linksOneGraph, width, height);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"reCoordsOneGraph = rescaleCoords(coordsOneGraph, width, height);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"// chartOneGraph = renderGraph(reCoordsOneGraph, linksOneGraph, width, height, dataset.labels.nodeLabels)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"chartOneGraph = ForceGraph(\n {nodes: dataset.graphs[pickGraphId].nodes.map(x => ({id: x})), links: linksOneGraph},\n {\n nodeId: d => d.id,\n nodeGroup: d => dataset.labels.nodeLabels[d.id],\n nodeTitle: d => nodeLabelMapping[dataset.labels.nodeLabels[d.id]],\n width: 300,\n height: 300,\n color: d3.schemeCategory10,\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"layers = [{cx: 250, cy: 250, r0: 0, r1: 100}, {cx: 250, cy: 250, r0: 120, r1: 250}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"selectedNodes = new Set([].concat(...selectionDR.sel))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"subgraphDrCoords = drCoords.filter(c => selectedNodes.has(c.id));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"selectedCoords = rescaleCoordsCircular(subgraphDrCoords, layers[0].cx, layers[0].cy, layers[0].r1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"neighborNodes = Array.from(new Set([].concat(...selNei.topo))).filter(id => !selectedNodes.has(id))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"subgraphNodes = new Set([].concat(...selectionDR.sel, ...selNei.topo))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"subgraph = getSubgraph(subgraphNodes, edgeDict)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"neighborAvrDist = {\n const sel = [...selectedNodes];\n const n = sel.length;\n const emb = dataset.emb;\n const d = [];\n for (let neighId of neighborNodes) {\n let sum = 0; \n for (let selectedId of sel) {\n sum += getCosineDistance(emb[neighId], emb[selectedId]);\n }\n d.push(sum / n);\n }\n return d;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"circularChart = {\n const allCoords = new Array(dataset.numNodes).fill(0);\n for (let s of selectedCoords) {\n allCoords[s.id] = s;\n }\n for (let n of neighborCoords) {\n allCoords[n.id] = n;\n }\n //console.log(subgraph);\n return renderCircularLayout(allCoords, subgraph.edges, layers, width, height, dataset.labels.nodeLabels, subgraph.nodes);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"### Imports and layout parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"width = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"nodeLabelMapping = [\"C\", \"N\", \"O\", \"F\", \"I\", \"Cl\", \"Br\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"import {rescaleCoords, filterEdgeAndComputeDict, computeNeighborMasks, rescaleCoordsCircular, getCosineDistance} from \"@zipengliu/graph-utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {renderGraph, getNeighborsOfSelection, getSubgraph, isNodeHighlight} from \"@zipengliu/one-emb\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"UMAP = import(\"https://cdn.skypack.dev/umap-js@1.3.3\").then((d) => d.UMAP)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"import {ForceGraph} from \"@d3/force-directed-graph\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"