Public
Edited
Mar 14
VegaLite = require("vega-embed@6")
Time-Wasters on Social Media.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
dataFile = FileAttachment("Time-Wasters on Social Media.csv").csv({typed: true})
parseTime = d3.timeParse("%I:%M %p");
dataFile.forEach(d => {
d.WatchTimeParsed = parseTime(d["Watch Time"]);
});
dataFile.map(d => d["Watch Time"]);
timeSpent = {
const t = dataFile.map(d => +d["Time Spent On Video"]);
return t;
}
margin = ({top: 20, right: 30, bottom: 30, left: 40})
vl.markPoint()
.data(dataFile)
.width(600)
.height(400)
.title("TESTY")
.encode(
vl.x().fieldQ('Total Time Spent').title("Age"),
vl.y().fieldQ('Number of Videos Watched').title("Addiction Level") // add in y encoding
).render();
VegaLite({
data: {values: dataFile},
mark: "bar",
width: 600,
height: 400,
encoding: {
x: {field: "Total Time Spent", type: "quantitative"},
y: {field: "Number of Videos Watched", type: "quantitative"}
}
})
VegaLite({
data: {values: dataFile},
mark: "bar",
width: 600,
height: 400,
encoding: {
x: {field: "Age", type: "quantitative"},
y: {aggregate: "sum", field: "Total Time Spent", type: "quantitative"}
}
})
VegaLite({
data: {values: dataFile},
mark: "bar",
width: 600,
height: 400,
encoding: {
x: {field: "Age", type: "quantitative"},
y: {aggregate: "sum", field: "Total Time Spent", type: "quantitative"}
}
})
VegaLite({
data: {values: dataFile},
mark: "bar",
width: 600,
height: 400,
encoding: {
x: {field: "Gender"},
y: {aggregate: "average", field: "Total Time Spent", type: "quantitative"}
}
})
VegaLite({
data: {values: dataFile},
mark: "bar",
width: 600,
height: 400,
encoding: {
x: {field: "Gender", type: "nominal"},
y: {aggregate: "average", field: "Addiction Level", type: "quantitative"}
}
})
VegaLite({
data: {values: dataFile},
mark: "bar",
width: 600,
height: 400,
encoding: {
x: {field: "Video Category", type: "nominal"},
y: {aggregate: "count", field: "Addiction Level", type: "quantitative"}
}
})
VegaLite({
data: {values: dataFile},
mark: "bar",
width: 600,
height: 400,
encoding: {
x: {field: "DeviceType", type: "nominal"},
y: {aggregate: "average", field: "Addiction Level", type: "quantitative"}
}
})
VegaLite({
data: {values: dataFile},
mark: "bar",
width: 600,
height: 400,
encoding: {
x: {field: "Watch Reason", type: "nominal"},
y: {aggregate: "average", field: "Addiction Level", type: "quantitative"}
}
})
VegaLite({
data: {values: dataFile},
mark: "bar",
width: 600,
height: 400,
encoding: {
x: {field: "DeviceType", type: "nominal"},
y: {aggregate: "average", field: "Addiction Level", type: "quantitative"}
}
})
VegaLite({
data: {values: dataFile},
mark: "bar",
width: 600,
height: 400,
encoding: {
x: {field: "Video Category", type: "nominal"},
y: {aggregate: "sum", field: "Engagement", type: "quantitative"}
}
})
VegaLite({
data: {values: dataFile},
mark: "bar",
width: 600,
height: 400,
encoding: {
x: {field: "Video Length"},
y: {aggregate: "sum", field: "Engagement", type: "quantitative"}
}
})
VegaLite({
data: {values: dataFile},
mark: "line",
width: 800,
height: 500,
encoding: {
x: {
field: "Self Control",
title: "Self Control",
type: "quantitative"
},
y: {
aggregate: "average",
field: "ProductivityLoss",
type: "quantitative",
title: "Average Productivity Loss"
},
color: { field: "Frequency", type: "nominal", title: "Frequency" },
}
})
VegaLite({
data: {values: dataFile},
mark: "line",
width: 900,
height: 600,
encoding: {
x: {
field: "Self Control",
title: "Self Control",
type: "quantitative"
},
y: {
aggregate: "average",
field: "ProductivityLoss",
type: "quantitative",
title: "Average Productivity Loss"
},
color: { field: "DeviceType", type: "nominal", title: "DeviceType" },
}
})
VegaLite({
data: {values: dataFile},
mark: "line",
width: 600,
height: 400,
transform: [
{
bin: {
maxbins: 6
},
field: "Age", as: "binnedAge"
}
],
encoding: {
x: {
field: "Self Control",
title: "Self Control",
type: "quantitative"
},
y: {
aggregate: "average",
field: "ProductivityLoss",
type: "quantitative",
title: "Average Productivity Loss"
},
color: { field: "binnedAge", type: "nominal", title: "Age" },
}
})
VegaLite({
data: {values: dataFile},
mark: "line",
width: 600,
height: 400,
transform: [
{
bin: {
maxbins: 6
},
field: "Age", as: "binnedAge"
}
],
encoding: {
x: {
field: "Self Control",
title: "Self Control",
type: "quantitative"
},
y: {
aggregate: "average",
field: "ProductivityLoss",
type: "quantitative",
title: "Average Productivity Loss"
},
color: { field: "binnedAge", type: "nominal", title: "Age" },
}
})
VegaLite({
data: {values: dataFile},
mark: "line",
width: 900,
height: 600,
encoding: {
x: {
field: "Addiction Level",
title: "Addiction Level",
type: "quantitative"
},
y: {
aggregate: "average",
field: "ProductivityLoss",
type: "quantitative",
title: "Average Productivity Loss"
},
//color: { field: "DeviceType", type: "nominal", title: "DeviceType" },
}
})
VegaLite({
data: {values: dataFile},
mark: "line",
width: 800,
height: 500,
encoding: {
x: {
field: "Satisfaction",
title: "Satisfaction",
type: "quantitative"
},
y: {
field: "Addiction Level",
title: "Addiction Level",
type: "quantitative"
},
}
})
VegaLite({
data: {values: dataFile},
mark: "line",
width: 800,
height: 500,
encoding: {
x: {
field: "Age",
title: "Age",
type: "quantitative"
},
y: {
aggregate: "average",
field: "Addiction Level",
title: "Addiction Level",
type: "quantitative"
},
//color: {field: "Debt", type: "nominal", title: "Debt" },
}
})
VegaLite({
data: {values: dataFile},
mark: "line",
width: 700,
height: 400,
encoding: {
x: {
field: "Age",
title: "Age",
type: "quantitative"
},
y: {
aggregate: "average",
field: "ProductivityLoss",
title: "ProductivityLoss",
type: "quantitative"
},
color: {field: "Debt", type: "nominal", title: "Debt" },
}
})
What is the relationship between loss of productivity and time of the day?
As we see, loss of productivity is most associated with earlier in the day.
transformedData = dataFile.flatMap(d => [
{ WatchTimeParsed: parseTime(d["Watch Time"]), Metric: "Addiction Level", Value: +d["Addiction Level"] },
{ WatchTimeParsed: parseTime(d["Watch Time"]), Metric: "Self Control", Value: +d["Self Control"] },
{ WatchTimeParsed: parseTime(d["ProductivityLoss"]), Metric: "Productivity Loss", Value: +d["ProductivityLoss"] }
]);
VegaLite({
data: { values: transformedData },
mark: "line",
width: 800,
height: 500,
encoding: {
x: {
timeUnit: "hours",
field: "WatchTimeParsed",
title: "Watch Time",
type: "temporal"
},
y: {
field: "Value",
title: "Value",
type: "quantitative"
},
color: {
field: "Metric", // Different colors for each metric
type: "nominal",
title: "Metric"
}
}
})
VegaLite({
data: { values: dataFile },
width: 800,
height: 500,
layer: [
{
mark: "line",
encoding: {
x: {
timeUnit: "hours",
field: "WatchTimeParsed",
title: "Watch Time",
type: "temporal"
},
y: {
aggregate: "average",
field: "Addiction Level",
title: "Metric Value",
type: "quantitative"
},
color: { value: "red" }, // Custom color for differentiation
tooltip: [{ field: "Addiction Level", type: "quantitative" }]
}
},
{
mark: "line",
encoding: {
x: {
timeUnit: "hours",
field: "WatchTimeParsed",
type: "temporal"
},
y: {
aggregate: "average",
field: "ProductivityLoss",
type: "quantitative"
},
color: { value: "blue" }, // Custom color for differentiation
tooltip: [{ field: "ProductivityLoss", type: "quantitative" }]
}
},
{
mark: "line",
encoding: {
x: {
timeUnit: "hours",
field: "WatchTimeParsed",
type: "temporal"
},
y: {
aggregate: "average",
field: "Self Control",
type: "quantitative"
},
color: { value: "green" }, // Custom color for differentiation
tooltip: [{ field: "Self Control", type: "quantitative" }]
}
}
]
})
VegaLite({
data: {values: dataFile},
mark: "line",
width: 800,
height: 500,
encoding: {
x: {
timeUnit: "hours",
field: "WatchTimeParsed",
title: "Watch Time",
type: "temporal"
},
},
layer: [{
encoding: {
y: {
aggregate: "average",
field: "Addiction Level",
title: "Addiction Level",
type: "quantitative"
},
},
encoding: {
y: {
aggregate: "average",
field: "ProductivityLoss",
title: "Productivity Loss",
type: "quantitative"
},
},
}],
resolve: {"scale": {"y": "independent"}}
})
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.
