I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Nov 15, 2024
Importers
cscw2024 = FileAttachment("CSCW_2024_program.json").json()
chi2024 = FileAttachment("CHI_2024_program_may13.json.zip")
.zip()
.then((res) => res.file("CHI_2024_program_may13.json").json())
cscw = processACMPapers(cscw2024)
navio(cscw.papers)
cscw.maps
import{navio} from "@john-guerra/navio"
function processACMPapers(acmConfPapers) {
const attrs = [
// "conference",
// "publicationInfo",
"sponsors",
"sponsorLevels",
"floors",
"rooms",
"tracks",
"contentTypes",
"timeSlots",
"sessions",
"events",
"contents",
"people",
"recognitions"
];
const maps = new Map(
attrs.map((a) => [a, new Map(acmConfPapers[a].map((d) => [d.id, d]))])
);
const papers = acmConfPapers.contents.map((d) => {
d.id = +d.id;
d.sessions = d.sessionIds.map((s) => {
const session = maps.get("sessions").get(s);
if (!session) console.log("Session not found", s, session);
session.room = maps.get("rooms").get(session.roomId);
session.timeSlot = maps.get("timeSlots").get(session.timeSlotId);
return session;
});
d.firstSessionName = d.sessions[0]?.name;
d.sessionName = d.sessionName || d.firstSessionName;
d.firstRoomName = d.sessions[0]?.room?.name;
d.roomName = d.roomName || d.firstRoomName;
d.firstTimestamp = new Date(d.sessions[0]?.timeSlot?.startDate);
d.timestamp = d.timestamp || d.firstTimestamp;
d.firstSessionNameWord = d.sessions[0]?.name.split(" ")[0];
d.track = maps.get("tracks").get(d.trackId).name;
d.type = d.track || `${acmConfPapers.conference.shortName} paper`;
d.authorsExpanded = d.authors.map((a) =>
maps.get("people").get(a.personId)
);
d.authorsList = d.authorsExpanded.map((a) =>
`${a.firstName?.trim()} ${a.lastName?.trim()}`.toLocaleLowerCase()
);
d.authorNames = d.authorsList.join(", ");
d.affiliationsList = [
...new Set(
d.authors
.map((a) =>
a.affiliations.map((f) => f.institution.trim().toLocaleLowerCase())
)
.flat()
)
];
d.url = `https://programs.sigchi.org/${acmConfPapers.conference.shortName.toLocaleLowerCase()}/2024/program/content/${
d.id
}`;
return d;
});
return { papers, maps };
}
cscw2024.conference.shortName.toLocaleLowerCase()
// How to render one of the papers
function renderPaper(p) {
return htl.html`
<div style="width: 150px; flex: 1; padding-right: 10px; padding-bottom: 15px">
<strong><a href=${p.url}>${p.title}</a></strong>
<div>Similarity score: ${(p.score * 100).toFixed(2)}% ${
p.awards ? p.awards : ""
}</div>
<div style="font-style: italic; max-height: 4em; overflow: auto;">${p.authorsExpanded
.map((a) => `${a.firstName} ${a.lastName}`)
.join(", ")}</div>
<div>${p.track} - ${p.firstSessionName}</div>
<div style="margin-top: 0.5em; max-height: 70px; overflow: auto">${
p.abstract
}</div>
</div>
`;
}
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.
