Public
Edited
Dec 3
Screen_Time_and_Productivity_Dataset_with_Zero_Task_Days@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
// Aggregate data by device
deviceDataLorP = d3.rollups(
data1,
v => d3.sum(v, d => d["Tasks Completed"]), // Sum tasks completed per device
d => d.Device
).map(([Device, TasksCompleted]) => ({ Device, TasksCompleted }));
data1
html`<div style="text-align: center; margin-bottom: 20px;">
<h3>Which device is more productive?</h3>
<div style="display: flex; justify-content: center; align-items: flex-end; gap: 40px;">
${deviceDataLorP.map(({ Device, TasksCompleted }) =>
html`<div style="text-align: center;">
<span style="font-size: ${Math.max(TasksCompleted * 0.4, 35)}px; display: block;">
${Device === "Laptop" ? "💻" : "📱"}
</span>
<span style="font-size: 16px;">${Device}</span>
<br />
<span style="font-size: 14px;">${TasksCompleted} tasks</span>
</div>`
)}
</div>
</div>`;
Plot.plot({
title: "Do Interruptions affect Task Productivity?",
marks: [
Plot.rect(
data1,
Plot.bin(
{ fill: "count" },
{ x: "Interruptions", y: "Tasks Completed", fill: "density" }
)
)
],
x: { label: "Interruptions" },
y: { label: "Tasks Completed" },
color: { scheme: "blues", label: "Density of Tasks", legend:true}
});
nonWorkApps = ["Social Media", "Entertainment", "Browsing"];
// Prepare the data for the stacked bar chart
stackedData = d3.rollups(
data1,
v => ({
totalTasks: d3.sum(v.filter(d => d["Tasks Completed"] > 0), d => d["Screen Time (minutes)"]),
noTasks: d3.sum(v.filter(d => d["Tasks Completed"] === 0), d => d["Screen Time (minutes)"])
}),
d => d.Date
).map(([Date, { totalTasks, noTasks }]) => ({
Date,
"Tasks": totalTasks,
"No Tasks": noTasks
}));
nonWorkAggregated = d3.rollups(
data1.filter(d => ["Social Media", "Entertainment", "Browsing"].includes(d["App Usage"])),
v => ({
totalScreenTime: d3.sum(v, d => d["Screen Time (minutes)"]),
totalTasks: d3.sum(v, d => d["Tasks Completed"])
}),
d => d.Date
).map(([Date, { totalScreenTime, totalTasks }]) => ({
Date,
"Total Screen Time (minutes)": totalScreenTime,
"Tasks Completed": totalTasks
}));
// Convert stackedData into a long format for plotting
longData = [];
stackedData.forEach(row => {
longData.push({ Date: row.Date, Category: "Tasks", Value: row.Tasks });
longData.push({ Date: row.Date, Category: "No Tasks", Value: row["No Tasks"] });
});
Plot.plot({
title: "Does time spent on non-work apps correlate with lower productivity?",
marks: [
Plot.barY(longData, {
x: "Date",
y: "Value",
fill: "Category"
})
],
x: { label: "Date", tickRotate: -45 },
y: { label: "Screen Time (minutes)" },
color: {
legend: true,
label: "Task Completion"
}
});
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.