Public
Edited
Apr 7, 2023
Insert cell
Insert cell
viewof file = Inputs.file({
label: "Import Data",
accept: [".csv", ".json"],
required: true
})
Insert cell
// csvData = file.csv({ typed: true })
Insert cell
// aq.from(file)
Insert cell
Insert cell
USSenateVotingData = {
const votingsZip = await FileAttachment("US_senate_voting (1).zip").zip();

return Promise.all(
votingsZip.filenames.map(async (f) =>
votingsZip
.file(f)
.text()
.then(xmlToJSON)
.then((res) => res.roll_call_vote)
)
);
}
Insert cell
SenateData = USSenateVotingData.map((v) =>
v.members.member.map((m) => ({
member_full: m.member_full.content,
party: m.party.content,
// state: m.state.content,
// vote_cast: m.vote_cast.content,
// vote_num: v.vote_number.content,
// vote_title: v.vote_title.content,
vote_cast_num: m.vote_cast.content + v.vote_number.content
}))
).flat()
Insert cell
// function getLinksHelper2(data, linkBy, nodeBy, linkFrom, linkTo) {
// return aq
// .from(data)
// .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"));
// }
Insert cell
Insert cell
// viewof senateDF = getLinksHelper2(
// aq.from(SenateData),
// "vote_cast_num",
// "member_full",
// "vote_cast_num",
// "member_full"
// ).view()
Insert cell
// viewof senateDFiltered = senateDF
// .filter(
// aq.escape(
// (d) => testselected.includes(d.source) || testselected.includes(d.target)
// )
// )
// .view()
Insert cell
// testNodes = Array.from(d3.group(senateDF, (d) => d.source).keys()).concat(
// Array.from(d3.group(senateDF, (d) => d.target).keys())
// )
// // .map((d) => ({ id: d }))
Insert cell
// viewof testselected = searchCheckbox(testNodes)
Insert cell
// ForceGraph(
// {
// nodes: testNodes,
// links: senateDFiltered.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
// }
// )
Insert cell
Insert cell
data = FileAttachment("UIST_2020_program (1) (1) (1).json").json()
Insert cell
dataArray = data.contents
Insert cell
//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()
Insert cell
Insert cell
movies = FileAttachment("imdb_top_1000.csv").csv({ types: true })
Insert cell
// spotify = FileAttachment("spotify.csv").csv()
Insert cell
Insert cell
viewof loadedData = dataInput({ value: movies })
Insert cell
viewof dataDF = aq.from(loadedData).view()
// Import Data Array HERE
Insert cell
import {dataInput} from "@john-guerra/data-input"
Insert cell
options_ = aq.from(dataDF)._names
Insert cell
Insert cell
viewof nodesBy = multiAutoSelect({
options: options_,
value: "member_full"
})
Insert cell
Insert cell
viewof aggregateBy = multiAutoSelect({options:options_, label: "Aggregated By", value: ifHas("vote_cast_num")})
Insert cell
Insert cell
viewof linkFrom = multiAutoSelect({options:options_, label: "Link From", value: ifHas("member_full")})
Insert cell
Insert cell
viewof linkTo = multiAutoSelect({ options: options_, label: "Link To" }) //, value: ifHas("member_full")
Insert cell
ifHas = (a) => Object.keys(loadedData[0]).includes(a) ? a : []
Insert cell
viewof MAX_ROWS=Inputs.number({value: 1000, label: "Max Rows"})
Insert cell
// viewof testt = getLinksHelper(dataDF, "vote_cast", "member_full").view()
Insert cell
viewof selected = searchCheckbox(nodes, { height: 200 })
Insert cell
Insert cell
chart = ForceGraph(
{
nodes: nodesOnLinks,
links: LinksDFFiltered.objects()
},
{
nodeId: (d) => d,
renderer: "canvas",
invalidation,
_this: this,
extent: [
[0, 0],
[width, height]
],
width,
height: height,
// nodeLabel: false,
// nodeGroups: ["R", "D", "I"],
// colors: ["#d62728", "#1f77b4", "#ff7f0e"],
drawLinksWhenAlphaIs: 0.5 // useful for larger graphs
}
)
Insert cell
viewof height = Inputs.range([0, 1000], {value: 500, label: "Height"})
Insert cell
viewof LinksDF = getLinksHelper(
dataDF,
aggregateBy,
nodesBy,
linkTo,
linkFrom
).view()
Insert cell
viewof LinksDFFiltered = LinksDF.filter(
aq.escape((d) => selected.includes(d.source) || selected.includes(d.target))
).view()
Insert cell
// nodes = NodesDF.objects().map((item) => item[nodesBy])
nodes = Array.from(d3.group(LinksDF, (d) => d.source).keys()).concat(
Array.from(d3.group(LinksDF, (d) => d.target).keys())
)
Insert cell
function getLinksHelper(data, linkBy, nodeBy, linkFrom, linkTo) {
return aq
.from(data.slice(0, MAX_ROWS))
.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"));
}
Insert cell
import { multiAutoSelect } from "@john-guerra/multi-auto-select"
Insert cell
import { searchCheckbox } from "@john-guerra/search-checkbox"
Insert cell
import { ForceGraph } from "@john-guerra/force-directed-graph"
Insert cell
import { aq, op } from "@uwdata/arquero"
Insert cell
import { getCommonConnections } from "@john-guerra/get-common-connections"
Insert cell
import { navio } from "@john-guerra/navio"
Insert cell
import { xmlToJSON } from "@visnup/xml-to-json"
Insert cell
viewof height2 = range({value: 500})
Insert cell
height2
Insert cell
height2.value
Insert cell
function range({ value = 300 } = {}) {
const input = html`<input type="range" min=0 max=1000 value=${value}>`;
const output = html`<output></output>`;
const bar = html`<div style='background: black;
width: 20px;
min-height: 30px;'></div>`;
const ele = html`<label>Height: ${output} ${input} ${bar}</label> `;

function update() {
ele.value = +input.value;
output.innerText = input.value;

bar.style.width = input.value + "px";
ele.dispatchEvent(new Event("input", { bubbles: true }));
}

input.addEventListener("input", update);

update();

return ele;
}
Insert cell
height
Insert cell
viewof height.value
Insert cell
{
return `My double height is ${height*2}`;
}
Insert cell

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.
Learn more