Public
Edited
Apr 3, 2023
2 stars
chart = ForceGraph(
{ nodes: senators, links: filteredLinks },
{
nodeId: (d) => d.member_full,
renderer: "canvas",
nodeGroup: (d) => d.party,
nodeRadius: d => 10,
nodeStrength: -100,
linkDistance: 40,
invalidation,
_this: this,
extent: [
[0, 0],
[width, height]
],
width,
height,
// nodeLabel: false,
linkStrokeWidth: (l) => w(l.value),
linkStrokeOpacity: 0.05,
nodeGroups: ["R", "D", "I"],
colors: ["#d62728", "#1f77b4", "#ff7f0e"],
drawLinksWhenAlphaIs: 0.5 // useful for larger graphs
}
)
senators
filteredLinks
viewof selectedParty = searchCheckbox(parties)
viewof politicalP = Inputs.radio(["D", "I", "R"], { label: "color" })
s_senators = senators.filter((item) => item.party === politicalP)
viewof selectedSenators = searchCheckbox(senators.map(d =>d.member_full ))
selectedParty
test = senators.filter(d => d.party === selectedParty)
parties = ["D", "I", "R"]
import {searchCheckbox} from "@john-guerra/search-checkbox"
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
}
)
senatorToVoteLinksNodes = Array.from(
d3.group(senatorToVoteLinks, (d) => d.source).keys()
).concat(Array.from(d3.group(senatorToVoteLinks, (d) => d.target).keys())).map(d => ({id: d}))
d3.group(senators, d => d.party)
// convert to a network
navio(USSenateVotingData.map(v => v.members.member.map(m => ({...m, n: v.vote_number }) )).flat())
// convert to a network
senatorToVoteLinks = USSenateVotingData.map((v) =>
v.members.member.map((m) => ({
source: m.member_full,
target: v.vote_number + m.vote_cast
}))
).flat()
commonVotesLinks = getCommonConnections({links: senatorToVoteLinks})
senators = USSenateVotingData[0].members.member.map((m) => {
const copy = { ...m , id: m.member_full};
delete copy.vote_cast;
return copy;
})
// viewof filteredLinks = navio(commonVotesLinks)
filteredLinks = commonVotesLinks.filter(l => l.value >= minVotes)
w = d3
.scaleLinear()
.domain(d3.extent(commonVotesLinks, (d) => d.value))
.range([0.1, 3])
height = 400
viewof selected = navio(data.contents, {
addAllAttribsIncludeObjects: true,
addAllAttribsIncludeArrays: true
})
data.contents
Table(selected)
df = aq.from(selected)
viewof authorsPapers = df
.select(["id", "authorNames"])
.unroll("authorNames")
.view()
viewof authorNodes = authorsPapers
.derive({ name: d => d.authorNames })
.groupby("name")
.count()
.orderby(aq.desc("count"))
.view()
viewof authorsLinks = authorsPapers
.join(authorsPapers, "id", [
{ source: d => d.authorNames },
{ target: d => d.authorNames }
])
.filter(d => d.source !== d.target && d.source < d.target)
.groupby(["source", "target"])
.count()
.orderby(aq.desc("count"))
.view()
import {ForceGraph} from "@john-guerra/force-directed-graph"
import {getCommonConnections} from "@john-guerra/get-common-connections"
import {navio} from "@john-guerra/navio"
network = ({nodes: senators, links: commonVotesLinks})
import {USSenateVotingData} from "@john-guerra/get-us-senate-voting-data"
import {Swatches} from "@d3/color-legend"
data = FileAttachment("UIST_2020_program.json").json()
import { Search, Table } from "@observablehq/inputs"
import { aq, op } from "@uwdata/arquero"
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.
