Public
Edited
Mar 31, 2023
viewof selectedNodes = Inputs.radio(aq.from(papersAndAffiliations)._names)
viewof aggregateBy = Inputs.radio(aq.from(papersAndAffiliations)._names)
viewof selectedLinks = Inputs.radio(aq.from(papersAndAffiliations)._names)
// import data as an array
dataArray = data.contents
//isolate criteria for link/node
papersAndAffiliations = dataArray
.map((p) =>
p.authors.map((a) => ({
paper: p.id,
author: a.personId,
affiliation: a.affiliations[0]?.institution,
city: a.affiliations[0]?.city,
country: a.affiliations[0]?.country
}))
)
.flat()
function get_links(data, attr1, attr2) {
return aq.from(data).groupby([attr1, attr2]).count().view();
// return aq
// .from(df)
// .join(
// df,
// (s, t) => s.paper === t.paper && s.city !== t.city && s.city < t.city,
// [{ source: (d) => d.city }, { target: (d) => d.city }]
// );
}
viewof test1 = get_links(papersAndAffiliations, "paper", "city")
test2 = aq
.from(test1)
.join(
test1,
(s, t) => s.paper === t.paper && s.city !== t.city && s.city < t.city,
[{ source: (d) => d.city }, { target: (d) => d.city }]
)
function getNodesHelper(data, attr) {
return papersAndAffiliationsDF.groupby(attr).count().view();
}
getNodesHelper(papersAndAffiliations, "affiliation")
function getLinksHelper(data, linkBy, nodeBy) {
return aq
.from(data)
.params({ nodeBy, linkBy })
.join(
data,
(s, t, $) =>
s[$.linkBy] === t[$.linkBy] &&
s[$.nodeBy] !== t[$.nodeBy] &&
s[$.nodeBy] < t[$.nodeBy]
// [
// { source: (d, $) => d[$.nodeBy] },
// { target: (d, $) => d[$.nodeBy] }
// ]
)
.derive({
source: (d, $) => d[$.nodeBy + "_1"],
target: (d, $) => d[$.nodeBy + "_2"]
})
.select(["source", "target"])
.groupby(["source", "target"])
.count()
.orderby(aq.desc("count"));
}
viewof t = getLinksHelper(aq.from(papersAndAffiliations), "paper", "affiliation").view()
// viewof t = getLinksHelper(aq.from(papersAndAffiliations), "paper", "city").view()
test3 = getCommonConnections({ links: test2 })
viewof institutionCityDF = aq
.from(papersAndAffiliations)
.groupby(["paper", "city"])
.count()
.view()
cityLinks = aq
.from(institutionCityDF)
.join(
institutionCityDF,
(s, t) => s.paper === t.paper && s.city !== t.city && s.city < t.city,
[{ source: (d) => d.city }, { target: (d) => d.city }]
)
cityLinksFinal = getCommonConnections({ links: cityLinks })
viewof citiesLinksDF = getLinksHelper(
papersAndAffiliationsDF,
"paper",
"city"
).view()
// citylinksFinal = getLinksHelper(papersAndAffiliations, "city")
cityNodes = papersAndAffiliations
.map((paper) => paper.city)
.filter((source, index, self) => self.indexOf(source) === index)
viewof selectedCity = searchCheckbox(cityNodes)
viewof citiesLinksDFFiltered = citiesLinksDF.filter(
aq.escape(
(d) =>
selectedCity.includes(d.source) ||
selectedCity.includes(d.target)
)
).view()
viewof cityNodesDF = papersAndAffiliationsDF.groupby("city").count().view()
plotForceGraph(cityNodes, citiesLinksDFFiltered)
viewof selectedCities = searchCheckbox(cityNodes)
// citiesNodesDF = getNodesHelper(papersAndAffiliationsDF, "city")
viewof citiesNodesDF = papersAndAffiliationsDF.groupby("city").count().view()
// papersAndAffiliationsDF.groupby("city").count().view()
ForceGraph(
{
nodes: citiesNodesDF,
links: cityLinksFinal.filter((d) => selectedCities.includes(d.source))
},
{
nodeId: (d) => d,
renderer: "canvas",
invalidation,
_this: this,
extent: [
[0, 0],
[width, height]
],
width,
height,
// nodeLabel: false,
drawLinksWhenAlphaIs: 0.5 // useful for larger graphs
}
)
viewof papersAndAffiliationsDF = aq.from(papersAndAffiliations).view()
viewof countriesNodesDF = papersAndAffiliationsDF.groupby("country").count().view()
// papersAndAffiliations
// .map((paper) => paper.country)
// .filter((source, index, self) => self.indexOf(source) === index)
// aq.from(papersAndAffiliations).groupby(d => d.country).count()
viewof paperCountriesDF = aq
.from(papersAndAffiliations)
.groupby(["paper", "country"])
.count()
.view()
viewof countriesLinksDF = getLinksHelper(papersAndAffiliationsDF, "paper", "country").view()
// countryLinksFinal = getCommonConnections({ links: countriesLinks })
viewof selectedCountries = searchCheckbox(
countriesNodesDF.objects().map((d) => d.country)
)
viewof countriesLinksDFFiltered = countriesLinksDF.filter(
aq.escape(
(d) =>
selectedCountries.includes(d.source) ||
selectedCountries.includes(d.target)
)
).view()
ForceGraph(
{
nodes: countriesNodesDF.objects().map(d =>d.country),
links: countriesLinksDFFiltered.objects()
},
{
nodeId: (d) => d,
renderer: "canvas",
invalidation,
_this: this,
extent: [
[0, 0],
[width, height]
],
width,
height,
// nodeLabel: false,
drawLinksWhenAlphaIs: 0.5 // useful for larger graphs
}
)
viewof institutionLinksDF = getLinksHelper(
papersAndAffiliationsDF,
"paper",
"affiliation"
).view()
institutionNodes = papersAndAffiliations
.map((paper) => paper.affiliation)
.filter((source, index, self) => self.indexOf(source) === index)
//
viewof paperAffiliationsDF = aq
.from(papersAndAffiliations)
.groupby(["paper", "affiliation"])
.count()
.view()
instlinks = aq
.from(paperAffiliationsDF)
.join(
paperAffiliationsDF,
(s, t) =>
s.paper === t.paper &&
s.affiliation !== t.affiliation &&
s.affiliation < t.affiliation,
[{ source: (d) => d.affiliation }, { target: (d) => d.affiliation }]
)
institutionLinks = getCommonConnections({ links: instlinks })
viewof selectedUnis = searchCheckbox(institutionNodes)
ForceGraph(
{
nodes: institutionNodes,
links: institutionLinks.filter((d) => selectedUnis.includes(d.source))
},
{
nodeId: (d) => d,
renderer: "canvas",
invalidation,
_this: this,
extent: [
[0, 0],
[width, height]
],
width,
height,
// nodeLabel: false,
drawLinksWhenAlphaIs: 0.5 // useful for larger graphs
}
)
viewof paperAuthorsDF = aq
.from(papersAndAffiliations)
.groupby(["paper", "author"])
.count()
.view()
papersAndAffiliations
test = getCommonConnections({ links: papersAndAffiliations })
authorsNodes = papersAndAffiliations
.map((paper) => paper.author)
.filter((source, index, self) => self.indexOf(source) === index)
authorLinks = aq
.from(paperAuthorsDF)
.join(
paperAuthorsDF,
(s, t) =>
s.paper === t.paper && s.author !== t.author && s.author < t.author,
[{ source: (d) => d.author }, { target: (d) => d.author }]
)
authorLinksFinal = getCommonConnections({ links: authorLinks })
plotForceGraph(authorsNodes, authorLinksFinal)
function plotForceGraph(nodes, links) {
return ForceGraph(
{
nodes: nodes,
links: links
},
{
nodeId: (d) => d,
renderer: "canvas",
invalidation,
_this: this,
extent: [
[0, 0],
[width, height]
],
width,
height,
// nodeLabel: false,
drawLinksWhenAlphaIs: 0.5 // useful for larger graphs
}
);
}
data = FileAttachment("UIST_2020_program (1) (1).json").json()
import { searchCheckbox } from "@john-guerra/search-checkbox"
import { ForceGraph } from "@john-guerra/force-directed-graph"
import { aq, op } from "@uwdata/arquero"
import { getCommonConnections } from "@john-guerra/get-common-connections"
height = 400
import { navio } from "@john-guerra/navio"
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.
