learning to swim
FileAttachment("trajectories@3.csv")
d3 = require("d3@5")
width = 860
height = 600
radius = 5
padding = 1 // Space between nodes
cluster_padding = 5; // Space between nodes in different stages
groups = {
const groups = {
"Gosford": { x: 450, y: 150, color: "#93D1BA", cnt: 0, fullname: "Gosford" },
"Wyong": { x: 550, y: 100, color: "#BEE5AA", cnt: 0, fullname: "Wyong"},
"Hornsby": { x: 200, y: 375, color: "#79BACE", cnt: 0, fullname: "Hornsby" },
"Ryde": { x: 150, y: 500, color: "lightblue", cnt: 0, fullname: "Ryde" },
"Mona Vale": { x: 500, y: 350, color: "pink", cnt: 0, fullname: "Mona Vale"},
"Manly": { x: 450, y: 500, color: "#FAF49A", cnt: 0, fullname: "Manly"},
"RNSH": { x: 300, y: 550, color: "grey", cnt: 0, fullname: "RNSH" }
};
return groups
}
groups['RNSH'] // take a peek at a group (hospital)
// Load data.
stages = d3.csvParse(await FileAttachment("trajectories@3.csv").text(), d3.autoType)
stages[10] // take a peek at a stage (transfer)
// Consolidate stages by pid.
// The data file is one row per stage change (transfer).
people = {
const people = {};
stages.forEach(d => {
if (d3.keys(people).includes(d.pid + "")) {
people[d.pid + ""].push(d);
} else {
people[d.pid + ""] = [d];
}
});
return people
}
// Create node data.
nodes = d3.keys(people).map(function(d) {
// Initialize count for each group.
groups[people[d][0].grp].cnt += 1;
return {
id: "node"+d,
x: groups[people[d][0].grp].x + Math.random(),
y: groups[people[d][0].grp].y + Math.random(),
r: radius,
color: groups[people[d][0].grp].color,
group: people[d][0].grp,
timeleft: people[d][0].duration,
istage: 0,
stages: people[d]
}
});
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.
