Public
Edited
Mar 29, 2023
viewof selectedSenators = searchCheckbox(
senators.map((d) => d.member_full.content)
)
ForceGraph(
{
nodes: senatorToVoteLinksNodes,
links: senatorToVoteLinks.filter((d) => selectedSenators.includes(d.source))
},
{
nodeId: (d) => d.id,
renderer: "canvas",
invalidation,
_this: this,
extent: [
[0, 0],
[width, height]
],
width,
height,
// nodeLabel: false,
drawLinksWhenAlphaIs: 0.5 // useful for larger graphs
}
)
// isolate node values
senators = USSenateVotingData[0].members.member.map((m) => {
const copy = { ...m, id: m.member_full };
delete copy.vote_cast;
return copy;
})
// isolate links content (vote number and vote cast)
senatorToVoteLinks = USSenateVotingData.map((v) =>
v.members.member.map((m) => ({
source: m.member_full.content,
target: v.vote_number.content + m.vote_cast.content
}))
).flat()
// get links details (who's linked to who)
commonVotesLinks = getCommonConnections({ links: senatorToVoteLinks })
// isolate node values (senators)
senatorToVoteLinksNodes = Array.from(
d3.group(senatorToVoteLinks, (d) => d.source).keys()
)
.concat(Array.from(d3.group(senatorToVoteLinks, (d) => d.target).keys()))
.map((d) => ({ id: d }))
viewof selectedUnis = searchCheckbox(papersNodes)
ForceGraph(
{
nodes: papersNodes,
links: papersLinks.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
}
)
papersLinks = getCommonConnections({ links: links })
uniqueSources = papersLinks
.map((paper) => paper.source)
.filter((source, index, self) => self.indexOf(source) === index)
papersNodes = papersAndAffiliations
.map((paper) => paper.affiliation)
.filter((source, index, self) => self.indexOf(source) === index)
paperAuthorLinks = arrayData
.map((p) =>
p.authors.map((a) => ({
source: p.id,
target: a.personID
}))
)
.flat()
papersAndAffiliations = arrayData
.map((p) =>
p.authors.map((a) => ({
paper: p.id,
author: a.personId,
affiliation: a.affiliations[0]?.institution
}))
)
.flat()
viewof paperAffiliationsDF = aq
.from(papersAndAffiliations)
.groupby(["paper", "affiliation"])
.count()
.view()
links = 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 }]
)
// .groupby(["source", "target"])
// .count()
// .orderby(aq.desc("count"))
// .view()
arrayData = data.contents
data = FileAttachment("UIST_2020_program (1).json").json()
import { xmlToJSON } from "@visnup/xml-to-json"
import { aq, op } from "@uwdata/arquero"
import { getCommonConnections } from "@john-guerra/get-common-connections"
import { searchCheckbox } from "@john-guerra/search-checkbox"
height = 400
import { ForceGraph } from "@john-guerra/force-directed-graph"
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.
