Public
Edited
Apr 7, 2023
viewof movies = FileAttachment("movies.csv").csv()
import { dataInput } from "@john-guerra/data-input"
viewof loadedData = dataInput()
viewof dataDF = aq.from(loadedData).view()
viewof selected = searchCheckbox(dataDF, { height: 200 })
chart = ForceGraph(
{ nodes: dataDF, links: LinksDF },
{
nodeId: (d) => d.Series_Title,
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
}
)
viewof LinksDF = getLinksHelper(
aq.from(dataDF),
"Star1",
"Series_Title",
"Series_Title",
"Series_Title"
).view()
viewof LinksDFFiltered = LinksDF.filter(
aq.escape((d) => selected.includes(d.source) || selected.includes(d.target))
).view()
w = d3
.scaleLinear()
.domain(d3.extent(LinksDF, (d) => d.value))
.range([0.1, 3])
function getLinksHelper(data, linkBy, nodeBy, linkFrom, linkTo) {
return aq
.from(data.slice(0, 5000))
.params({ nodeBy, linkBy, linkFrom, linkTo })
.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[$.linkFrom + "_1"],
target: (d, $) => d[$.linkTo + "_2"]
})
.select(["source", "target"])
.groupby(["source", "target"])
.count()
.orderby(aq.desc("count"));
}
height = 400
import { aq, op } from "@uwdata/arquero"
import { ForceGraph } from "@john-guerra/force-directed-graph"
import { searchCheckbox } from "@john-guerra/search-checkbox"
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.
