Public
Edited
Jan 30, 2023
change = {
const data = await aq.loadCSV(await FileAttachment("change.csv").url())
return data.derive({
from_time: d => op.parse_date(d.from_time * 1e3),
to_time: d => op.parse_date(d.to_time * 1e3),
difference: d => d.to_value - d.from_value
})
}
logins = {
const data = await aq.loadCSV(await FileAttachment("logins.csv").url())
return data.derive({
week: d => op.parse_date(d.week * 1e3),
}).filter(d => d.week > op.datetime(2022,10,10))
}
df = {
const data = await aq.loadCSV(await FileAttachment("login_change.csv").url())
return data.derive({
start: d => op.parse_date(d.start * 1e3),
end: d => op.parse_date(d.end * 1e3),
}).filter(d => d.start > op.datetime(2022,10,20))
}
df.view()
Plot.plot({
height: 2000,
width: 100,
color: {
scheme: 'RdBu',
type: 'diverging-symlog',
domain: [-1, 1],
reverse: true,
pivot: 0
},
y: {
axis: null
},
marks: [
Plot.barX(df, {
x1: 'start',
x2: 'end',
y: 'instance',
fill: 'change',
stroke: null,
title: d => `${d.change}\n${d.instance}\n${d3.timeFormat('%-d %B')(d.start)}`,
sort: {
y: 'fill',
reduce: 'sum',
reverse: true
}
})
]
})
logins.view()
logins.object()
// Plot.plot({
// width: width,
// x: {
// // axis:null,
// domain: d3.utcWeeks(new Date(Date.UTC(2022,10,10)), new Date(Date.UTC(2023,0,30)))
// },
// y: {
// axis: null
// },
// color: {
// scheme: 'RdBu',
// reverse: true,
// type: 'diverging-log'
// },
// marks: [
// Plot.cell(logins, {
// x: 'week',
// y: 'instance',
// fill: 'logins',
// })
// ]
// })
Plot.plot({
width: 300,
height: 5000,
x: {
// axis:null,
// domain: d3.timeWeeks(new Date(2022,10,10), new Date(2023,0,30))
},
y: {
tickFormat: d => '',
grid: true
},
color: {
scheme: 'RdBu',
type: 'diverging-log'
},
marks: [
Plot.dot(logins, {
x: 'week',
y: 'instance',
fill: 'logins',
r: 3,
})
]
})
d3.utcWeeks(new Date(2022,10,10), new Date(2023,0,29))
change.view()
Plot.plot({
width: width,
height: 500,
marginLeft: 0,
y: {
// type: 'symlog',
grid: true,
ticks: 3,
},
x: {
axis: null
},
marks: [
Plot.barY(change, {
y: 'difference',
x: (d, i) => i,
inset: 0,
stroke: null,
sort: {
x: 'y'
}
})
]
})
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.
