27:null 28:["$","title",null,{"children":"Realtime horizon chart | Benbinbin | Observable"}] 2d:Tba4,chart = { // Specify the chart’s dimensions. const marginTop = 30; const marginRight = 10; const marginBottom = 0; const marginLeft = 10; const step = 29; const height = data.length * (step + 1) + marginTop + marginBottom; // Create the scales. const x = d3.scaleTime().range([0, width]); const y = d3.scaleLinear().rangeRound([0, -bands * step]); const color = i => scheme[Math.max(3, bands)][i + Math.max(0, 3 - bands)]; // Create the container and append a canvas for each series. const div = d3.create("div").style("position", "relative"); const canvas = div.selectAll("canvas") .data(data) .enter().append("canvas") .attr("width", width) .attr("height", step) .style("position", "absolute") .style("image-rendering", "pixelated") .style("top", (d, i) => `${i * (step + 1) + marginTop}px`) .property("context", function() { return this.getContext("2d"); }) .each(horizon); // Create a SVG container for the axis and the interaction. const svg = div.append("svg") .attr("width", width) .attr("height", height) .style("position", "relative") .style("font", "10px sans-serif"); // Create a container for the axis. const gX = svg.append("g") .attr("transform", `translate(0,${marginTop})`); // Create the y axis. svg.append("g") .selectAll("text") .data(data) .join("text") .attr("x", 4) .attr("y", (d, i) => (i + 0.5) * (step + 1) + marginTop) .attr("dy", "0.35em") .text((d, i) => i); // Create a moving rule that follows the mouse. const rule = svg.append("line") .attr("stroke", "#000") .attr("y1", marginTop - 6) .attr("y2", height - marginBottom - 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); }); // This function draws each band in turn. There is no need to clip, since we’re working on // a canvas. 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 < bands; ++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(); } } return Object.assign(div.node(), { update: (data, {then, period}) => { canvas.data(data).each(horizon); x.domain([then - period * width, then]); gX .call(d3.axisTop(x).ticks(width / 80).tickSizeOuter(0)) .call(g => g.selectAll(".tick").filter(d => x(d) < marginLeft || x(d) >= width - marginRight).remove()) .call(g => g.select(".domain").remove()); } }); }2e:[] 2b:{"id":"29d65ada8994e0b8","slug":null,"title":"Realtime horizon chart","thumbnail":"140a620ef4536ca1b729010fdfa6ec143e03af2b202af5fa871b99ba51b598ca","access_level":"public","create_time":"$D2024-08-25T16:07:28.730Z","update_time":"$D2024-08-25T16:07:28.730Z","view_time":null,"first_public_time":"$D2024-08-25T16:07:28.730Z","has_unpublished_edits":null,"fork":{"id":"5ba5faad224a4840","slug":"realtime-horizon-chart","title":"Realtime horizon chart","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":"starter_2024"},"version":748,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null}],"members":[{"type":"team","id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":"starter_2024","role":"editor"},{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null,"role":"editor"}],"comments":[{"id":"e94131fc5ad908a7","reply_to_id":null,"content":"* 使用 Canvas 绘制实时数据流\n* 可视化图像的类型是 horizon chart 地平线图，可以参考另一个 Notebook https://observablehq.com/@benbinbin/horizon-chart 对于如何绘制静态的地平线图有详细的解释","create_time":"$D2024-09-08T03:22:27.164Z","update_time":"$D2024-09-08T03:23:51.415Z","resolved":false,"user":{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"e16ec67d40817a78","slug":"area-chart","title":"Area Chart","owner":{"id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin"}},"type":"notebook","body":{"title":"Realtime horizon chart","cells":[{"id":0,"value":"

Realtime horizon chart

D3 › Gallery

\n\n# Realtime horizon chart\n\nThis [horizon chart](/@d3/horizon-chart/2?intent=fork) 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":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"viewof scheme = Inputs.select(\n new Map([\n [\"Blues\", d3.schemeBlues],\n [\"Greens\", d3.schemeGreens],\n [\"Greys\", d3.schemeGreys],\n [\"Oranges\", d3.schemeOranges],\n [\"Purples\", d3.schemePurples],\n [\"Reds\", d3.schemeReds],\n [\"BuGn\", d3.schemeBuGn],\n [\"BuPu\", d3.schemeBuPu],\n [\"GnBu\", d3.schemeGnBu],\n [\"OrRd\", d3.schemeOrRd],\n [\"PuBu\", d3.schemePuBu],\n [\"PuBuGn\", d3.schemePuBuGn],\n [\"PuRd\", d3.schemePuRd],\n [\"RdPu\", d3.schemeRdPu],\n [\"YlGn\", d3.schemeYlGn],\n [\"YlGnBu\", d3.schemeYlGnBu],\n [\"YlOrBr\", d3.schemeYlOrBr],\n [\"YlOrRd\", d3.schemeYlOrRd]\n ]),\n {label: \"Color scheme\", value: d3.schemeGreens}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"viewof bands = Inputs.range([1, 9], {value: 7, step: 1, label: \"Bands\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$2d","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 chart.update(tail, {then, period});\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"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"