3f:null 40:["$","title",null,{"children":"Exploring one embedding result | Zipeng Liu | Observable"}] 46:T1161,function renderGraph(coords, links, width, height, labels, calcNN=false, subgraph=null) { 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) { 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}); }47:T800,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 = 450, cy = 450; // const s = d3.scaleLinear().domain(d3.extent(nearestSelectedNodes.map(item => item.d))).range([layers[1].r0, layers[1].r1]); // const selToCenter = selectedCoords.map(c => Math.sqrt(Math.pow(c.x - cx, 2) + Math.pow(c.y - cy, 2))); // const coords = nearestSelectedNodes.map( // (selected, i) => ({id: neighborNodes[i], // x: s(selected.d) / selToCenter[selected.index] * (selectedCoords[selected.index].x - cx) + cx, // y: s(selected.d) / selToCenter[selected.index] * (selectedCoords[selected.index].y - cy) + cy})); // d3.forceSimulation(coords) // .force("collide", d3.forceCollide().radius(4).iterations(3)) // 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]), d3.scaleLinear().domain(d3.extent(neighborAvrDist)).range([layers[2].r0, layers[2].r1])]; const coords = neighborAvrDist.map((d, i) => ({id: neighborNodes[i]})) const sim = d3.forceSimulation(coords) .force('link', d3.forceLink(remapEdges).distance(500)) .force('radial', d3.forceRadial().radius((d, i) => s[neighHopIndex[d.id]-1](neighborAvrDist[i])).x(cx).y(cy).strength(1)) .force("collide", d3.forceCollide().radius(4)) .stop() // .tick(1000); // return coords; for (let i = 0; i < 100; i++) { sim.tick(); yield coords; } }48:Taed,function renderCircularLayout(coords, edges, layers, width, height, labels, includeNodeIds) { const margin = 10, nodeR0 = 2, nodeR1 = 4; const colors = d3.schemeCategory10; const layerColors = ['#111', '#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("fill", "none") .style("stroke", "black") // .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") .style("opacity", 0.3); 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.predLabels[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(), {}); }49:[] 44:{"id":"7836d709ed123695","slug":"one-emb","title":"Exploring one embedding result","thumbnail":"9caab88b4fdfa6d5188c435ea95ce8c0d778f42dd8dc91b5e650e422a055c573","access_level":"public","create_time":"$D2022-11-23T07:48:24.384Z","update_time":"$D2023-02-22T12:27:49.827Z","view_time":null,"first_public_time":"$D2022-12-11T16:38:55.971Z","has_unpublished_edits":null,"fork":{"id":"e48bf34c52588bc9","slug":"plot-scatterplot","title":"Plot Scatterplot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"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":884,"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 one embedding result","cells":[{"id":0,"value":"# Exploring one embedding result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"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":131,"value":"datasetPaths = [\n //'cora-gcn-epoch-150/',\n 'cora-gat/'\n].map(p => baseUrl + p)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"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":157,"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":167,"value":"fetchData = async function(path) {\n const emb = await fetchCsvData(path + 'node-embeddings.csv');\n // const trueLabels = await fetchLabelData(path + 'true-labels.txt');\n // const predLabels = await fetchLabelData(path + 'pred-labels.txt');\n const labels = await d3.json(path + 'prediction-results.json');\n const graphData = await d3.json(path + 'graph.json');\n const initLayout = await d3.json(path + 'initial-layout.json');\n initLayout.coords = initLayout.coords.map(c => ({x: +c.x, y: +c.y}));\n return {emb, labels, links: graphData.edges, nodes: graphData.nodes, initLayout};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"rawDatasets = await Promise.all(datasetPaths.map(u => fetchData(u)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"import {computeDistances} 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":104,"value":"function computeDiffDistances(a, b) {\n // TODO: Math.abs()?\n return a.map((da, i) => [da[0] - b[i][0], da[1], da[2]]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"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":138,"value":"umapResults1 = new UMAP({\n nComponents: 2,\n minDist: 0.1,\n nNeighbors: 15\n}).fit(rawDatasets[0].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":140,"value":"Plot.plot({\n color: {\n type: \"ordinal\",\n scheme: \"category10\",\n legend: true\n },\n marks: [\n Plot.dot(umapResults1, {x: \"x\", y: \"y\", fill: rawDatasets[0].labels.trueLabels})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"import {rescaleCoords, filterEdgeAndComputeDict, computeNeighborMasks} 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":469,"value":"edgeInfo = filterEdgeAndComputeDict(rawDatasets[0].nodes.length, rawDatasets[0].links)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"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":478,"value":"neiInfo = computeNeighborMasks(rawDatasets[0].nodes.length, edgeDict, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"newCoords = rescaleCoords(rawDatasets[0].initLayout.coords, 500, 500)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"chart = renderGraph(newCoords, rawDatasets[0].links, 500, 500, rawDatasets[0].labels, false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"Swatches(d3.scaleOrdinal([...Array(numClasses).keys()], d3.schemeCategory10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"viewof colorBy = Inputs.radio([\"predictive label\", \"true label\"], {label: \"Color nodes by\", value: \"true label\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"viewof clearOriginal = Inputs.button(\"Clear selection\", {value: null, reduce: chart.clearSelections })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"selectionOriginal = Generators.input(chart)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"drCoords = rescaleCoords(umapResults1, 500, 500)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"chart2 = renderGraph(drCoords, rawDatasets[0].links, 500,500, rawDatasets[0].labels, true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"viewof clearDR = Inputs.button(\"Clear selection\", {value: null, reduce: chart2.clearSelections })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"selectionDR = Generators.input(chart2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"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":375,"value":"numClasses = rawDatasets[0].labels.numNodeClasses","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"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":575,"value":"### Show selected nodes and neighbors only in DR mapping","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":499,"value":"// Draw a subgraph of topo neighbors of selected nodes using DR coords \nsubgraphNodes = 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":506,"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":509,"value":"chartSubgraph1 = renderGraph(drCoords, rawDatasets[0].links, 500, 500, rawDatasets[0].labels, true, subgraph) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"viewof clearSubgraph1 = Inputs.button(\"Clear selection\", {value: null, reduce: chartSubgraph1.clearSelections })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"selectionSubgraph1 = Generators.input(chartSubgraph1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"### Show a scatterplot of selected and neighbors: topo distance vs. latent distances (both are dim reduced)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":587,"value":"import {getNeighborDistance} from \"@zipengliu/graph-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"latentCoords = new UMAP({\n nComponents: 1,\n minDist: 0.1,\n nNeighbors: 15\n}).fit(rawDatasets[0].emb.filter((e, i) => subgraphNodes.has(i)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"subgraphNodesSorted = Array.from(subgraphNodes).sort((a, b) => a-b);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"topoDistMat = {\n let nodes = subgraphNodesSorted;\n let n = nodes.length;\n const masks = neiInfo.neighborMasks;\n const d = new Array(n).fill(0).map(() => new Array(n).fill(0))\n for (let i = 0; i < n - 1; i++) {\n for (let j = i + 1; j < n; j++) {\n const t = getNeighborDistance(masks[nodes[i]], masks[nodes[j]]);\n d[i][j] = t;\n d[j][i] = t;\n }\n }\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"topoCoords = new UMAP({\n nComponents: 1,\n minDist: 0.1,\n nNeighbors: 15\n}).fit(topoDistMat);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"topoLatentCoords = {\n const coords = rescaleCoords(latentCoords.map((x, i) => ({x: x[0], y: topoCoords[i][0]})), 500, 500);\n // Fix the ids\n return coords.map((c, i) => ({...c, id: subgraphNodesSorted[i]}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"tobeFixedCoords = {\n const coords = drCoords.slice();\n for (let i = 0; i < subgraphNodesSorted.length; i++) {\n coords[subgraphNodesSorted[i]] = topoLatentCoords[i]; \n }\n return coords;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"chartSubgraph2 = renderGraph(tobeFixedCoords, rawDatasets[0].links, 500, 500, rawDatasets[0].labels, true, subgraph)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"// Bug: color scheme not consistent\nPlot.plot({\n color: {\n type: \"ordinal\",\n scheme: \"category10\",\n legend: true\n },\n marks: [\n Plot.dot(topoLatentCoords, {x: \"x\", y: \"y\", \n fill: rawDatasets[0].labels.trueLabels.filter((l, i) => subgraphNodes.has(i))})\n ],\n x: {label: 'latent distance (DR)'},\n y: {label: 'topological distance (DR)'}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"### Circular layout for selected and neighbors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":631,"value":"import {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":700,"value":"// Size and position of each layer in the circular layout\nlayers = [{cx: 450, cy: 450, r0: 0, r1: 100}, {cx: 450, cy: 450, r0: 120, r1: 250}, {cx: 450, cy: 450, r0: 270, r1: 450}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"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":634,"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":636,"value":"selectedCoords = {\n // Reuse the original DR results\n // const filteredCoords = drCoords.filter(c => selectedNodes.has(c.id)).map(c => ({...c}));\n // re-run DR only for the selected nodes\n const rerunCoords = new UMAP({\n nComponents: 2,\n minDist: 0.1,\n nNeighbors: 15\n }).fit(rawDatasets[0].emb.filter((e, i) => selectedNodes.has(i)));\n // fill in the node id\n const selArr = [].concat(...selectionDR.sel);\n const filteredCoords = rerunCoords.map((c, i) => ({x: c[0], y: c[1], id: selArr[i]}));\n \n // const sim = d3.forceSimulation(filteredCoords)\n // .force(\"collide\", d3.forceCollide().radius(4).strength(0.2))\n // .tick(10);\n const rescaleCoords = rescaleCoordsCircular(filteredCoords, layers[0].cx, layers[0].cy, layers[0].r1);\n return rescaleCoords;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"// Find all the neighbors, excluding the selected nodes\nneighborNodes = 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":852,"value":"// Determine the hop index for each neighbor\nneighHopIndex = {\n // TODO this only works for one selection\n const tmpNeighByHops = selNei.neighByHops[0];\n const h = {};\n for (let hid = 0; hid < tmpNeighByHops.length; hid++) {\n console.log(hid);\n for (let nid of tmpNeighByHops[hid]) {\n if (!h.hasOwnProperty(nid)) {\n h[nid] = hid + 1;\n }\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":671,"value":"nearestSelectedNodes = {\n const sel = [...selectedNodes];\n const emb = rawDatasets[0].emb;\n const ns = [];\n for (let neighId of neighborNodes) {\n let minD = 1e15, minId = -1, minIndex = -1, j = 0;\n for (let selectedId of sel) {\n const tmp = getCosineDistance(emb[neighId], emb[selectedId]);\n if (tmp < minD) {\n minD = tmp;\n minId = selectedId;\n minIndex = j;\n }\n j++;\n }\n ns.push({d: minD, id: minId, index: minIndex});\n }\n return ns;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"neighborAvrDist = {\n const sel = [...selectedNodes];\n const n = sel.length;\n const emb = rawDatasets[0].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":667,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"circularChart = {\n const allCoords = new Array(rawDatasets[0].nodes.length).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.nodes.size);\n return renderCircularLayout(allCoords, subgraph.edges, layers, 900, 900, rawDatasets[0].labels, subgraph.nodes);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":383,"value":"function isNodeHighlight(p, t, selCond) {\n const matchClass = (selCond.true === 'all' || selCond.true === t) && (selCond.pred === 'all' || selCond.pred === p);\n if (selCond.correct === 'all') {\n return matchClass;\n } else if (selCond.correct == 'correct') {\n return matchClass && p === t;\n } else {\n return matchClass && p !== t;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"nodesToHighlight = ((dataset) => {\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})(rawDatasets[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"// Get the topological and latent space neighbors of selected nodes\n// Note that the neighbors might be duplicated\n// Caveat: topo neighbors could include selected nodes themselves, but latent neighbors don't. Need fix?\nfunction getNeighborsOfSelection(selections) {\n const selNeiTopo = selections.sel.map((s, i) => {\n let m = bs(0);\n for (let nid of s) {\n m = m.or(neiInfo.neighborMasks[nid])\n }\n return m.toArray()\n });\n const hops = 2;\n const neighByHops = selections.sel.map((s, i) => {\n let neighs = new Array(hops).fill(0).map(a => bs(0));\n for (let nid of s) {\n for (let h = 0; h < hops; h++) {\n neighs[h] = neighs[h].or(neiInfo.neighborMasksByHop[h][nid])\n }\n }\n return neighs.map(n => n.toArray())\n });\n return {topo: selNeiTopo, lat: selections.nn, neighByHops};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"// Compute a subgraph of specified nodes, return a list of nodes and edges\n// nodes is a set\nfunction getSubgraph(nodes, edgeDict) {\n const edges = [];\n for (let sid of nodes) {\n for (let e of edgeDict[sid]) {\n if (nodes.has(e.nid)) {\n edges.push({source: sid, target: e.nid, eid: e.eid});\n }\n }\n }\n return {nodes, edges};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"Object.keys(nodesToHighlight)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"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":428,"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"},{"id":485,"value":"bs = require('http://localhost:3000/bitset.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"