2c:T709,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", (event) => { const x = d3.pointer(event, 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; }2d:[] 2a:{"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"},{"id":285,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":14,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"height = data.length * (step + 1) + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"margin = ({top: 30, right: 10, bottom: 0, left: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"step = 29","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"color = i => d3[scheme][Math.max(3, overlap)][i + Math.max(0, 3 - overlap)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"x = d3.scaleTime()\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"y = d3.scaleLinear()\n .rangeRound([0, -overlap * step])","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2d","stdlib":"1","titling":"auto"}