25:["$","title",null,{"children":"Realtime horizon chart | marlow deneal | Observable"}] 49: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()); } }); }4a:[] 29:{"id":"6565b2b4e4e11aa4","slug":null,"title":"Realtime horizon chart","thumbnail":"ca5a7c3d0c9d2379cc9fb1eb65b301b8158c59585a39d7b5e6f6f0d14498e07b","access_level":"public","create_time":"$D2023-10-20T02:46:50.681Z","update_time":"$D2023-10-20T02:46:50.681Z","view_time":null,"first_public_time":"$D2023-10-20T02:46:50.681Z","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":"1dd8a7f5cbbe3892","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":748,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0fd8cc0ebc06ad87","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":null,"bio":"Traditional artist digital artist exploring the wonderful world of today through data visualization art ai exploring creating exploring creating more thank you d3 observable you help me to explore new possibilities 😀 ","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0fd8cc0ebc06ad87","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null