Public
Edited
Jun 7, 2023
Importers
Insert cell
Insert cell
placeCountJson = FileAttachment("count@1.json").json()
Insert cell
function placeCountLine(day,place){
var ret = [];
for (let i = 0; i < 24; i++) {
ret.push([i, placeCountJson[day][place][i]]);
}
return ret;
}
Insert cell
function getPlaceInput() {
var floor1Places = ["Sub-Venue A", "Sub-Venue B", "Sub-Venue C", "Sub-Venue D",
"Room1", "Room2", "Room3", "Room4",
"Post Hall", "Register", "Exhibition Hall", "Main Venue", "Service",
"Toilet1", "Toilet2"];
var floor2Places = ["Dining Room", "Relaxation Areas", "Room5", "Room6", "Toilet3"];
if (floor === 1) {
return Inputs.radio(floor1Places, {label: "Place", value: "Sub-Venue A"})
}
return Inputs.radio(floor2Places, {label: "Place", value: "Dining Room"});
}
Insert cell
viewof day = Inputs.radio(["Day1", "Day2", "Day3"], {label: "Day", value: "Day1"})
Insert cell
viewof floor = Inputs.radio([1, 2], {label: "Select floor", value: 1})
Insert cell
viewof place = getPlaceInput();
Insert cell
function placecount(day,place){
const placecountmap=Plot.plot({
x: {
label: "hours"
},
y: {
label: "Amount of people",
grid: true
},
marks: [
Plot.line(placeCountLine(day,place)),
Plot.ruleX(placeCountLine(day,place), Plot.pointerX({
x: function (p) {
return p[0];
},
py: function(p) {
return p[1];
},
stroke: "gray"
})),
Plot.dot(placeCountLine(day,place), Plot.pointerX({
x: function (p) {
return p[0];
},
y: function(p) {
return p[1];
},
stroke: "red"
})),
Plot.text(placeCountLine(day,place), Plot.pointerX({
px: function (p) {
return p[0];
},
py: function(p) {
return p[1];
},
dy: -10,
frameAnchor: "top-right",
text: (d) => {
return place + " Hour: " + d[0] + ", People: " + d[1];
}
}))
]
})
return placecountmap;
}
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