deviceAnalytics = FileAttachment("device-analytics.csv").csv()
Inputs.table(deviceAnalytics)
deviceAnalytics[0]
devices = deviceAnalytics.map((d) => {
const [width, height] = d.Resolution.split("x");
return {
Device: d.Device,
Resolution: d.Resolution,
Width: +width,
Height: +height,
Users: +d.Users,
Sessions: +d.Sessions
};
})
// 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
})
Plot.dot(devices, {
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" }
})
Plot.dot(devices, {
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" },
facet: {
data: devices,
x: "Device"
}
})
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" }
})
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.