31:Tde3,function getVegaView(dataToPlot, options) { const { interactive, colorScheme, color, shape, x, y, size, id, tooltip, colorDomain, title, shapeDomain } = options; // Make it depend on clustering clusters; let colorField; if (computeClusters) { colorField = vl .color() .if("datum.cluster == undefined", vl.value("#ccc7")) .fieldN(color) .scale({ domain: colorDomain, scheme: colorScheme || options.colorSchemeQuantitative }); } else { colorField = vl .color() .if("datum.cluster == undefined", vl.value("#ccc7")) .fieldQ(color) .scale({ domain: colorDomain, scheme: colorScheme || options.colorSchemeQuantitative }); } let base = vl .markPoint({ opacity: 0.6, filled: true }) .encode(vl.x().fieldQ(x).axis(null), vl.y().fieldQ(y).axis(null)) .data(dataToPlot.filter((d) => d.type !== "keyword")); let baseWithParams; if (color) base = base.encode(colorField); if (size) base = base.encode( vl.size().fieldQ(size).scale({ range: options.sizeRange }), vl.order().fieldQ(size) ); if (shape) { let shapeEncoding = vl.shape().fieldN(shape); if (shapeDomain) { shapeEncoding = shapeEncoding.scale({ domain: shapeDomain }); } base = base.encode(shapeEncoding); } const boxes = vl .markRect({ filled: false }) .encode( vl.x().fieldQ("bbox.minX"), vl.y().fieldQ("bbox.minY"), vl.x2().fieldQ("bbox.maxX"), vl.y2().fieldQ("bbox.maxY") ) // .width(Math.max(320, width - 100)) // .height(500) .data(hdbscanClusters); // console.log("chart", chart.toObject()); const keywords = vl .markText({ fontSize: 8, tooltip: true, opacity: 0.7 }) .encode(vl.x().fieldQ("x"), vl.y().fieldQ("y"), vl.text().fieldN("title")) .data(dataToPlot.filter((d) => d.type === "keyword")); const events = "mouseover,pointerover,touchmove,click"; if (interactive) { // console.log("vega interactive!", interactive); const hover = vl .selectSingle("hover") .nearest(true) .on(events) .clear("none") .init({ x: [], y: [] }); const drag = vl.selectInterval("drag"); const click = vl .selectPoint("click") .fields([id]) .nearest(true) .on("click") .init({ id: [] }); const shiftClick = vl .selectPoint("shiftClick") .fields([id]) .on("click[event.altKey]") .toggle("false") .init({ id: [] }); baseWithParams = base.params(click, hover, drag, shiftClick).encode( vl .stroke() .condition({ param: "click", value: "black", empty: false }) // .condition({param: "hover", value: "grey", empty: false}) .value(null), // vl.size().if(vl.or(hover, drag), vl.value(80)).value(50), vl.tooltip(tooltip) ); if (color) baseWithParams = baseWithParams.encode( vl .color() // .if(computeClusters ? "!datum.cluster": "false", vl.value("grey")) .if(vl.or(hover, drag), colorField) .value("grey") ); } let chart = vl.layer( ...[ baseWithParams, clusteringSpace === "Reduced Space" && clusteringType === "HDBScan" ? boxes : null, includeKeywords ? keywords : null ].filter((d) => d) ); // console.log("chart", dataToPlot, chart.toObject()); return chart.title(title).width(options.width).height(options.height); }32:T78d,function vegaSpecWrapper(spec) { // const edges = vl // .markLine({ filled: false }) // .encode( // vl.x().fieldQ("edge[0][0]"), // vl.y().fieldQ("edge[0][1]"), // vl.x2().fieldQ("edge[1][0]"), // vl.y2().fieldQ("edge[1][1]") // ) // .width(600) // .height(400) // .data(hdbscanClusters); const boxes = vl .markRect({ filled: false }) .encode( vl.x().fieldQ("bbox.minX"), vl.y().fieldQ("bbox.minY"), vl.x2().fieldQ("bbox.maxX"), vl.y2().fieldQ("bbox.maxY") ) .width(Math.max(320, width - 100)) .height(500) .data(hdbscanClusters); // const mapClusters = new Map( // hdbscanClusters.map((d, c) => d.opt.map((e) => [e, c])).flat() // ); // const hello = vl // .markText() // .encode( // vl.text().fieldN("text"), // // vl.x().fieldQ("x"), // // vl.y().fieldQ("y") // ) // .data([{ text: "Hello", type: "text", x: 0, y: 0 }]); // const points = vl // .markPoint() // .encode( // vl.x().fieldQ("x"), // vl.y().fieldQ("y"), // vl.shape().fieldN("type"), // vl.size().fieldQ("score"), // vl.tooltip(["title", "authors", "abstract", "id", "score", "cluster"]), // vl // .color() // .if("datum.cluster == null", vl.value("#ccc7")) // .fieldQ("cluster") // .scale({ scheme: "turbo" }) // ) // .data(dataToPlot.map((d) => ({ ...d, cluster: mapClusters.get(d.id) }))); const keywords = spec .markText() .encode( vl.x().fieldQ("x").axis(null), vl.y().fieldQ("y").axis(null), vl.text().fieldN("title") ) .data(dataToPlot.filter((d) => d.type === "keyword")); const chart = vl.layer( [ // computeClusters && clusteringType === "HDBScan" && boxes, spec, keywords, ].filter((d) => d) ); console.log("chart", chart.toObject()); return chart; }33:[{"id":"7734fd3f2bc8387597e3de80d26f4137647441e524d97dc009dbb30f3925371dc8a3ce09bf985576da25e42e161f1dda13a2410ef2090f0a3a0407660b513aff","href":"https://static.observableusercontent.com/files/7734fd3f2bc8387597e3de80d26f4137647441e524d97dc009dbb30f3925371dc8a3ce09bf985576da25e42e161f1dda13a2410ef2090f0a3a0407660b513aff","name":"visKeywords@1.csv","type":"text/csv","lastModified":1731689622061.503,"size":21242},{"id":"700d84f5ae8f894a8ca70fe2ce9889910cdbeab64116f68e38b37fbb87e1438ed5401923729721576390996f50cead1d895622269669af3fb65f9abf83636146","href":"https://static.observableusercontent.com/files/700d84f5ae8f894a8ca70fe2ce9889910cdbeab64116f68e38b37fbb87e1438ed5401923729721576390996f50cead1d895622269669af3fb65f9abf83636146","name":"CSCW_2024_program.json","type":"application/json","lastModified":1731696823018.211,"size":1730491},{"id":"d33df81145026f7a32c312b0ff7a25eeba2e4604194e88b938470998d6597cceb333da297c732ccbe0a3507f294268b8d3110dd8512477b6b20a2e5ce077a2f5","href":"https://static.observableusercontent.com/files/d33df81145026f7a32c312b0ff7a25eeba2e4604194e88b938470998d6597cceb333da297c732ccbe0a3507f294268b8d3110dd8512477b6b20a2e5ce077a2f5","name":"CSCW_2024_embeddings.json","type":"application/json","lastModified":1731698339082.848,"size":4662387},{"id":"8de4f741245720f1d2642475b4429b577b9b66b667673a12c0ad3fdefdb2057dd713c5ec18034095294be61a3e4d06c0507bfd1e9f15d126502c7eaa75c23373","href":"https://static.observableusercontent.com/files/8de4f741245720f1d2642475b4429b577b9b66b667673a12c0ad3fdefdb2057dd713c5ec18034095294be61a3e4d06c0507bfd1e9f15d126502c7eaa75c23373","name":"CSCW_2024_umap.csv","type":"text/csv","lastModified":1731698356539.609,"size":20963}] 2f:{"title":"CSCW 2024 Papers","cells":[{"id":0,"value":"# CSCW 2024 Papers\n\nPlease try it on https://johnguerra.co/viz/cscw2024Papers/ for a better layout.\n\nCSCW2024 papers similarity using sentence embeddings via [HuggingFace Transformer.js](https://observablehq.com/@huggingface/sentence-embeddings-and-dimension-reduction-in-the-browse) and dimensionality reduction methods using [Druid.js](https://observablehq.com/@fil/druidjs-worker).\n\nYou can filter for specific paper tracks and, interact with the scatterplot to explore the different papers.\n","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"viewof facetedSelectedPhase1 = conditionalShow(\n FacetedSearch(papers, {\n attribs: [\n // \"sessionName\",\n \"title\",\n \"abstract\",\n \"authorNames\",\n \"keywords\",\n \"type\",\n \"id\",\n // \"typeId\"\n ]\n }),\n {\n label: \"Faceted Search\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3035,"value":"### Paper Type","pinned":false,"hidden":false,"mode":"md"},{"id":1782,"value":"viewof typesSelected = \n// PersistInput(\n// \"tracks\",\n scentedCheckbox(facetedSelectedPhase1, (d) => d.type, {\n \n cutoff: 5,\n showTotal: false\n })\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":3319,"value":"viewof authorsSelected = \n// PersistInput(\n// \"authors\",\n Inputs.bind(multiAutoSelect(authors, { label: \"Authors\", value: initialAuthors }), viewof initialAuthors)\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":3479,"value":"viewof affiliationsSelected = // PersistInput(\"affiliations\",\nInputs.bind(\n multiAutoSelect(affiliations, {\n label: \"Affiliations\",\n value: initialAffiliations\n }),\n viewof initialAffiliations\n)\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1429,"value":"## Semantic Search","pinned":false,"hidden":false,"mode":"md"},{"id":1723,"value":"viewof useCachedDR = Inputs.toggle({ label: \"Use cached UMAP\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"viewof druid_method2 = !useCachedDR \n ? viewof druid_method\n : Object.assign(\n htl.html`

Disable Cached UMAP to use

`,\n { value: \"UMAP\" }\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"viewof druid_params2 = !useCachedDR\n ? viewof druid_params\n : Object.assign(htl.html`

Disable Cached UMAP to use

`, {\n value: {}\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"viewof colorBy = Inputs.select(\n // attrs,\n [\n \"id\",\n \"typeId\",\n // \"title\",\n // \"addons\",\n // \"recognitionIds\",\n // \"isBreak\",\n // \"importedId\",\n // \"source\",\n // \"trackId\",\n // \"tags\",\n // \"keywords\",\n // \"sessionIds\",\n // \"eventIds\",\n // \"abstract\",\n // \"authors\",\n // \"sessions\",\n \"sessionName\",\n \"sessionNameWord\",\n \"type\",\n // \"authorNames\",\n // \"url\",\n \"score\",\n \"cluster\",\n ],\n { label: \"Color by\", value: \"score\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1924,"value":"viewof colorScheme = Inputs.select(\n [\n \"brownbluegreen\",\n \"blueorange\",\n \"blues\", \n \"purples\",\n \"redyellowblue\", \n \"spectral\",\n \"turbo\",\n \"cividis\",\n \"rainbow\",\n \"category20\",\n \"category10\",\n \"tableau20\",\n \n ],\n { label: \"Color scheme\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"viewof interactive = Inputs.toggle({\n // label: htl.html`Make chart interactive.
Disable to speed up animation`,\n label: \"Interactive chart\",\n value: true,\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2750,"value":"viewof liveSearch = Inputs.toggle({label: \"Live Search\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4268,"value":"viewof computeClusters = Inputs.toggle({\n label:\n \"Compute Clusters (WIP)\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5603,"value":"clusteringOptions = htl.html`${\n computeClusters\n ? clusteringType === \"Kmeans\"\n ? viewof maxClusters\n : htl.html`${viewof papersPerClusterRange} ${viewof maxClusteringDistance}`\n : \"\"\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5829,"value":"viewof clusteringSpace = Inputs.select([\"Reduced Space\", \"Embeddings\"], {\n label: \"Clustering Space\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5562,"value":"viewof clusteringType = Inputs.select([\"HDBScan\", \"Kmeans\"], {label: \"HDBScanJS Type\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2647,"value":"viewof restartDR = !useCachedDR\n ? Inputs.button(\"Restart Dimensionality Reduction\")\n : Object.assign(htl.html`

Disable Cached UMAP to use

`, { value: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6740,"value":"viewof dimensionality = Inputs.select([2,1], {label: \"Dimensionality\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1298,"value":"viewof query = PersistInput(\n \"query\",\n Inputs.text({\n label: htl.html`Similarity Search`,\n value: \"Virtual Reality\",\n width: 600,\n submit: !liveSearch\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4042,"value":"viewof drSelection = {\n console.log(\n \"🎨 Redraw\",\n dataToPlotWithClusters.length,\n clusteringType,\n clusteringSpace\n );\n hdbscanClusters;\n return BrushableScatterPlot(dataToPlotWithClusters, {\n color: colorBy,\n size: \"score\",\n shape: \"type\",\n shapeDomain: typesRanked,\n interactive,\n colorScheme,\n tooltip: [\"title\", \"authorNames\", \"abstract\", \"id\", \"cluster\"],\n width: Math.max(320, width - 150),\n height: 500\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4912,"value":"downloadPlottedData = DOM.download(new Blob(\n [d3.csvFormat(dataToPlot)], \n {type: \"application/csv\"}\n ), \"plottedData.csv\", \"Download Plotted Data\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"selectedPapers = htl.html` \n

CSCW 2024 artifacts selected

\n ${\n paperClicked.length\n ? htl.html`Clicked:${paperClicked.map(renderPaper)}`\n : \"\"\n }\n

\n \n ${papersHighlighted\n .sort((a, b) => b.score - a.score)\n .slice(0, maxPapers)\n .map(renderPaper)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3625,"value":"viewof minScore = Inputs.range([0, 100], {label: \"Min score\", value: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3619,"value":"toAttend = {\n semanticSearchResults;\n const renderSubgroup = (\n v\n ) => htl.html`

${v[0]} (${\n v[1].length\n })

\n${v[1].map((p) => htl.html`

${p.title} ${(p.score*100).toFixed(2)}%

`)}

`;\n const renderGroup = (d) => htl.html`

${d[0]} (${\n d[1].length\n })

\n${d[1].map(renderSubgroup)}\n

`;\n\n return htl.html`\n

Where to go?

\nFor your query ${query} query, with a min score of ${Inputs.bind(\n htl.html``,\n viewof minScore\n )} you should go to: \n

Rooms to go

\n\n

${roomsToGo.map(renderGroup)}\n

\n\n

Sessions you should attend

\n\n

${sessionsToAttend.map(\n renderGroup\n )}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4018,"value":"## HDBScanJS with hdbscan","pinned":false,"hidden":false,"mode":"md"},{"id":4947,"value":"viewof computeClustersHDBScan = Inputs.bind(\n Inputs.toggle({ label: \"Compute clusters HDBScan\" }),\n viewof computeClusters\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4879,"value":"viewof papersPerClusterRange = interval([0, papers.length], {\n value: [2, 30],\n step: 1,\n label: \"Papers per cluster\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1586,"value":"viewof maxClusters = Inputs.range([1, 20], {\n step: 1,\n value: 6,\n label: \"Number of clusters\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4756,"value":"hdbscanClustersList = htl.html`\n

\n${hdbscanClusters.sort((a,b) => d3.descending(a.opt.length, b.opt.length)).map((c, i) => {\n return htl.html`

Cluster ${i} (${\n c.opt.length\n })

Top Words: ${corpus\n .getTopTermsForDocument(i)\n .slice(0, 7)\n .map((d) => d[0])\n .join(\", \")}

${mapPaperId.get(id)?.title}

`;\n})}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4032,"value":"clusteredTreeViz = Tree(convertTree(hdbScanClusteredTree), {\n height: 400,\n width,\n fit: true,\n r: 1,\n tree: d3.cluster,\n sort: (a,b) => d3.descending(a.data.data.length, b.data.data.length)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3115,"value":"paperClicked = drSelection.clicked","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"papersHighlighted = drSelection.brushed","pinned":true,"hidden":false,"mode":"ojs"},{"id":3602,"value":"sessionsToAttend = {\n // TODO not working until we have dates\n query;\n semanticSearchResults;\n return d3\n .groups(\n navioSelected.filter((d) => d.score > minScore/100),\n // (v) => v.length,\n (d) => d.timestamp.toLocaleDateString(...dateOptions),\n (d) =>\n `${d.timestamp.toLocaleTimeString(...dateOptions)} ${d.roomName} - ${d.sessionName}`\n )\n .sort((a, b) => d3.ascending(a[0], b[0]))\n .map(([g, v]) => [g, v.sort((a, b) => d3.ascending(a[0], b[0]))]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3785,"value":"dateOptions = [\"en-US\", { timeZone: \"utc\" }]","pinned":true,"hidden":false,"mode":"ojs"},{"id":5654,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5499,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":3621,"value":"roomsToGo = {\n // TODO not working until we have dates\n query;\n semanticSearchResults;\n return d3\n .groups(\n navioSelected.filter((d) => d.score > minScore / 100),\n // (v) => v.length,\n (d) => d.timestamp.toLocaleDateString(...dateOptions),\n (d) => `${d.roomName}`\n // (d) => d.title\n )\n .sort((a, b) => d3.ascending(a[0], b[0]))\n .map(([g, v]) => [g, v.sort((a, b) => b[1].length - a[1].length)]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3117,"value":"viewof maxPapers = Inputs.range([0, navioSelected.length], {\n label: \"Papers to show\",\n step: 1,\n value: 20\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3154,"value":"viewof maxPapersSpinner = Inputs.bind(htl.html``, viewof maxPapers)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1327,"value":"Inputs.table(semanticSearchResults, {\n columns: [\"title\", \"score\", \"type\"],\n width: { title: \"70%\" },\n sort: \"score\",\n reverse: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"navioSelected = facetedSelected;\n// viewof navioSelected = conditionalShow(\n// await navio(facetedSelected, { attribWidth: 12 }),\n// {\n// label: \"Filter with Navio\"\n// }\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":6754,"value":"navioSelected","pinned":true,"hidden":false,"mode":"ojs"},{"id":1276,"value":"## Embeddings\n\nHere is a visualization of all the embeddings using navio","pinned":false,"hidden":false,"mode":"md"},{"id":1279,"value":"// navio(embeddings.map(d => d.data), {attribWidth: 2, height: 600})","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"## Compute Embeddings dynamically\n\nYou can compute the embeddings in the browser if you want","pinned":false,"hidden":false,"mode":"md"},{"id":431,"value":"viewof computeEmbeddings = Inputs.toggle({label: \"Compute Embeddings\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"viewof computeEmbeddingsUsing = Inputs.checkbox(attrs, {\n value: [\"title\", \"abstract\"],\n label: \"Compute Embeddings using\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"computeEmbeddings && DOM.download(new Blob(\n [JSON.stringify(embeddings_computed)], \n {type: \"application/json\"}\n ), \"embeddings.json\", \"Download Embeddings\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"viewof restart = computeEmbeddings\n ? html``\n : pleaseEnableComputeEmbeddings()","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"viewof embeddings_computed = {\n if (computeEmbeddings) {\n const before = performance.now();\n restart;\n const values = [];\n const bar = progress({ interval: 50, invalidation });\n yield bar;\n \n let i =0;\n for (let row of sample) {\n \n values.push({id: row.id,\n embedding: await extractor(embeddingAccessor(row), extractorOptions)\n });\n \n await bar.progress(i++, sample.length);\n // console.log(\"i\", i);\n }\n console.log(\"progress completed in\", performance.now() - before);\n bar.resolve(values);\n } else {\n // Not computing embeddgins, return nothing\n yield pleaseEnableComputeEmbeddings();\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"embeddings = {\n if (computeEmbeddings) {\n return embeddings_computed;\n } else {\n return embeddings_cached;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"embeddings_cached = (embeddingsFileSelected === \"Title and Abstract Full + TVCG\"\n ? await FileAttachment(\n \"CSCW_2024_embeddings.json\"\n )\n : // (\n // await FileAttachment(\n // \"2024_10Oct_11_vis24_embeddings_full_tvcg_keywords.json\"\n // ).zip()\n // ).file(\"2024_10Oct_11_vis24_embeddings_full_tvcg_keywords.json\")\n // TODO add other cached embeddgins here\n null\n)\n .json()\n .then((res) => {\n for (let row of res) {\n row.embedding.data = new Float32Array(\n Array.from(Object.values(row.embedding.data))\n );\n // newRes.push({\n // data: new Float32Array(Array.from(Object.values(row.data)))\n // });\n }\n return res;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":3966,"value":"viewof embeddingsFileSelected = Inputs.select(\n [\n \"Title and Abstract Full + TVCG\",\n \n \n ],\n { label: \"Procomputed embeddings file\"}\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"embeddingAccessor = (d) => \n// [d.paper_type].join(\"\\n\\n\")\n computeEmbeddingsUsing.map(a => d[a]).join(\"\\n\\n\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1434,"value":"embeddingsHash = {\n console.log(\"computing embHash\");\n return new Map(embeddings.map((d, i) => [d.id, d.embedding]))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":4430,"value":"onClustersChangeColor = {\n if (computeClusters === true) {\n viewof colorBy.value = \"cluster\";\n viewof colorBy.dispatchEvent(new CustomEvent(\"input\"), { bubbles: true });\n viewof colorScheme.value = \"turbo\";\n viewof colorScheme.dispatchEvent(new CustomEvent(\"input\"), { bubbles: true });\n } else {\n viewof colorBy.value = \"score\";\n viewof colorBy.dispatchEvent(new CustomEvent(\"input\"), { bubbles: true });\n viewof colorScheme.value = \"brownbluegreen\";\n viewof colorScheme.dispatchEvent(new CustomEvent(\"input\"), { bubbles: true });\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6759,"value":"facetedSelected.filter(d => d.title === \"A Preliminary Roadmap for LLMs as Visual Data Analysis Assistants\" )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1857,"value":"facetedSelected = {\n const hasKeywordSelected = (d) =>\n !keywordsSelected.length ||\n keywordsSelected.some((a) =>\n d.keywordsList.includes(a.toLocaleLowerCase())\n );\n\n return facetedSelectedPhase1.filter(\n (d) =>\n typesSelected.includes(d.type) &&\n (!authorsSelected.length ||\n authorsSelected.some((a) => d.authorsList.includes(a))) &&\n (!affiliationsSelected.length ||\n affiliationsSelected.some((a) =>\n d.affiliationsList.includes(a.toLocaleLowerCase())\n )) &&\n hasKeywordSelected(d)\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6597,"value":"papers.filter(d => !d.abstract)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4402,"value":"typesRanked = d3.groups(papers, d => d.type).sort((a,b) => d3.descending(a[1].length, b[1].length)).map(d => d[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"function pleaseEnableComputeEmbeddings() {\n return Object.assign(htl.html`Please enable compute embeddings`, {\n value: []\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"sample = navioSelected","pinned":true,"hidden":false,"mode":"ojs"},{"id":631,"value":"attrs = Object.keys(papers[0]).concat([\"score\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2657,"value":"## Dimmensionality Reduction","pinned":false,"hidden":false,"mode":"md"},{"id":6771,"value":"sample.map((d) => embeddingsHash.get(d.id)?.data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"reducerResultComputed = {\n embeddings;\n console.log(\n \"Launching DR Worker\",\n [...embeddingsHash.keys()].length,\n sample.length,\n sample.at(-1),\n typesSelected\n );\n if (useCachedDR) return [];\n restartDR;\n\n console.log(\"👏🏻 Running DR\");\n try {\n return DruidGenerator(\n sample.map((d) => embeddingsHash.get(d.id)?.data),\n druid_method,\n {... druid_params, d: dimensionality}\n );\n } finally {\n console.log(\"👏🏻 Completed DR\");\n mutable lastReducerTimestamp = performance.now();\n }\n // for await (const step of DruidGenerator(\n // sample.map((d) => embeddingsHash.get(d.id).data),\n // druid_method,\n // druid_params\n // )) {\n // yield step;\n // mutable lastReducerTimestamp = performance.now();\n // }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6732,"value":"## One dimensional reduction","pinned":false,"hidden":false,"mode":"md"},{"id":6686,"value":"oneD = DruidGenerator(\n sample.map((d) => embeddingsHash.get(d.id)?.data),\n druid_method,\n { ...druid_params, d: 1 }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6706,"value":"vl\n .markCircle({ tooltip: { data: true } })\n .encode(\n vl.y().fieldQ(\"pos\"),\n vl.x().fieldN(\"cluster\").sort(vl.median(\"y\")),\n vl.color().fieldO(\"cluster\")\n )\n .height(900)\n .width(width-100)\n .data(dataToPlotWithClusters.map((d, i) => ({ ...d, pos: oneD[i] })))\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6702,"value":"druid_params","pinned":true,"hidden":false,"mode":"ojs"},{"id":6243,"value":"// To keep track of last time the reducer computed\nmutable lastReducerTimestamp = performance.now()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2058,"value":"reducerResult = {\n const res = useCachedDR\n ? reducerResultCached\n : Object.fromEntries(\n sample.map((d, id) => [d.id, reducerResultComputed[id]])\n );\n\n for (let p in res) {\n if (res[p]?.length === 1) {\n // for one dimensional reduction\n res[p] = [0, res[p][0]];\n }\n }\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2517,"value":"{\n // DOWNLOAD UMAP\n if (!reducerResultComputed.length)\n return html`Enable compute UMAP to download`;\n\n return sample.map((d, i) => {\n const [x, y] = reducerResultComputed[i];\n return { id: d.id, x, y };\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1719,"value":"reducerResultCached = FileAttachment(\"CSCW_2024_umap.csv\")\n .csv({ typed: true })\n .then((res) => Object.fromEntries(res.map((d) => [d.id, [d.x, d.y]])))","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"dataToPlot = {\n return (semanticSearchResults ? semanticSearchResults : navioSelected).map(\n (row, id) => ({\n ...row,\n embedding: embeddingsHash.get(row.id)?.data,\n x: reducerResult[row.id] && reducerResult[row.id][0],\n y: reducerResult[row.id] && reducerResult[row.id][1]\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6212,"value":"dataToPlotWithClusters = {\n console.log(\"🏘️ Recompute dataToPlotWithClusters\", clusters);\n clusters;\n return dataToPlot;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2668,"value":"### Semantic Search","pinned":false,"hidden":false,"mode":"md"},{"id":1302,"value":"semanticSearchResults = cosineSimilarity(query, sample)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1293,"value":"// https://github.com/xenova/transformers.js/blob/main/examples/semantic-image-search-client/src/app/worker.js#L46\nasync function cosineSimilarity(query, data) {\n if (!query) {\n for (let row of data) {\n row.score = 0;\n }\n return;\n }\n\n const query_embeds = (await extractor(query, extractorOptions)).data;\n\n // const database_embeds = sample.map((d) => embeddingsHash.get(d.id).data);\n\n for (let row of data) {\n const dbVector = embeddingsHash.get(row.id)?.data;\n if (dbVector) {\n row.score = pairCosineSimilarity(query_embeds, dbVector);\n } else {\n console.log(\"no embedding found for\", row.id);\n }\n }\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2069,"value":"// Computes the cosine similarity between two embeddings\n\nfunction pairCosineSimilarity(embeddingA, embeddingB) {\n const EMBED_DIM = embeddingA.length;\n let dotProduct = 0;\n let normEmbeds = 0;\n let normDB = 0;\n\n for (let j = 0; j < EMBED_DIM; ++j) {\n const embedValue = embeddingA[j];\n const dbValue = embeddingB[j];\n\n dotProduct += embedValue * dbValue;\n normEmbeds += embedValue * embedValue;\n normDB += dbValue * dbValue;\n }\n\n const score = dotProduct / (Math.sqrt(normEmbeds) * Math.sqrt(normDB));\n return score;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6567,"value":"function cosineMatrix(embeddings) {\n const cosineMatrix = Array.from({ length: embeddings.length }, () =>\n Array(embeddings.length).fill(0)\n );\n for (let i = 0; i < embeddings.length; ++i) {\n for (let j = i + 1; j < embeddings.length; ++j) {\n cosineMatrix[i][j] = pairCosineSimilarity(embeddings[i], embeddings[j]);\n cosineMatrix[j][i] = cosineMatrix[i][j];\n }\n }\n\n return cosineMatrix;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4148,"value":"import {\n DruidGenerator,\n viewof druid_method,\n viewof druid_params\n} with { default_method } from \"@john-guerra/druidjs-generator\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4163,"value":"default_method = \"UMAP\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"transformers = import(\"https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"### Transformers.js","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"extractor = await transformers.pipeline(\n \"feature-extraction\",\n \"Xenova/all-MiniLM-L6-v2\",\n // \"allenai/specter2\",\n // { quantize: false }\n extractorOptions\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4513,"value":"visKeywords = (await FileAttachment(\"visKeywords@1.csv\").csv()).filter(d => d.keyword) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":2786,"value":"extractorOptions = ({\n pooling: \"mean\",\n quantize: false, \n // normalize: true,\n // quantize: true,\n // precision: \"binary\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6157,"value":"gDocsPapers = d3\n .csv(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRB4np6KAnB8s1KkX7o8EYu0ii7aQyC3mOd40nj-h9R4j9Qt5cjImyZhyHkTQ_nirK4KZxyvPT_KQ5Z/pub?gid=481334436&single=true&output=csv\",\n {}\n )\n .then((res) => {\n return res.map((d) => {\n d.id = d.title;\n d.keywordsList = d.keywords\n .split(\",\")\n .map((a) => a.trim().toLocaleLowerCase())\n .filter((d) => d);\n d.authorsList = d.authors\n .split(\",\")\n .map((a) => a.trim())\n .filter((d) => d);\n d.authorNames = d.authors;\n d.affiliationsList =\n d?.affiliations\n ?.split(\", \")\n .map((a) => a.trim().toLocaleLowerCase())\n .filter((d) => d) || [];\n return d;\n });\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":6574,"value":"viewof keywordsSelected = // PersistInput(\n// \"keywords\",\n\nmultiAutoSelect(\n Array.from(new Set(papersSource.map((d) => d.keywordsList).flat())),\n { label: \"Keywords\" }\n)\n\n// scentedCheckbox(facetedSelectedPhase1, (d) => d.keywordsList, {\n// cutoff: 0,\n// showTotal: false,\n// maxHeight: \"200px\",\n// label: \"Keywords\"\n// })\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":6651,"value":"papersSource = cscw.papers\n// papersSource = gDocsPapers","pinned":true,"hidden":false,"mode":"ojs"},{"id":4362,"value":"papers = {\n let res = papersSource;\n\n if (includeKeywords) {\n res = res.concat(\n visKeywords \n .map((k, i) => ({\n title: k.keyword,\n abstract: k.description,\n authorList: [],\n authors: \"\",\n authorNames: \"\",\n affiliationsList: [],\n id: `keyword:${i}`,\n type: \"keyword\"\n }))\n );\n }\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6843,"value":"cscw = processACMPapers(await FileAttachment(\"CSCW_2024_program.json\").json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1598,"value":"## Clusters WIP","pinned":false,"hidden":false,"mode":"md"},{"id":4234,"value":"clusters = {\n clusteringSpace;\n maxClusters\n papersPerClusterRange;\n hdbScanClusteredTree;\n if (!computeClusters) return null;\n console.log(\"💳 Computing clusters \", clusteringType, clusteringSpace);\n\n if (clusteringType === \"Kmeans\") {\n return await clustersKmeans;\n } else {\n return await hdbscanClusters;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5567,"value":"clustersKmeans = {\n if (\n !computeClusters ||\n clusteringType !== \"Kmeans\" \n )\n return {};\n const before = performance.now();\n let dataset;\n\n if (clusteringSpace === \"Embeddings\") {\n dataset = navioSelected.map(({ id }) => embeddingsHash.get(id).data);\n } else {\n dataset = dataToPlot.map(({ x, y }) => [x, y]);\n // dataset = Object.entries(reducerResult).map(([k, v]) => v);\n }\n\n const clusters = await kmeans.kmeans(dataset, maxClusters);\n clusters.clusters.map((c, i) => {\n dataToPlot[i].cluster = c;\n });\n console.log(\n \"🦜🦜🦜 Kmeans clusters computed in\",\n (performance.now() - before) / 1000\n );\n return clusters;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3996,"value":"HDBScanJS = import('https://cdn.skypack.dev/hdbscanjs@1.0.12?min').then(res => res.default)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5883,"value":"viewof maxClusteringDistance = Inputs.range(\n [0, hdbScanClusteredTree?.dist || 1],\n {\n label: \"Max distance\",\n value: hdbScanClusteredTree?.dist * 0.4 || 0.4,\n step: 0.001,\n format: d3.format(\".3f\")\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6465,"value":"hdbScanClusteredTree?.dist || 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":6256,"value":"// function enoughTimeSinceLastDRResult() {\n// let diff;\n// console.log(\n// \"⏰ enoughTimeSince edit\",\n// (diff = performance.now() - lastReducerTimestamp),\n// diff > minTimeDeltaForClustering\n// );\n// return (\n// performance.now() - lastReducerTimestamp > minTimeDeltaForClustering\n// );\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":3999,"value":"hdbScanClusteredTree = {\n reducerResult;\n\n\n if (\n !computeClusters ||\n clusteringType != \"HDBScan\" \n )\n return {};\n const before = performance.now();\n console.log(\"🦜 Running HDBScan\");\n\n let dataset, distFunc;\n\n if (clusteringSpace === \"Embeddings\") {\n // Cluster embeddings\n dataset = dataToPlot.map(({ id }) => ({\n data: embeddingsHash.get(id).data,\n opt: id\n }));\n distFunc = pairCosineSimilarity;\n } else {\n // two distance measure functions are supported:\n // 1) euclidean\n // 2) geoDist (take inputs as lonlat points)\n distFunc = HDBScanJS.distFunc.euclidean;\n\n // // Cluster DR\n dataset = dataToPlot.map(({ id, x, y }) => ({ data: [x, y], opt: id }));\n // dataset = Object.entries(reducerResult).map(([k, v]) => ({\n // data: v,\n // opt: k\n // }));\n }\n\n const cluster = new HDBScanJS(dataset, distFunc);\n const treeNode = cluster.getTree();\n console.log(\"🦜 HDBScan ran in \", performance.now() - before);\n\n return treeNode;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6421,"value":"{\n hdbScanClusteredTree;\n console.log(\"⏰⏰⏰⏰\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6437,"value":"maxClusteringDistance","pinned":true,"hidden":false,"mode":"ojs"},{"id":4569,"value":"hdbscanClusters = {\n hdbScanClusteredTree;\n console.log(\"🦜🤯 Trying to copy HDBScans clusters\");\n if (!computeClusters || clusteringType != \"HDBScan\") return [];\n\n const filterCond = (val) =>\n val.data.length >= papersPerClusterRange[0] &&\n val.data.length < papersPerClusterRange[1] &&\n val.dist <= maxClusteringDistance;\n\n const hdbscanClusters = hdbScanClusteredTree.filter(filterCond);\n\n const mapClusters = new Map(\n hdbscanClusters.map((d, c) => d.opt.map((e) => [e, c])).flat()\n );\n\n dataToPlot.forEach((d) => {\n d.cluster = mapClusters.get(d.id);\n // d.cluster = d.cluster === null ? -1 : d.cluster;\n });\n\n console.log(\"🦜🤯 HDBScans clusters copied!\");\n\n return hdbscanClusters;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4802,"value":"corpus = {\n if (!computeClusters) return {};\n const groupedClusters = hdbscanClusters.map((c, i) =>\n c.opt.map((id) => mapPaperId.get(id))\n );\n\n return new tfidf.Corpus(\n groupedClusters.map((_, i) => i),\n groupedClusters.map((c) =>\n c\n .map(\n (d) => d?.title\n + d?.abstract\n )\n .join(\"\\n\")\n ),\n true,\n [],\n 5,\n 0.9\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5781,"value":"groupedClusters = hdbscanClusters.map((c, i) =>\n c.opt.map((id) => mapPaperId.get(id))\n );","pinned":true,"hidden":false,"mode":"ojs"},{"id":4697,"value":"mapPaperId = new Map(dataToPlot.map(d => [d.id, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4291,"value":"function convertTree(t) {\n let children = [];\n if (t?.left) children = [convertTree(t.left)];\n if (t?.right) children = [...children, convertTree(t.right)];\n return {\n ...t,\n children\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3302,"value":" authors = [...new Set(papers.map(d => d.authorsList).flat())].sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5723,"value":"// Doesn't work for acm\nviewof includeKeywords = Inputs.toggle({label: \"Include Keywords\", disabled: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3418,"value":"affiliations = [\n ...new Set(\n papers\n .map((d) => d.affiliationsList.map((i) => i.toLocaleLowerCase()))\n .flat()\n )\n].sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3923,"value":"viewof initialAffiliations = {\n const widget = PersistInput(\n \"affiliations\",\n Inputs.checkbox(affiliations, { maxHeight: \"100px\" })\n );\n widget.style.height = \"100px\";\n widget.style.overflow = \"scroll\";\n return widget;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3814,"value":"viewof initialAuthors = {\n const widget = await PersistInput(\n \"authors\",\n Inputs.checkbox(authors, { maxHeight: 100 })\n);\n widget.style.height = \"100px\";\n widget.style.overflow = \"scroll\";\n return widget;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3445,"value":"import {PersistInput} from '@john-guerra/persist-input'\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":3303,"value":"import {multiAutoSelect} from \"@john-guerra/multi-auto-select@262\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4799,"value":"tfidf = import('https://unpkg.com/tiny-tfidf@0.9.1/index.js?module')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4028,"value":"import {Tree} from \"@john-guerra/tree-fit\"\n// import {Tree} from \"@d3/cluster\"\n// https://observablehq.com/@d3/cluster","pinned":true,"hidden":false,"mode":"ojs"},{"id":4230,"value":"kmeans = import('https://cdn.skypack.dev/ml-kmeans@6.0.0?min')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4877,"value":"import {interval} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":4907,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":575,"value":"import {conditionalShow} from \"@john-guerra/conditional-show\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"import {FacetedSearch} from \"@john-guerra/faceted-search\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"import {progress} from \"@mootari/displaying-progress\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"import {navio} from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1801,"value":"import {scentedCheckbox} from \"@john-guerra/scented-checkbox\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4040,"value":"import { BrushableScatterPlot } with { getVegaView } from \"@john-guerra/brushable-scatterplot\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2090,"value":"import {processACMPapers, renderPaper} from \"@john-guerra/process-acm-papers\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}