data = FileAttachment("results@1.out").text()
.then(f=>f.trimEnd().split('\n') // split ndjson into individual json strings
.map(l=>JSON.parse(l)) // parse json into objects
// split tags in name to kv pairs
.map(o=>o.name.match(/\w+=[\w\.]+/g).concat(`value=${o.measures.value}`))
// convert kvs to objects
.map(a=>a.reduce((m,p)=>{let kv=p.split('='); m[kv[0]]=kv[1]; return m}, {}))
// transform fields into format ready for chart to consume
.map(o=>Object.assign({}, o, {
lat: o.lat === '0s' ? 'none' : o.lat,
bw: o.bw === '0B' ? 'unlimited' : o.bw,
value: parseFloat(o.value),
size: bytes(o.size),
}))
// add ideal durations
.concat(["32MiB", "4.0MiB", "1.0MiB"].reduce((m,bw)=>
m.concat(["none", "50ms", "100ms"].reduce((m,lat)=>
m.concat(["16KB", "256KB", "1MB", "4MB"].map(size=>{return {bw, lat, size:bytes(size), transport:'ideal', value:bytes(size)/bytes(bw)}}
)),[])),[]))
)
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.
