25:["$","title",null,{"children":"Time-Stripe | PSE | Observable"}] 4c:T1ee1,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); const yIntervals = marginTop + 10; const yEvents = marginTop + 80; const stripeHeight = 60; var intervalWidth = (dataIS.length === 0) ? 1 : (combScale.range()[1]-combScale.range()[0])/dataIS.length; svg.append("text").text("Intervals") .attr("id", "laabel") .attr("x", 3).attr("y", yIntervals + marginTop); svg.append("text").text("Events") .attr("id", "laabel") .attr("x", 3).attr("y", yEvents + marginTop); // Add Data rectangles const mIntervals = svg .append("g") .classed("mIntervals", true) .selectAll("rect .mIntervals") .data(dataIS.slice(0, -1)) .join("rect") .attr("y", yIntervals) .attr("height", stripeHeight) .attr("width", intervalWidth) .attr("fill", (d) => (d.DataID === 0 ? "#2ecc71" : "#e74c3c")) .attr("opacity", 1); const mEvents = svg .append("g") .classed("mEvents", true) .selectAll("rect .mEvents") .data(data.slice(0, -1)) .join("rect") .attr("y", yEvents) .attr("height", stripeHeight) .attr("fill", (d) => (d.EventValue ? "#2ecc71" : "#e74c3c")) .attr("opacity", 1); // Append the horizontal axis. const gx = svg.append("g").classed("xAxis",true) .attr("transform", `translate(0,${height - marginBottom })`) .call(xAxis, combScale); // Create a group for the dimension elements const dimensionGroup = svg.append('g') .attr('class', 'dimension-group') .style('display', 'none'); // Hidden initially // When zooming, redraw the area and the x axis. function zoomed(event) { dimensionGroup.style('display', 'none'); // erase the dimension const xz = event.transform.rescaleX(combScale); mEvents .attr("x", (d) => xz(d.ts)) .attr("width", (d, i) => xz(data[i + 1].ts) - xz(d.ts)); mIntervals .attr("x", (d) => xz(d.tsEnd)); gx.call(xAxis, xz); }; // Create the zoom behavior. const zoom = d3.zoom() .scaleExtent([1, 32]) .extent([ [marginLeft, 0], [width - marginRight, height] ]) .translateExtent([ [marginLeft, -Infinity], [width - marginRight, Infinity] ]) .on("zoom", zoomed); // Initial zoom. svg .call(zoom) .transition() .duration(750) .call(zoom.scaleTo, 1, [combScale(data[0].ts), 0]); //--------------------------- // Add tooltips //--------------------------- const tooltip = svg.append("text") .classed("tooltip", true) .attr("x", (width - marginRight)/5).attr("y", marginTop); // Tooltips contain a time value formatted here const formatTime = d3.utcFormat("%B %d, %Y %I:%M:%S %p"); svg.selectAll("g.mIntervals rect") .on("mouseover", function(event, d) { tooltip.transition() .duration(200) .style("opacity", 1); tooltip.html(`Time: ${formatTime(d.tsEnd)} State: ${d.DataID === 0 ? "Up" : "Down"}; DataID=${d.DataID}; (${d.Description})`) .style("display", "block") ; }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); }); svg.selectAll("g.mEvents rect") .on("mouseover", function(event, d) { tooltip.transition() .duration(200) .style("opacity", 1); tooltip.html(`Time: ${formatTime(d.ts)}
State: ${d.EventValue ? "Up" : "Down"}; Duration: ${d.Minutes} min`) .style("display", "block") ; }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); }); //--------------------------- // Create dimension line elements const verticalLine1 = dimensionGroup.append('line') .attr('class', 'dimension-line vertical'); const verticalLine2 = dimensionGroup.append('line') .attr('class', 'dimension-line vertical'); const horizontalLine = dimensionGroup.append('line') .attr('class', 'dimension-line horizontal'); const dimensionText = dimensionGroup.append('text') .attr('class', 'dimension-text'); // Arrow marker definitions svg.append('defs').selectAll('marker') .data(['start', 'end']) .enter() .append('marker') .attr('id', d => `arrow-${d}`) .attr('viewBox', '0 -5 10 10') .attr('refX', d => d === 'start' ? 0 : 10) .attr('refY', 0) .attr('markerWidth', 6) .attr('markerHeight', 6) .attr('orient', 'auto') .append('path') .attr('d', d => d === 'start' ? 'M10,-5L0,0L10,5' : 'M0,-5L10,0L0,5') .attr('fill', '#666'); // Drag behavior let dragStart = null; let dragEnd = null; const drag = d3.drag() .filter(event => event.ctrlKey) // Only allow drag when Ctrl is pressed .on('start', dragStarted) .on('drag', dragging) .on('end', dragEnded); svg.on('mousemove', function(event) { if (event.ctrlKey) { d3.select(this).style('cursor', 'crosshair'); // Change cursor when Ctrl is pressed } else { d3.select(this).style('cursor', 'default'); } }); function dragStarted(event) { dragStart = combScale.invert(event.x); dimensionGroup.style('display', 'block'); } function dragging(event) { dragEnd = combScale.invert(event.x); updateDimensionLines(event.x, event.y); } function dragEnded(event) { // Keep dimension visible after drag } function updateDimensionLines(currentX, currentY) { const startX = combScale(dragStart); const endX = currentX; const centerY = 25; //currentY - 30; // Offset above the drag point // Update vertical lines verticalLine1 .attr('x1', startX) .attr('y1', currentY) .attr('x2', startX) .attr('y2', centerY); verticalLine2 .attr('x1', endX) .attr('y1', currentY) .attr('x2', endX) .attr('y2', centerY); // Update horizontal dimension line with arrows horizontalLine .attr('x1', startX) .attr('y1', centerY) .attr('x2', endX) .attr('y2', centerY) .attr('marker-start', 'url(#arrow-start)') .attr('marker-end', 'url(#arrow-end)'); // Update dimension text const duration = Math.abs(dragEnd - dragStart); const formattedDuration = formatDuration(duration); dimensionText .attr('x', (startX + endX) / 2) .attr('y', centerY - 5) .attr('text-anchor', 'middle') .text(formattedDuration); } // Helper function to format duration function formatDuration(milliseconds) { const seconds = milliseconds / 1000; const minutes = seconds / 60; const hours = minutes / 60; if (hours >= 1) { return `${Math.round(hours * 10) / 10}h`; } else if (minutes >= 1) { return `${Math.round(minutes)}m`; } else { return `${Math.round(seconds)}s`; } } // CSS styles const styles = ` .dimension-line { stroke: #666; stroke-width: 1; stroke-dasharray: 4,4; } .dimension-text { font-size: 18px; fill: #666; } .tooltip { background-color: white; border: none; border-radius: 5px; padding: 15px; min-width: 400px; text-align: left; color: black; } #laabel { color: black; font-size: 22px; } `; // Add styles to document const styleSheet = document.createElement('style'); styleSheet.innerText = styles; document.head.appendChild(styleSheet); // Apply drag behavior svg.call(drag); return svg.node(); }4d:[{"id":"fc7930097d5107b6385428c50ec6d2b8ad073a38504c36dcf0e35c400749fe77d4f6d9ef22702cd1e41298928a501b32361ed26e0d730b79bcb32a32366a1b58","href":"https://static.observableusercontent.com/files/fc7930097d5107b6385428c50ec6d2b8ad073a38504c36dcf0e35c400749fe77d4f6d9ef22702cd1e41298928a501b32361ed26e0d730b79bcb32a32366a1b58","name":"OutageIntervals.json","type":"application/json","lastModified":1749492546977.145,"size":1863523},{"id":"6289f57910d23f81f9ad65ef58c38bc862a64e9abf694ed7abba61a0ae6f4042472d8f545125b71729e27311931f954348fa2224a4aa22154d033efcd457f6e2","href":"https://static.observableusercontent.com/files/6289f57910d23f81f9ad65ef58c38bc862a64e9abf694ed7abba61a0ae6f4042472d8f545125b71729e27311931f954348fa2224a4aa22154d033efcd457f6e2","name":"Outages.json","type":"application/json","lastModified":1749494192214.418,"size":206465},{"id":"486727e3706d392c47ff9a71084e6da8fa5c6fd614466b24ac6911984763f957a2018aa6b4069109dd0a27b6af3cb39e9dc378ab9c3627d659e5eae46b764caf","href":"https://static.observableusercontent.com/files/486727e3706d392c47ff9a71084e6da8fa5c6fd614466b24ac6911984763f957a2018aa6b4069109dd0a27b6af3cb39e9dc378ab9c3627d659e5eae46b764caf","name":"Outages@4.json","type":"application/json","lastModified":1749750723251.302,"size":250261},{"id":"d61d3c1aa8b5e43e391a9a7d373dac23b46753795196ff9020a291a671e2633d9e36d8e65a152e027fa9617dd387a4fbddfdfb2e6fe871995bbe34c20841d325","href":"https://static.observableusercontent.com/files/d61d3c1aa8b5e43e391a9a7d373dac23b46753795196ff9020a291a671e2633d9e36d8e65a152e027fa9617dd387a4fbddfdfb2e6fe871995bbe34c20841d325","name":"OutageIntervals@5.json","type":"application/json","lastModified":1749750747707.099,"size":1405465},{"id":"85b44d85d2e9d2b59d49c7ba658ccf66f0ed9011849efee534663667b0f2401c1096f3e28e9c021d4db57fd166bf55a2a67a4580a6e78e83d5c359c345970963","href":"https://static.observableusercontent.com/files/85b44d85d2e9d2b59d49c7ba658ccf66f0ed9011849efee534663667b0f2401c1096f3e28e9c021d4db57fd166bf55a2a67a4580a6e78e83d5c359c345970963","name":"Outages@1.json","type":"application/json","lastModified":1749603068611.639,"size":897},{"id":"85b44d85d2e9d2b59d49c7ba658ccf66f0ed9011849efee534663667b0f2401c1096f3e28e9c021d4db57fd166bf55a2a67a4580a6e78e83d5c359c345970963","href":"https://static.observableusercontent.com/files/85b44d85d2e9d2b59d49c7ba658ccf66f0ed9011849efee534663667b0f2401c1096f3e28e9c021d4db57fd166bf55a2a67a4580a6e78e83d5c359c345970963","name":"Outages@2.json","type":"application/json","lastModified":1749603142392.89,"size":897},{"id":"97e1bf5026ee2b64b85d6491c1243f66145bf5427b78791ce5793bfa871a21de5e46a3d61be6a5699e63e3dccb75f6a9d675b4cd2b8be30256754af55efe4c0d","href":"https://static.observableusercontent.com/files/97e1bf5026ee2b64b85d6491c1243f66145bf5427b78791ce5793bfa871a21de5e46a3d61be6a5699e63e3dccb75f6a9d675b4cd2b8be30256754af55efe4c0d","name":"OutageIntervals@1.json","type":"application/json","lastModified":1749603146048.8,"size":5249261},{"id":"97e1bf5026ee2b64b85d6491c1243f66145bf5427b78791ce5793bfa871a21de5e46a3d61be6a5699e63e3dccb75f6a9d675b4cd2b8be30256754af55efe4c0d","href":"https://static.observableusercontent.com/files/97e1bf5026ee2b64b85d6491c1243f66145bf5427b78791ce5793bfa871a21de5e46a3d61be6a5699e63e3dccb75f6a9d675b4cd2b8be30256754af55efe4c0d","name":"OutageIntervals@2.json","type":"application/json","lastModified":1749603211164.009,"size":5249261},{"id":"97e1bf5026ee2b64b85d6491c1243f66145bf5427b78791ce5793bfa871a21de5e46a3d61be6a5699e63e3dccb75f6a9d675b4cd2b8be30256754af55efe4c0d","href":"https://static.observableusercontent.com/files/97e1bf5026ee2b64b85d6491c1243f66145bf5427b78791ce5793bfa871a21de5e46a3d61be6a5699e63e3dccb75f6a9d675b4cd2b8be30256754af55efe4c0d","name":"OutageIntervals@3.json","type":"application/json","lastModified":1749603263583.826,"size":5249261},{"id":"97e1bf5026ee2b64b85d6491c1243f66145bf5427b78791ce5793bfa871a21de5e46a3d61be6a5699e63e3dccb75f6a9d675b4cd2b8be30256754af55efe4c0d","href":"https://static.observableusercontent.com/files/97e1bf5026ee2b64b85d6491c1243f66145bf5427b78791ce5793bfa871a21de5e46a3d61be6a5699e63e3dccb75f6a9d675b4cd2b8be30256754af55efe4c0d","name":"OutageIntervals@4.json","type":"application/json","lastModified":1749603341310.407,"size":5249261},{"id":"85b44d85d2e9d2b59d49c7ba658ccf66f0ed9011849efee534663667b0f2401c1096f3e28e9c021d4db57fd166bf55a2a67a4580a6e78e83d5c359c345970963","href":"https://static.observableusercontent.com/files/85b44d85d2e9d2b59d49c7ba658ccf66f0ed9011849efee534663667b0f2401c1096f3e28e9c021d4db57fd166bf55a2a67a4580a6e78e83d5c359c345970963","name":"Outages@3.json","type":"application/json","lastModified":1749603381012.995,"size":897}] 48:{"id":"9ccfd3ed807f8f27","slug":"time-stripe","title":"Time-Stripe","thumbnail":"1a7823907b3cc54fbe93f5576c1c8cb2ba080d13c93b59d87600456d219974a1","access_level":"unlisted","create_time":"$D2025-05-15T16:38:05.132Z","update_time":"$D2025-06-17T19:17:30.306Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d37daf4729508864","login":"pse","name":"PSE","avatar_url":"https://avatars-next.observableusercontent.com/1e035ef260bc0d61f80ab451d61a3aaee36eaef1231629ab84e9d4ef6155c0e6","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":998,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7136b7bcfe4b4376","login":"shaun-merrill","name":"Shaun Merrill","avatar_url":"https://avatars-next.observableusercontent.com/314dcd8f13b32e1570eb666b725217104a484172ebf141f248c2ba7d580717cf","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7136b7bcfe4b4376","login":"shaun-merrill","name":"Shaun Merrill","avatar_url":"https://avatars-next.observableusercontent.com/314dcd8f13b32e1570eb666b725217104a484172ebf141f248c2ba7d580717cf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Time-Stripe","cells":[{"id":0,"value":"# Time-Stripe\n\n\n

BACKGROUND:

\nThis time-stripe visualizes when a system has gone DOWN (red) and when it has come back UP (green).\n\n

USAGE

\nPosition your cursor on the visualization.
\nUse the mouse-wheel, or spread two-fingers apart on the mouse-pad, or swipe down with two fingers to zoom.
\nHold the Ctrl button down, select on the stripe, and drag horizontally to measure a time duration in Seconds.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":" // Create the combined horizontal time scale.\n combScale = d3.scaleTime() \n .domain(\n [\n d3.min(\n [d3.min(dataIS, (d) => d.tsEnd),\n d3.min(data, (d) => d.ts)]\n ),\n d3.max(\n [d3.max(dataIS, (d) => d.tsEnd),\n d3.max(data, (d) => d.ts)]\n )\n ]\n )\n .range([marginLeft, width - marginRight]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"// Create the horizontal axis generator, called at startup and when zooming.\nxAxis = (g, x) => g\n\t\t.call(d3.axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"width = 1000;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"height = 200;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"marginTop = 20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"marginBottom = 20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":" marginRight = 20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":" marginLeft = 80;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.EVENT_TIMESTAMP)]).nice()\n .range([height - marginBottom, marginTop]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"// Parse timestamps\nparseTime = d3.timeParse(\"%Y-%m-%dT%H:%M:%S\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"outageIntervals = FileAttachment(\"OutageIntervals@5.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"outages = FileAttachment(\"Outages@4.json\").json();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"dataIS = outageIntervals.Rows.sort((a,b) => d3.ascending(a.tsEnd, b.tsEnd));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"data = outages.Rows.sort((a,b) => d3.ascending(a.tsEnd, b.tsEnd));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"\n// Interpret .EventTimestamp to .ts in the Events data\n data.forEach(\n (d) => {\n d.ts = parseTime(d.EventTimestamp);\n }\n );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"// prep the outageIntervals\noutageIntervals.Rows.forEach(\n (d,i) => {\n d.tsStart = parseTime(d.IntervalStart);\n d.tsEnd = parseTime(d.IntervalEnd);\n d.tsNextEnd = (i < outageIntervals.TotalRows - 1) ? parseTime(dataIS[i+1].IntervalEnd) : d.tsEnd;\n });\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null