2c:null 2d:["$","title",null,{"children":"Ping chart | Thanh Tschoepe | Observable"}] 32:T1340,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); let gx = svg.append("g").call(xAxis, x); let gy = svg.append("g").call(yAxis, y); let pathG = svg.append("g").attr("clip-path", "url(#clip)"); let transformG = pathG.append("g"); const tooltip = new Tooltip(transformG); let p50G = transformG.append("g").attr("fill", "#0F3460"); let p90G = transformG.append("g").attr("fill", "#E94560"); let rawDataG = transformG.append("g").attr("fill", "#16213E"); let tooltipG = transformG .append("g") .attr("pointer-events", "all") .attr("fill", "none") .on("mouseleave", () => tooltip.hide()); let clipping = svg .append("defs") .append("clipPath") .attr("id", "clip") .append("rect") .attr("transform", `translate(${margin.left}, 0)`) .attr("width", width - margin.right - margin.left) .attr("height", height); let path = rawDataG .append("g") .append("path") .attr("opacity", 0.5) .attr("fill", "none") .attr("stroke", "#16213E") .attr("class", "line") .attr("stroke-width", "1"); let path50 = p50G .append("path") .attr("fill", "none") .attr("stroke", "#0F3460") .attr("class", "line") .attr("stroke-width", 1.5); let path90 = p90G .append("path") .attr("fill", "none") .attr("stroke", "#E94560") .attr("class", "line") .attr("stroke-width", 2); const zoom = d3 .zoom() .scaleExtent([1, 10]) .extent([ [margin.left, margin.top], [width - margin.right, height - margin.bottom] ]) .translateExtent([ [margin.left, margin.top], [width - margin.right, height - margin.bottom] ]); svg.call(zoom).transition().duration(750).call(zoom.scaleTo, 4, [0, 0]); let offsetX = 0; let zoomTransform = null; return Object.assign(svg.node(), { update(frame) { const newdata = getDataSlice(frame); const p50Data = getPDataSlice(frame, "p50"); const p90Data = getPDataSlice(frame, "p90"); const t = svg.transition().duration(delay).ease(d3.easeLinear); let xDomainShift = frame * delay; // calculate how many pixels the distance of frame-dragging every update. let newDomainX = defaultXDomain.map((a) => a + xDomainShift); let horizScale = x.domain(newDomainX); if (zoomTransform) { horizScale = zoomTransform.rescaleX(horizScale); newDomainX = horizScale.domain(); } let xRangeShift = horizScale(newDomainX[1]) - horizScale(newDomainX[1] - delay); let line = genLine(horizScale); // redraw domain gx.transition(t).call(xAxis, horizScale); gy.transition(t).call( yAxis, y.domain([0, d3.max(newdata, (d) => d.latency) + 100]).nice() ); // drag the frame to the left continuously to emulate continous line transformG .interrupt() .attr("transform", null) .transition(t) .attr("transform", `translate(-${xRangeShift}, 0)`); // update path rawDataG.select("path").datum(newdata).attr("d", line); p50G.select("path").datum(p50Data).attr("d", line); p90G.select("path").datum(p90Data).attr("d", line); // update circles rawDataG .selectAll("circle") .data(newdata) .join( (enter) => enter.append("circle"), (update) => update, (exit) => exit.remove() ) .attr("r", 1.5) .attr("cx", (d) => horizScale(d.ts)) .attr("cy", (d) => y(d.latency)); p50G .selectAll("circle") .data(p50Data) .join( (enter) => enter.append("circle"), (update) => update, (exit) => exit.remove() ) .attr("r", 3) .attr("cx", (d) => horizScale(d.ts)) .attr("cy", (d) => y(d.latency)); p90G .selectAll("circle") .data(p90Data) .join( (enter) => enter.append("circle"), (update) => update, (exit) => exit.remove() ) .attr("r", 3) .attr("cx", (d) => horizScale(d.ts)) .attr("cy", (d) => y(d.latency)); // update tooltip with latest data point let tooltipCb = (mouseAt) => tooltip.show( bisect(newdata, horizScale.invert(mouseAt)), horizScale, t ); svg.on("mousemove", (event) => { tooltipCb(event.offsetX); offsetX = event.offsetX; }); tooltipCb(offsetX); // update zoom function zoomed(event) { const xz = event.transform.rescaleX(x); zoomTransform = event.transform; line = genLine(xz); transformG .selectAll("circle:not(#tooltip-cir)") .attr("cx", (d) => xz(d.ts)); transformG.selectAll("path").attr("d", line); gx.call(xAxis, xz); } zoom.on("zoom", zoomed); } }); }33:T4dd,class Tooltip { constructor(parent) { this.g = parent .append("g") .attr("pointer-events", "none") .attr("display", "none") .attr("font-size", "10") .attr("font-family", "sans-serif") .attr("text-anchor", "middle"); this.g .append("rect") .attr("width", 1) .attr("height", height - margin.top) .attr("fill", "#12355B"); let textBox = this.g .append("g") .attr("transform", `translate(0, ${margin.top})`); textBox .append("rect") .attr("x", -29) .attr("width", 58) .attr("height", 15) .attr("rx", 3) .attr("ry", 3) .attr("fill", "#16213E"); textBox .append("text") .attr("id", "latency") .attr("fill", "white") .attr("y", 12); this.g .append("circle") .attr("id", "tooltip-cir") .attr("r", 6) .attr("fill", "#16213E"); } show(d, scaleX) { this.g.node().removeAttribute("display"); this.g.attr("transform", `translate(${scaleX(d.ts)}, 0)`); this.g.select("circle").attr("transform", `translate(0, ${y(d.latency)})`); this.g.select("#latency").text(`${d.latency.toFixed(2)} ms`); } hide() { this.g.attr("display", "none"); } }34:T952,# Resources I used the following guides to add parts of this chart together. - [This excellent guide by Mike on the trick to make the path animation appear continuously in](https://bost.ocks.org/mike/path/). Although there were problems with this trick in that the path transition was not smooth, even with the exact code. - This [comment](https://gist.github.com/mbostock/1642874#gistcomment-2046104) in the gist page for fixing the jarring transition problem. I use `transition.interrupt()` call instead of setting the duration to 0 instead. - [Example of styled axes with dashed lines](https://observablehq.com/@d3/styled-axes) - [Guide on d3 line, especially on making line curve](https://observablehq.com/@d3/d3-line#cell-244) - [Guide on adding tooltip to line](https://observablehq.com/@d3/learn-d3-interaction#cell-495) - [Example on horizontal only zoom](https://observablehq.com/@d3/zoomable-area-chart?collection=@d3/d3-zoom) ### Things I learned - Contrary to the example by Mike, I needed to frame drag quite many ``s and `s`. So apply the transformation on the container group instead. - The tooltip `` element is appended to the `transformG` group element so that the tooltip itself will be frame-dragged along with the lines and the dots. - Drawing the lines a couple data points ahead and then use`` to simulate the smoothly entrance of the line is a very neat trick. However, the `` element should be defined on the `