2d:null 2e:["$","title",null,{"children":"Realtime Horizon Chart | Andres Segura-Tinoco | Observable"}] 33:T6fb,chart = { const div = html`

`; const canvas = d3.select(div) .selectAll("canvas") .data(data) .enter().append(() => DOM.context2d(width, step, 1).canvas) .style("position", "absolute") .style("image-rendering", "pixelated") .style("top", (d, i) => `${i * (step + 1) + margin.top}px`) .property("context", function() { return this.getContext("2d"); }) .each(horizon); const svg = d3.select(div.appendChild(DOM.svg(width, height))) .style("position", "relative") .style("font", "10px sans-serif"); const gX = svg.append("g"); svg.append("g") .selectAll("text") .data(data) .join("text") .attr("x", 4) .attr("y", (d, i) => (i + 0.5) * (step + 1) + margin.top) .attr("dy", "0.35em") .text((d, i) => i); const rule = svg.append("line") .attr("stroke", "#000") .attr("y1", margin.top - 6) .attr("y2", height - margin.bottom - 1) .attr("x1", 0.5) .attr("x2", 0.5); svg.on("mousemove touchmove", () => { const x = d3.mouse(svg.node())[0] + 0.5; rule.attr("x1", x).attr("x2", x); }); function horizon(d) { const {context} = this; const {length: k} = d; if (k < width) context.drawImage(this, k, 0, width - k, step, 0, 0, width - k, step); context.fillStyle = "#fff"; context.fillRect(width - k, 0, k, step); for (let i = 0; i < overlap; ++i) { context.save(); context.translate(width - k, (i + 1) * step); context.fillStyle = color(i); for (let j = 0; j < k; ++j) { context.fillRect(j, y(d[j]), 1, -y(d[j])); } context.restore(); } } div.update = data => { canvas.data(data).each(horizon); gX.call(xAxis); }; return div; }34:[] 31:{"id":"7e3b6795d08eb196","slug":"realtime-horizon-chart","title":"Realtime Horizon Chart","thumbnail":"5cb01098c7f67d21cac852c65488aa2d9299ac07ca62937ee2750cb333d2fa25","access_level":"public","create_time":"$D2020-03-06T21:53:33.713Z","update_time":"$D2020-03-11T15:10:20.872Z","view_time":null,"first_public_time":"$D2020-03-11T15:10:36.316Z","has_unpublished_edits":null,"fork":{"id":"5ba5faad224a4840","slug":"realtime-horizon-chart","title":"Realtime horizon chart","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"ff46568c68a22740","login":"ansegura7","name":"Andres Segura-Tinoco","avatar_url":"https://avatars-next.observableusercontent.com/4dd59e255febc0a15c606b2e2aaf3a9e2f0d8564dec994ae6b3d391b3804b939","tier":"starter_2024"},"version":699,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7ecd247516fdac18","login":"ansegura7","name":"Andres Segura-Tinoco","avatar_url":"https://avatars-next.observableusercontent.com/4dd59e255febc0a15c606b2e2aaf3a9e2f0d8564dec994ae6b3d391b3804b939","tier":null}],"members":[{"type":"individual","id":"7ecd247516fdac18","login":"ansegura7","name":"Andres Segura-Tinoco","avatar_url":"https://avatars-next.observableusercontent.com/4dd59e255febc0a15c606b2e2aaf3a9e2f0d8564dec994ae6b3d391b3804b939","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Realtime Horizon Chart","cells":[{"id":0,"value":"md`# Realtime Horizon Chart\n\nThis [horizon chart](/@d3/horizon-chart) shows realtime [random walks](https://en.wikipedia.org/wiki/Random_walk). Only the new values are drawn on each tick, while the old values are shifted to the left.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"viewof overlap = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber} band${form.i.valueAsNumber === 1 ? \"\" : \"s\"}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"height = data.length * (step + 1) + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"margin = ({top: 30, right: 10, bottom: 0, left: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"step = 29","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"color = i => d3[scheme][Math.max(3, overlap)][i + Math.max(0, 3 - overlap)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"x = d3.scaleTime()\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"y = d3.scaleLinear()\n .rangeRound([0, -overlap * step])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80).tickSizeOuter(0))\n .call(g => g.selectAll(\".tick\").filter(d => x(d) < margin.left || x(d) >= width - margin.right).remove())\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"data = {\n const n = 20, m = 964;\n const data = new Array(n);\n for (let i = 0; i < n; ++i) {\n const d = data[i] = new Float64Array(m);\n for (let j = 0, v = 0; j < m; ++j) {\n d[j] = v = walk(v);\n }\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"update = {\n const period = 250, m = data[0].length;\n const tail = data.map(d => d.subarray(m - 1, m));\n while (true) {\n const then = new Date(Math.ceil((Date.now() + 1) / period) * period);\n yield Promises.when(then, then);\n for (const d of data) d.copyWithin(0, 1, m), d[m - 1] = walk(d[m - 1]);\n x.domain([then - period * width, then]);\n chart.update(tail);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"function walk(v) {\n return Math.max(0, Math.min(1, v + (Math.random() - 0.5) * 0.05));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"