2c: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()); } }); }2d:[] 2a:{"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) 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"},{"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"},{"id":159,"value":"viewof bands = Inputs.range([1, 9], {value: 7, step: 1, label: \"Bands\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$2c","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 chart.update(tail, {then, period});\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"}],"files":"$W2d","stdlib":"1","titling":"auto"}