Published
Edited
Jun 8, 2021
11 stars
Plot.plot({
style: {
background: 'white',
font: '12px sans-serif',
},
marginRight: 80,
marginTop: 25,
marginLeft: 45,
width: 700,
marks: [
...[
// Comment or uncomment these lines to add / remove data sets from the chart
{data: perfam, label: 'automerge', color: 'purple'},
{data: perfamrs, label: 'automerge-rs', color: 'darkgreen'},
{data: perfref, label: 'ref-crdts', color: 'red'},
{data: perfyjs, label: 'yjs', color: 'blue'},
{data: perfwasm, label: 'rust-wasm', color: 'green'},
].map(({data, label, color}) => [
Plot.line(data, {
filter: (d, i) => i !== 0,
x: 'count',
y: d => d.thisTime/1000,
stroke: color,
}),
Plot.text(data, Plot.selectLast({x: "count", y: d => d.thisTime/1000, text: () => label, textAnchor: "start", dx: 3}))
]),
Plot.ruleX([0, 260000])
],
x: {label: 'txns →'},
y: {
type: 'log', domain: [0.0005, 4], tickFormat: ',',
label: '↑ avg time per txn (ms). Smaller is better'
},
// caption: html`Algorithm performance`,
grid: true
})
Plot.plot({
marks: [
Plot.line(perfam, {
// filter: (d, i) => i !== 0,
x: (d, i) => d.count,
y: d => d.time/1000,
stroke: 'purple',
// stroke: '#e15759'
}),
// Plot.ruleX([0, 50000, 100000, 150000, 200000, 250000]),
Plot.ruleY([0])
],
x: {label: 'txns →'},
y: {label: '↑ cumulative time (seconds)'},
grid: true
})
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.
