3f:null 40:["$","title",null,{"children":"Utils | Boris Berak | Observable"}] 46:T77d,/** * M4 aggregation algorithm. * Reduce time series data in a visualization-preserving way. * Source: https://observablehq.com/@uwdata/m4-scalable-time-series-visualization */ function m4( data, // input data width, // chart width in pixels time = d => d[0], // time accessor, defaults to [0] value = d => d[1] // value accessor, defaults to [1] ) { // update accessors as needed if (typeof time === 'string') { const tfield = time; time = d => d[tfield]; } if (typeof value === 'string') { const vfield = value; value = d => d[vfield]; } // ensure data is a proper array data = Array.isArray(data) ? data : Array.from(data); const n = data.length; // determine time range let tmin = time(data[0]); let tmax = tmin; for (let i = 0; i < n; ++i) { const t = time(data[i]); if (t < tmin) tmin = t; if (t > tmax) tmax = t; } const delta = tmax - tmin; // map a timestamp to an integer pixel coordinate const key = t => Math.round(width * (t - tmin) / delta); // compute min/max time and min/max value (M4!) per pixel column const agg = Array(width); for (let i = 0; i < n; ++i) { const d = data[i]; const t = time(d); const v = value(d); const k = key(t); if (agg[k] == null) { agg[k] = { tmin: t, tmin_i: i, tmax: t, tmax_i: i, vmin: v, vmin_i: i, vmax: v, vmax_i: i, }; } else { const a = agg[k]; if (t < a.tmin) { a.tmin = t; a.tmin_i = i; } if (t > a.tmax) { a.tmax = t; a.tmax_i = i; } if (v < a.vmin) { a.vmin = v; a.vmin_i = i; } if (v > a.vmax) { a.vmax = v; a.vmax_i = i; } } } // filter original data to extremal (M4) values only return data.filter((d, i) => { const t = time(d); const k = key(t); const a = agg[k]; return i === a.tmin_i || i === a.tmax_i || i === a.vmin_i || i === a.vmax_i; }); }47:T51f,function timeSeriesChart({ lines = [], page = 0, limit = 1000, width = innerWidth, height = undefined }) { const transformedData = lines.map(l => { let start = Math.trunc(page * limit); let end = start + limit; if (start > l.data.length || end > l.data.length) { start = l.data.length - limit; end = l.data.length; } return m4(l.data.slice(start, end), width) }); const defaultColor = 'black'; return Plot.plot({ width, height, x: { label: "Time", grid: true }, y: { axis: "right", grid: true, nice: true }, marks: [ ...transformedData.map((data, idx) => Plot.line(data, { stroke: lines[idx].color })), ...transformedData.map((data, idx) => Plot.dot(data, Plot.pointerX({ fill: lines[idx].color || defaultColor, stroke: lines[idx].color || defaultColor }))), ...transformedData.map((data, idx) => Plot.text(data, Plot.pointerX({ px: "0", py: "1", dy: -17, dx: 120 * idx, frameAnchor: "top-left", fontVariant: "tabular-nums", fontWeight: 'bold', text: d => `${lines[idx].label || ''}${d[1].toFixed(2)}`, fill: lines[idx].color || defaultColor }))) ] }) }48:[] 44:{"id":"1756576feef0ac5d","slug":"utils","title":"Utils","thumbnail":"a3713a78dc9e80c43641d0602e5674eea10c89197d0b2852219bc22e51d3ee1f","access_level":"public","create_time":"$D2023-02-19T01:24:48.504Z","update_time":"$D2023-09-09T04:05:23.389Z","view_time":null,"first_public_time":"$D2023-02-19T01:24:48.504Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bfcaf76711b6f3f3","login":"bberak","name":"Boris Berak","avatar_url":"https://avatars-next.observableusercontent.com/2498953787a731d2a5006a7b3f5e5f5b59c6f3d236ec28914f60cd929e952e90","tier":"starter_2024","bio":"","following":false},"version":208,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9a711707cbd055f8","login":"bberak","name":"Boris Berak","avatar_url":"https://avatars-next.observableusercontent.com/2498953787a731d2a5006a7b3f5e5f5b59c6f3d236ec28914f60cd929e952e90","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"9a711707cbd055f8","login":"bberak","name":"Boris Berak","avatar_url":"https://avatars-next.observableusercontent.com/2498953787a731d2a5006a7b3f5e5f5b59c6f3d236ec28914f60cd929e952e90","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Utils","cells":[{"id":0,"value":"# Utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"function createVideo({ width = 500, height = 375, scaleX = 1, scaleY = 1, id = \"\", src = \"\" } = { }) {\n return html`\n

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"createChart = require('@observablehq/vega-lite')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"function createButton({ text = \"\" } = {}) {\n const button = html``;\n \n button.style.width = \"150px\";\n button.style.height = \"40px\";\n button.style.backgroundImage = \"linear-gradient(#f3f3f3, #efefef)\";\n button.style.borderRadius = \"4px\";\n button.style.marginBottom = \"8px\";\n button.innerHTML = `${text}`;\n \n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"function createML5(version = \"0.12.2\") {\n return require(`https://unpkg.com/ml5@${version}/dist/ml5.min.js`)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"import { createP5 } from \"@bberak/p5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"p5 = createP5()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"function observe(element, eventName, transformer, options) {\n return Generators.observe(notify => {\n const handler = e => {\n if (transformer) notify(transformer(e));\n else notify(e);\n };\n\n element.addEventListener(eventName, handler, options);\n\n return () => element.removeEventListener(eventName, handler);\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"function observeMouseover(element, transformer, options) {\n return observe(element, 'mouseover', transformer, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"function observeMousemove(element, transformer, options) {\n return observe(element, 'mousemove', transformer, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"function observeMousedown(element, transformer, options) {\n return observe(element, 'mousedown', transformer, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"function observeClick(element, transformer, options) {\n return observe(element, 'click', transformer, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"function observeKeydown(element, transformer, options) {\n return observe(element, 'keydown', transformer, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"function observeKeyup(element, transformer, options) {\n return observe(element, 'keyup', transformer, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"function observeKeypress(element, transformer, options) {\n return observe(element, 'keypress', transformer, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"function listen(element, eventName, handler, options) {\n element.addEventListener(eventName, handler, options);\n\n const unsubscribe = () => {\n element.removeEventListener(eventName, handler);\n };\n\n invalidation.then(unsubscribe);\n \n return unsubscribe;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"function listenMouseover(element, handler, options) {\n return listen(element, 'mouseover', handler, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"function listenMousemove(element, handler, options) {\n return listen(element, 'mousemove', handler, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"function listenMousedown(element, handler, options) {\n return listen(element, 'mousedown', handler, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"function listenClick(element, handler, options) {\n return listen(element, 'click', handler, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"function listenKeydown(element, handler, options) {\n return listen(element, 'keydown', handler, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"function listenKeyup(element, handler, options) {\n return listen(element, 'keyup', handler, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"function listenKeypress(element, handler, options) {\n return listen(element, 'keypress', handler, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"