I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
May 21, 2024
Paused
viewof query = Inputs.text({
value: "Personalizing Search via Association",
label: "query",
submit: true
})
viewof selectionType = Inputs.select(["brush", "disjoint clicking"])
similarityMatrixChart = {
const selectionFn =
selectionType === "brush" ? vl.selectInterval : vl.selectMulti;
const brush = selectionFn("selected").encodings("y");
return vl
.markRect({ tooltip: true })
.params(brush)
.encode(
vl
.x()
.fieldO("i")
.title(null)
.axis({ orient: "top" })
.sort(getOrderForAttrib(recomendedPapers, columnOrder)),
vl
.y()
.fieldO("j")
.title(null)
.sort(getOrderForAttrib(recomendedPapers, rowOrder)),
vl.color().fieldQ("similarity"),
vl.opacity().if(brush, 1).value(0.3),
vl.tooltip(["title"])
)
.data(tidySimilarity(similarity, recomendedPapers, columnOrder, rowOrder));
}
recomendedPapers = recommendations ? recommendations.fields.slice().map((d, i) => ((d.__i = i), d)): []
function tidySimilarity(similarity, papers, columnOrder, rowOrder) {
return similarity
.map((row, i) =>
row.map((similarity, j) => ({
title: `${similarity.toFixed(2)} (${i} -> ${j}); ${
papers[i].title
} -> ${papers[j].title}`,
i,
j,
similarity: similarity
}))
)
.flat();
}
function getOrderForAttrib(papers, attrib) {
return attrib === "None"
? papers.map((_, i) => i)
: papers
.sort((a, b) => d3.ascending(a[attrib], b[attrib]))
.map((d, i) => d.__i);
}
url = `${server}${papersUrl}`
tableFormat = ({ authors: authors => authors.map(a => a.name).join(", ") })
methods= "prone,specter,scincl,gnn".split(",")
papers = (await d3.json(url)).search_results
natural = require('natural@6.7.2/lib/natural/index.js').catch(() => window["buildExportMap"])
corpusId = paperSelectedForRec.externalIds.CorpusId
recommendedURL = `/cgi-bin/recommend_papers?id=CorpusId:${corpusId}&limit=${limit}&method=${method}&score2=prone,specter,scincl,gnn&fields=title,citationCount,year,authors`
server = `http://localhost:8000`
papersUrl = `/cgi-bin/paper_search?query=${query}`
recommendations = {
yield null;
yield await fetch(`${server}${recommendedURL}`).then((res) => res.json());
}
similarity = recommendations ? recommendations.score2[method] : []
import {vegaSelected} from "@john-guerra/vega-selected"
import {multiAutoSelect} from "@john-guerra/multi-auto-select"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
