Duncan Watts' lab at University of Pennsylvania
chart3b = {
const select = vl.selectMulti().fields("key").bind("legend");
//const brush = vl.selectInterval().encodings("x");
const panzoom = vl
.selectInterval()
.encodings("x")
.bind("scales")
.zoom("wheel!");
const plot1 = vl
.markPoint({ filled: true })
//.data(processed_new_date)
.encode(
vl.x().fieldT("date").axis({ time: "Date" }),
vl
.y()
.fieldQ("median_duration")
.axis({ title: "Median Watch Time (Minutes)" })
.scale({ type: "log" }),
vl
.shape()
.fieldN("label")
.scale({
shape: [
"circle",
"circle",
"square",
"triangle",
"triangle",
"triangle"
]
})
.legend(null),
vl
.color()
.fieldN("label")
.scale({
domain: ["fL", "L", "AW", "C", "R", "fR"],
range: ["#2166AC", "#92C5DE", "#7FC97F", "gray", "#F4A582", "#B2182B"]
})
.legend({ title: "Political Categories" })
//vl.opacity().value(0.2).if(select, vl.value(1))
)
.select(panzoom, select)
.width(width);
const plot1ra = vl
.markLine()
//.select(select)
.encode(
vl.x().fieldT("date").axis({ title: "Date" }).scale({ type: "log" }),
vl.y().fieldQ("rolling"),
vl
.color()
.fieldN("label")
.scale({
domain: ["fL", "L", "AW", "C", "R", "fR"],
range: ["#2166AC", "#92C5DE", "#7FC97F", "gray", "#F4A582", "#B2182B"]
})
);
return vl
.layer(plot1, plot1ra)
.transform(vl.filter(select))
.data(fig3A_data)
.autosize({ type: "fit-x", contains: "padding" })
.render();
}
// chart3a = {
// const select = vl.selectMulti().fields("label").bind("legend");
// //const brush = vl.selectInterval().encodings("x");
// const panzoom = vl
// .selectInterval()
// .encodings("x")
// .bind("scales")
// .zoom("wheel!");
// const scale = {
// domain: ["fR", "R", "C", "L", "fL", "IDW"],
// range: ["#2166AC", "#92C5DE", "#7FC97F", "gray", "#F4A582", "#B2182B"]
// };
// const plot1 = vl
// .markPoint({ filled: true })
// .encode(
// vl.x().fieldT("date").axis({ time: "Date" }),
// vl
// .y()
// .fieldQ("median_view_duration")
// .axis({ title: "Viewer Count, Percentage of Youtube" }),
// vl
// .shape()
// .fieldN("pol_spec")
// .scale({
// shape: [
// "circle",
// "circle",
// "square",
// "triangle",
// "triangle",
// "triangle"
// ]
// })
// .legend(null),
// vl
// .color()
// .fieldN("pol_spec")
// .scale({
// domain: ["fL", "L", "AW", "C", "R", "fR"],
// range: ["#2166AC", "#92C5DE", "#7FC97F", "gray", "#F4A582", "#B2182B"]
// })
// .legend({ title: "Political Categories" })
// //vl.opacity().value(0.2).if(select, vl.value(1))
// )
// .select(panzoom, select)
// .width(width);
// const plot1ra = vl
// .markLine()
// //.select(select)
// .encode(
// vl.x().fieldT("date").axis({ title: "Date" }),
// vl.y().fieldQ("rolling"),
// vl
// .color()
// .fieldN("pol_spec")
// .scale({
// domain: ["fL", "L", "AW", "C", "R", "fR"],
// range: ["#2166AC", "#92C5DE", "#7FC97F", "gray", "#F4A582", "#B2182B"]
// })
// //.scale({ type: "sqrt" })
// );
// return vl
// .layer(plot1, plot1ra)
// .transform(vl.filter(select))
// .data(fig3B_processed)
// .autosize({ type: "fit-x", contains: "padding" })
// .render();
// }
fig3_rawdata.view()
fig3_rawdata = aq.from(await FileAttachment("21_fig3_athena.csv").csv())
fig3A_processed.view()
fig3A_processed = fig3_rawdata.groupby("nol_id", "year", "month").rollup({
median_view_duration: op.median("viewduration"),
pol_spec: op.any("more_labelsv5")
})
fig3B_processed.view()
fig3B_processed = fig3_rawdata
.derive({ date: (d) => op.parse_date(d.year + "-" + d.month) })
.groupby("id", "date")
.rollup({
median_view_duration: op.median("viewduration"),
pol_spec: op.any("more_labelsv5")
})
.derive({
rolling: aq.rolling((d) => op.average(d.median_view_duration), [-2, 1])
})
fig3B_processed.get("median_view_duration", 0)
fig3A_data.view()
fig3A_data = fig3A_raw.derive({
date: (d) => op.parse_date(d.year + "-" + d.month),
rolling: aq.rolling((d) => op.average(d.median_duration), [0, 0])
})
fig3A_raw = aq.from(await FileAttachment("21_fig3_athena_v2.csv").csv())
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.
