// html`
// <h1 style="display: none">Streams of Notes</h1>
// <style>
// .streamplot {
// margin: 10px ${width > 500 ? 30 : 10}px;
// }
// </style>
// <div style="background:${frameColors.background}">
// ${header}
// <div class="streamplot">${topPlot}</div>
// <div class="streamplot">${midPlot}</div>
// <div class="streamplot">${bottomPlot}</div>
// ${footer}
// </div>
// `
import {addTooltips} from "@mkfreeman/plot-tooltip"
df.view()
platformColors = ({
windows: '#ded3d1',
macOS: '#c4b9b7',
linux: '#8c7c7a',
'ota updates': '#fbcc42'
})
plotGrowth = (type, h, reverse) => {
const dfi = df.
filter(aq.escape(d => d.type == type))
const dfisum = dfi.
groupby(['created_at', 'created_at_string', 'type']).
rollup({download_count: op.sum('download_count')})
const height = sizeScale(h * typeSize[type].pp)
const scaleOptions = {
grid: true,
tickSize: 0,
label: null
}
return addTooltips(Plot.plot({
width: width,
height: height,
marginRight: 0,
marginLeft: 0,
marginTop: 0,
marginBottom: 0,
style: {
color: frameColors.light,
background: frameColors.plotBackground,
},
color: {
legend: true
},
x: {
...scaleOptions,
ticks: 50,
tickFormat: d => '',
},
y: {
...scaleOptions,
ticks: 10 * typeSize[type].pp,
tickFormat: d => '',
domain: [0, typeSize[type].maxY],
reverse: reverse,
},
marks: [
Plot.areaY(dfi, Plot.stackY({
x: 'created_at',
y: 'download_count',
z: 'distribution',
fill: 'color',
fillOpacity: .85,
curve: 'basis',
stroke: frameColors.background,
strokeWidth: .9,
order: 'sum'
})),
Plot.dot(dfisum, {
x: 'created_at',
y: 'download_count',
title: d => `${d.download_count} downloads\n${d.created_at_string}`,
stroke: frameColors.light,
strokeWidth: .5,
r: 3,
fill: frameColors.plotBackground
}),
Plot.ruleX(yearMarks, {
stroke: frameColors.background,
strokeWidth: 5,
strokeOpacity: 1
})
]
}))
}
frameColors = ({
regular: '#302f2f',
light: '#787674',
background: '#fffbf7',
plotBackground: "#faf8f5"
})
df.view()
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.
