3f:null 40:["$","title",null,{"children":"Exploring multi graph results | Luvoy | Observable"}] 46:T572,fetchData = async function(path) { const emb = await fetchCsvData(path + 'node-embeddings.csv'); const predRes = await d3.json(path + 'prediction-results.json'); console.log('predRes:', predRes) const graphData = await d3.json(path + 'graph.json'); // const emb = await fetchCsvData(FileAttachment("node-embeddings.csv")); // const predRes = await d3.json(FileAttachment("prediction-results.json")); // const graphData = await d3.json(FileAttachment("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: []}; }47:Td93,function renderMultiGraphs(graphs, coords, edges, graphWH, graphMetrics=[]) { const n = graphs.length; const width = 880; const margin = 30, 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") } const edgesEl = graphsSVG.append("g") .selectAll("line") .data(d => d.edges) .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-width", "1px"); 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(), {}) }48: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}); }49: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; } }4a: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(), {}); }4b:T11d6,function renderGraph(coords, links, width, height, labels, calcNN=false, colorBy='true label', subgraph=null, nodesToHighlight={}) { const margin = 10, radius = 3; const colors = d3.schemeCategory10; const hasHighlight = Object.keys(nodesToHighlight).length > 0; const ll = Array.isArray(labels)? labels: (colorBy === "true label"? labels.trueLabels: labels.predLabels); let renderCoords = coords, renderLinks = links; if (subgraph) { // only show nodes in the subgraph renderCoords = coords.filter((c => subgraph.nodes.has(c.id))).map(c => ({...c})); renderLinks = subgraph.edges; } // console.log(renderCoords.map(c => ll[c.id])); 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 edges = g.append("g") .selectAll("line") .data(renderLinks) .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("opacity", hasHighlight? 0.5: 1.0) .style("stroke-width", "1px"); const nodes = g.append("g") .selectAll("circle") .data(renderCoords) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", radius) .style("fill", (d, i) => colors[ll[d.id]]) .style("opacity", (d, i) => !hasHighlight || nodesToHighlight[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] ]); // TODO do not clear the selection if the color schemes are changed var sel = []; var nn = []; var selDict = {}; const quadtree = d3.quadtree() .extent([[-margin, -margin], [width + margin, height + margin]]) .x(d => d.x) .y(d => d.y) .addAll(renderCoords); // console.log(quadtree); const gBrush = g.append("g").attr("class", "gBrush"); gBrush.call(brush); // clear previous brush styles function brushStart() { // if no selection already exists // if (d3.brushSelection(this)[0][0] == d3.brushSelection(this)[1][0]) { // nodes.style("stroke", "none"); // //sel.length = 0; // } } // 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); // const t = []; // nodes.each((d, i) => { // if ( // d.x >= ext[0][0] - radius && // d.x <= ext[1][0] + radius && // d.y >= ext[0][1] - radius && // d.y <= ext[1][1] + radius && // (!hasHighlight || nodesToHighlight[i]) // ) { // t.push(i); // selDict[i] = true; // } // }); // if (t.length > 0) { // nodes.style("stroke", (d, i) => selDict[i]? "black": "none"); // sel.push(t); // } } 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]]) { console.log("called search!", 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 || nodesToHighlight[d.id])) { selTemp.push(d.id); selDict[d.id] = true; } else { if (calcNN) nnTemp.push(d.id); } } while ((node = node.next)); } return x1 >= x3 || y1 >= y3 || x2 < x0 || y2 < y0; }); if (selTemp.length > 0) { console.log('in search, selTemp:', selTemp) nodes.style("stroke", (d, i) => selDict[i]? "black": "none"); sel.push(selTemp); if (calcNN) nn.push(nnTemp); } } function clearSelections() { console.log("called clear"); nodes.style("stroke", "none"); brush.clear(gBrush); sel.length = 0; nn.length = 0; selDict = {}; } return Object.assign(svg.node(), {value: {sel, nn}, clearSelections}); }4c:[{"id":"836abffef2dd43805a1a3f31608117ded9623025a0b29bb71006cb968863bd5db7768a8a45ed1e69e0d7291553d1d424fc8945eb0e3f89e22adb5964b0e0fedf","href":"https://static.observableusercontent.com/files/836abffef2dd43805a1a3f31608117ded9623025a0b29bb71006cb968863bd5db7768a8a45ed1e69e0d7291553d1d424fc8945eb0e3f89e22adb5964b0e0fedf","name":"prediction-results.json","type":"application/json","lastModified":1676524759185.137,"size":504661},{"id":"4216745249f6592c0f1a7689c1cc08ad6968e293115346f3f4c7a71bb346c2898bf0d16469d56644cd73720026315f13dec5581b6c2f1366b01b396df4ac38fa","href":"https://static.observableusercontent.com/files/4216745249f6592c0f1a7689c1cc08ad6968e293115346f3f4c7a71bb346c2898bf0d16469d56644cd73720026315f13dec5581b6c2f1366b01b396df4ac38fa","name":"graph.json","type":"application/json","lastModified":1676524759899.612,"size":592230},{"id":"3b99156f9707dde4f847e977acc97b72991cd8303ef3a7995acb1991612b39d70afea25462540c7fec9048c98b86c11a83dd3a3cdfc3ed36c240c2c660301e6c","href":"https://static.observableusercontent.com/files/3b99156f9707dde4f847e977acc97b72991cd8303ef3a7995acb1991612b39d70afea25462540c7fec9048c98b86c11a83dd3a3cdfc3ed36c240c2c660301e6c","name":"node-embeddings.csv","type":"text/csv","lastModified":1676524769737.635,"size":2398169}] 44:{"id":"f115e80e53213e25","slug":"exploring-multi-graph-results","title":"Exploring multi graph results","thumbnail":"9a75c2c5fb460ff0ce348f3530582e8dfcce574b630a3e39a5ef546a042bc5f7","access_level":"public","create_time":"$D2023-02-16T05:18:39.446Z","update_time":"$D2023-08-06T07:56:29.022Z","view_time":null,"first_public_time":"$D2023-02-16T05:18:39.446Z","has_unpublished_edits":null,"fork":{"id":"730fdc9b7675fba9","slug":null,"title":"Exploring multi graph results","owner":{"id":"412485c08e0f3413","login":"zipengliu","name":"Zipeng Liu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7571c48497ac6e2f","login":"luvoy","name":"Luvoy","avatar_url":"https://avatars-next.observableusercontent.com/60944aee68bca793fee3137f720bb9737eeb2817cf7feb1e66cf91c9dc015987","tier":"starter_2024","bio":"","following":false},"version":528,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c23375506cfabab8","login":"luvoy","name":"Luvoy","avatar_url":"https://avatars-next.observableusercontent.com/60944aee68bca793fee3137f720bb9737eeb2817cf7feb1e66cf91c9dc015987","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"c23375506cfabab8","login":"luvoy","name":"Luvoy","avatar_url":"https://avatars-next.observableusercontent.com/60944aee68bca793fee3137f720bb9737eeb2817cf7feb1e66cf91c9dc015987","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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:9000/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":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":11,"value":"$46","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":500,"value":"dataset","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 console.log('a 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 < 500; 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":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":230,"value":"$47","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":"$48","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.predLabels)","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":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.neighborMasks[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":384,"value":"getComputeNumberOfElements(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":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":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(\"Number Of NO2\", computeNumberOfNO2),\n computeGraphMetrics(\"Number Of C\", getComputeNumberOfElements(0)),\n computeGraphMetrics(\"Number Of F\", getComputeNumberOfElements(3)),\n computeGraphMetrics(\"Number Of I\", getComputeNumberOfElements(4)),\n computeGraphMetrics(\"Number Of Cl\", getComputeNumberOfElements(5)),\n computeGraphMetrics(\"Number Of Br\", getComputeNumberOfElements(6)),\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 return Plot.plot({\n height: 150,\n grid: true,\n facet: {data: data, x: \"metricName\"},\n marks: [\n Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"value\", thresholds: 10, 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":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":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$4a","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 \"@luvoy/graph-utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {\n // renderGraph,\n getNeighborsOfSelection, getSubgraph, isNodeHighlight} from \"@luvoy/exploring-one-embedding-result\"","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":"$W4c","stdlib":"1"}} 45:"$44:body"