Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
deviceAnalytics = FileAttachment("device-analytics.csv").csv()
Inputs.table(deviceAnalytics)
deviceAnalytics[0]
devices = deviceAnalytics.map(
(d) => d // TODO replace this
)
// Note: when we only have a single type of mark, we can use the syntax
// Plot.markType(..).plot(options), which is equivalent to
// Plot.plot({marks: [Plot.markType(...)], ...options})
// Draw vertical bars:
Plot.barY(
devices, // based on this data
// group the data into categories on the X axis:
Plot.groupX(
{ y: "count" }, //outputs: specify which aggregation calculation to perform ("count") the which channel it should be shown on (y)
{ x: "Device" } //inputs: specify what should be the input for the calculation ("Device"), and what channel it should be shown on (x)
)
).plot({
marginLeft: 50 // make space for the labels on Y axis
})
// TODO your code here
Plot.dot(devices, {
// TODO your code here
}).plot({
// some default layout tweaks (feel free to change):
width,
height: width * 0.5,
x: { grid: true, domain: [0, 4200] },
y: { grid: true, domain: [0, 2600] },
opacity: { type: "log" }
})
// TODO copy your dot plot code here
// then add facets!
devicesFinished = deviceAnalytics.map((d) => {
// This is one solution; yours may look a bit different!
let [Width, Height] = d.Resolution.split("x");
return {
Device: d.Device,
Resolution: d.Resolution,
Width: +Width,
Height: +Height,
Users: +d.Users,
Sessions: +d.Sessions
};
})
finishedDevices = Plot.barY(
devicesFinished,
Plot.groupX(
{ y: "sum", title: "sum" },
{ x: "Device", y: "Users", fill: "Device", title: "Users" }
)
).plot({
marginLeft: 50
})
// One possible solution; yours may differ!
finishedResolutions = Plot.dot(devicesFinished, {
x: "Width",
y: "Height",
fill: "Device",
fillOpacity: "Sessions",
r: ({ Sessions }) => Math.log(Sessions),
title: ({ Resolution, Sessions }) => [Resolution, Sessions].join(": ")
}).plot({
width,
height: width * 0.5,
x: { grid: true, domain: [0, 4200] },
y: { grid: true, domain: [0, 2600] },
opacity: { type: "log" }
})
finishedResolutionsByDevice = Plot.dot(devicesFinished, {
x: "Width",
y: "Height",
fill: "Device",
fillOpacity: "Sessions",
r: ({ Sessions }) => Math.log(Sessions),
title: ({ Resolution, Sessions }) => [Resolution, Sessions].join(": ")
}).plot({
width,
height: width * 0.5,
x: { grid: true, domain: [0, 5000] },
y: { grid: true, domain: [0, 2600] },
opacity: { type: "log" },
facet: { data: devicesFinished, x: "Device" }
})
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.
