Assistant Professor of Technical Communication at North Carolina State University
style = html`
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
<style>
h2 {
font-family: "Oswald", sans-serif;
font-weight: bold;
margin: 0px 20px ;
}
${
useShadowsNodes
? `svg circle.shadow {
-webkit-filter: drop-shadow( 2px 2px 1px rgba(0, 0, 0, .7));
filter: drop-shadow( 2px 2px 1px rgba(0, 0, 0, .7));
}
`
: ""
}
${
useShadowsText
? `
svg text.shadow {
font-family: 'Oswald', sans-serif;
-webkit-filter: drop-shadow( 2px 2px 1px rgba(255, 255, 255, .7));
filter: drop-shadow( 2px 2px 1px rgba(255, 255, 255, .7));
}`
: ""
}
<style>
`
data = FileAttachment("Faculty_May_2022.csv")
.csv({ typed: true })
.then((res) => {
for (let d of res) {
d.name = `${d["First Name"]} ${d["Last Name"]}`;
d.date = dateFmt(d["Date of joining NU"]);
d.type = "Faculty";
if (d["Interdisciplinary College 1"] === null)
d["Interdisciplinary College 1"] =
"Khoury College of Computer Sciences";
}
return res;
})
// A map for the faculty nodes
dData = new Map(data.map(d => [d.name, d]))
// Let's keep here a reference of the targets
dConnections = new Map()
graph = {
for (let n of dData.values()) {
n.degree = 0;
}
const linksArray = links.objects();
for (let l of linksArray) {
const source = dData.get(l.source);
// target = dNodes.get(l.target);
source.cluster = l.target;
// target.cluster = l.target;
source.degree += 1;
// target.degree += 1;
}
const getOrCreateNode = (name) => {
let node = dConnections.get(name);
if (!node) {
node = {
name,
type: "Connection",
cluster: name,
x: width / 2 + (Math.random() * width) / 10,
y: height / 2 + (Math.random() * height) / 10
};
dConnections.set(name, node);
}
return node;
};
// --------- Filter Links and Nodes --------------
const filteredLinks = linksArray.map((l) => {
return {
source: dData.get(l.source),
target: getOrCreateNode(l.target)
};
});
const filteredNodesObject = filteredLinks.reduce(
(p, l) => {
if (!p.set.has(l.source.name)) {
p.set.add(l.source.name);
p.list.push(l.source);
}
if (!p.set.has(l.target.name)) {
p.set.add(l.target.name);
p.list.push(l.target);
}
return p;
},
{ set: new Set(), list: [] }
);
// Clusters is used for the hulls
const clusters = d3.rollups(
filteredLinks,
(v) => v.map((l) => l.source).concat([v[0].target]),
(d) => d.target.name
);
return {
nodes: filteredNodesObject.list,
links: linksArray,
clusters: clusters
};
}
dateFmt = d3.timeParse("%m/%d/%y")
hullColor = d3.scaleOrdinal(
d3.quantize(
colorInterpolator,
tidyData.groupby(groupBy).count().objects().length
)
)
// Transform the data into tidyFormat
viewof tidyData = aq
.from(data)
.fold(
[
"Interdisciplinary College 1",
"Interdisciplinary College 2",
"Interdisciplinary College 3"
],
{
as: ["IC", "Appointment"]
}
)
.derive({
"Research Areas": (d) =>
d["Research Areas"] === null ? [null] : op.split(d["Research Areas"], "/")
})
.unroll("Research Areas")
.derive({
"Academic Track Type": (d) =>
d["Academic Track Type"] === null
? [null]
: op.split(d["Academic Track Type"], "&")
})
.unroll("Academic Track Type")
.derive({ "Academic Track Type": (d) => op.trim(d["Academic Track Type"]) })
// .filter(aq.escape((d) => showKhoury ? true: d.Appointment !== "Khoury College of Computer Sciences" ))
.view()
filteredTidyData = tidyData
// Build the network by linking Faculty to Appointment/Campus/...
viewof links = tidyData
.filter(aq.escape((d) => !d.date || d.date <= minDate)) // Filter by Date
.derive({
source: (d) => d.name,
target: aq.escape((d) => d[groupBy])
})
.groupby(["source", "target"])
.count()
.filter((d) => d.target && d.source) // Ignore nulls
.filter(aq.escape((d) => selectedTargets.includes(d.target))) // Filter by selectedTarget
.select(["source", "target"])
.view()
viewof targets = links
.groupby("target")
.count()
.rename({ target: "name" })
.view()
viewof sources = links
.groupby("source")
.count()
.rename({ source: "name" })
.derive({ type: () => "Faculty" })
.view()
// Inputs.table(data)
// navio(data)
import { navio } from "@john-guerra/navio"
import { aq, op } from "@uwdata/arquero"
import {Scrubber} from "@mbostock/scrubber"
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.
