Public
Edited
Mar 3
import {vl} from "@vega/vega-lite-api-v5"
function generateData(num = 100) {
const copingMechanisms = ["Meditation", "Breathing", "Tapping", "Walk", "Stretching", "Hot Drink"];
return Array.from({ length: num }, (_, i) => ({
timestamp: new Date(Date.now() - i * 3600 * 1000).toISOString(), //FIXED
user: `User ${Math.floor(Math.random() * 5) + 1}`,
coping_mechanism: copingMechanisms[Math.floor(Math.random() * copingMechanisms.length)],
stress_before: Math.floor(Math.random() * (100 - 30) + 30),
stress_after: Math.floor(Math.random() * (80 - 20) + 20),
hr_before: Math.floor(Math.random() * (120 - 60) + 60),
hr_after: Math.floor(Math.random() * (100 - 50) + 50),
hrv_before: Math.floor(Math.random() * (80 - 20) + 20),
hrv_after: Math.floor(Math.random() * (100 - 30) + 30)
}));
}
data = generateData(50);
vl.layer(
vl.markBar({ opacity: 0.6 })
.data(data)
.transform(vl.calculate("'Before'").as("Condition")) // Assign label
.encode(
vl.x().fieldN("coping_mechanism").title("Coping Mechanism"),
vl.y().average("stress_before").title("Avg Stress Level"),
vl.color().fieldN("Condition").scale({ domain: ["Before", "After"], range: ["red", "blue"] }).title("Condition")
),
vl.markBar({ opacity: 0.6 })
.data(data)
.transform(vl.calculate("'After'").as("Condition")) // Assign label
.encode(
vl.x().fieldN("coping_mechanism"),
vl.y().average("stress_after"),
vl.color().fieldN("Condition") // Automatically adds a legend
)
).render()
vl.layer(
vl.markBar({ opacity: 0.6 })
.data(data)
.transform(vl.calculate("'Before'").as("Condition"))
.encode(
vl.x().fieldN("coping_mechanism").title("Coping Mechanism"),
vl.y().average("hr_before").title("Avg Heart Rate"),
vl.color().fieldN("Condition").scale({ domain: ["Before", "After"], range: ["orange", "green"] }).title("Condition")
),
vl.markBar({ opacity: 0.6 })
.data(data)
.transform(vl.calculate("'After'").as("Condition"))
.encode(
vl.x().fieldN("coping_mechanism"),
vl.y().average("hr_after"),
vl.color().fieldN("Condition")
)
).render()
vl.layer(
vl.markBar({ opacity: 0.6 })
.data(data)
.transform(vl.calculate("'Before'").as("Condition")) // Assign label "Before"
.encode(
vl.x().fieldN("coping_mechanism").title("Coping Mechanism"),
vl.y().average("hrv_before").title("Avg HRV"),
vl.color().fieldN("Condition").scale({
domain: ["Before", "After"],
range: ["blue", "cyan"]
}).title("Condition")
),
vl.markBar({ opacity: 0.6 })
.data(data)
.transform(vl.calculate("'After'").as("Condition")) // Assign label "After"
.encode(
vl.x().fieldN("coping_mechanism"),
vl.y().average("hrv_after"),
vl.color().fieldN("Condition").scale({
domain: ["Before", "After"],
range: ["blue", "cyan"]
}).title("Condition")
)
).render()
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.
