29:null 2a:["$","title",null,{"children":"Attack Flow: Timeline | MITRE Center for Threat-Informed Defense | Observable"}] 2f:T1e95,chart = { if (actions === null) { return html`

Select an Attack Flow to get started…

`; } else if (actions.length == 0) { return html`

Error: the selected flow does not have any timestamps.

`; } // Display preferences const displayTechniqueIds = !!display.find((i) => i === "Technique IDs"); // Set up the chart const root = d3.create("div").style("overflow-x", "auto"); const svg = root.append("svg"); let width, height; if (orientation == "horizontal") { width = 1000; height = 900; } else { width = 1000; height = 1000; } let axisPosition; if (orientation == "horizontal") { axisPosition = height / 2; } else { axisPosition = width / 2; } const STEM_LENGTH = 50; const BOX_WIDTH = 180; const BOX_HEIGHT = 100; const BOX_PADDING = 10; const TEXT_WIDTH = 23; const MARGIN = 20; const positiveLanes = [[]]; const negativeLanes = [[]]; function getLane(lanes, a, b) { let currentLane = 0; let foundRow = false; while (currentLane < lanes.length) { let overlap = false; for (const [c, d] of lanes[currentLane]) { // if overlaps item in this lane, move over 1 lane and try again if ((a >= c && a <= d) || (b >= c && b <= d)) { overlap = true; break; } } if (!overlap) { // If this label doesn't overlap any others in its lane, add it to the // end and return the current lane. lanes[currentLane].push([a, b]); return currentLane; } currentLane += 1; } // If you get here, no suitable row was found. Add a new row. lanes.push([[a, b]]); return lanes.length - 1; } function getStemLength(d, i) { let stem; const labelOffset = labelOffsetScale(d.timestamp) * (orientation == "horizontal" ? BOX_WIDTH : BOX_HEIGHT); const start = dateScale(d.timestamp) - labelOffset; const end = start + (orientation == "horizontal" ? BOX_WIDTH : BOX_HEIGHT); let lane; if (i % 2 == 0) { lane = getLane(positiveLanes, start - BOX_PADDING, end + BOX_PADDING); } else { lane = getLane(negativeLanes, start - BOX_PADDING, end + BOX_PADDING); } stem = STEM_LENGTH + lane * ((orientation == "horizontal" ? BOX_HEIGHT : BOX_WIDTH) + BOX_PADDING); if (i % 2 == 0) { stem *= -1; } return stem; } // Create the main axis const axis = svg .append("line") .attr("stroke", timelineColor) .attr("stroke-width", timelineWidth); if (orientation == "horizontal") { axis .attr("x1", 0) .attr("y1", axisPosition) .attr("x2", width) .attr("y2", axisPosition); } else { axis .attr("x1", axisPosition) .attr("y1", 0) .attr("x2", axisPosition) .attr("y2", height); } const minDate = d3.min(actions, (a) => a.timestamp); const maxDate = d3.max(actions, (a) => a.timestamp); const dateScale = d3.scaleLinear( [minDate, maxDate], [0, orientation == "horizontal" ? width : height] ); const labelOffsetScale = d3.scaleLinear([minDate, maxDate], [-0.03, -0.97]); // Compute the stem lengths and then re-order the data by stem length // to ensure that longer stems don't overlap any boxes. const actionsWithStems = new Array(); for (let i=0; i < actions.length; i++) { const stem = getStemLength(actions[i], i); actionsWithStems.push({stem, ...actions[i]}); } actionsWithStems.sort((a, b) => Math.abs(b.stem) - Math.abs(a.stem)); console.log(actionsWithStems); // Create one group for each action const actionGroups = svg .selectAll("g.action") .data(actionsWithStems) .join("g") .attr("class", "action") .attr("transform", (d) => { let dx, dy; if (orientation == "horizontal") { dx = dateScale(d.timestamp); dy = axisPosition; } else { dx = axisPosition; dy = dateScale(d.timestamp); } return `translate(${dx}, ${dy})`; }); // Add the stem lines that go from the axis to the labels actionGroups .append("line") .attr("x1", 0) .attr("x2", orientation == "vertical" ? (d) => d.stem : 0) .attr("y1", 0) .attr("y2", orientation == "horizontal" ? (d) => d.stem : 0) .attr("stroke", labelOutlineColor) .attr("stroke-width", labelLineWidth); // Add the labels const labels = actionGroups .append("g") .attr("class", "label") .attr("transform", (d, i) => { let dx, dy; if (orientation == "horizontal") { dx = labelOffsetScale(d.timestamp) * BOX_WIDTH; dy = d.stem - (d.stem < 0 ? BOX_HEIGHT : 0); } else { dx = d.stem - (d.stem < 0 ? BOX_WIDTH : 0); dy = labelOffsetScale(d.timestamp) * BOX_HEIGHT; } return `translate(${dx}, ${dy})`; }); labels .append("rect") .attr("width", BOX_WIDTH) .attr("height", BOX_HEIGHT) .attr("stroke", labelOutlineColor) .attr("stroke-width", labelLineWidth) .attr("fill", labelBackgroundColor); labels .selectAll("text") .data((a) => [ a.datetime, ...wrapText( displayTechniqueIds ? `${a.tid} – ${a.technique}: ${a.description}` : `${a.technique}: ${a.description}`, TEXT_WIDTH, 4 ) ]) .join("text") .attr("x", 7) .attr("y", (d, i) => 20 + i * 17) .attr("fill", "black") .attr("font-size", "11pt") .attr("font-weight", (d, i) => (i < 2 ? "bold" : "regular")) .text((d) => d); // Add the marks on the axis actionGroups .append("circle") .attr("r", 6) .attr("stroke", timelineColor) .attr("stroke-width", timelineWidth) .attr("fill", "white"); svg.attr("width", width).attr("height", height); let vx, vy, vw, vh; if (orientation == "horizontal") { vx = -MARGIN; vy = axisPosition - STEM_LENGTH - positiveLanes.length * (BOX_HEIGHT + BOX_PADDING); vw = width + MARGIN; vh = axisPosition + STEM_LENGTH + negativeLanes.length * (BOX_HEIGHT + BOX_PADDING) - vy; } else { vx = axisPosition - STEM_LENGTH - negativeLanes.length * (BOX_WIDTH + BOX_PADDING); vy = -MARGIN; vw = axisPosition + STEM_LENGTH + positiveLanes.length * (BOX_WIDTH + BOX_PADDING) - vx; vh = height + MARGIN; } svg.attr("viewBox", `${vx}, ${vy}, ${vw}, ${vh}`); const downloadButton = document.createElement("button"); downloadButton.appendChild(document.createTextNode("⬇️ Download SVG")); downloadButton.style.marginRight = "8px"; downloadButton.onclick = () => { const svgText = new XMLSerializer().serializeToString(svg.node()); const blob = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "attack-flow-timeline.svg"; a.click(); URL.revokeObjectURL(url); }; const fullScreenButton = document.createElement("button"); fullScreenButton.appendChild(document.createTextNode("↔️ Full Screen")); fullScreenButton.onclick = () => { if (document.fullscreenElement) { document.exitFullscreen(); } else { document.querySelector("#preview").requestFullscreen(); } }; return html`

${downloadButton} ${fullScreenButton}

${root.node()}

`; }30:[] 2d:{"id":"263cc424a77aacd5","slug":null,"title":"Attack Flow: Timeline","thumbnail":"197e059dc1ae72641ce7bb4881b7106f75562410b58fa47ccbb7953768c2f83e","access_level":"public","create_time":"$D2025-04-08T13:52:44.638Z","update_time":"$D2025-07-22T17:27:36.602Z","view_time":null,"first_public_time":"$D2025-07-03T15:03:57.268Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f0049cade5d2fe99","login":"center-for-threat-informed-defense","name":"MITRE Center for Threat-Informed Defense","avatar_url":"https://avatars-next.observableusercontent.com/3b469a4cc1bde42906cdf9cb8b1febfc36ddbfd46ac8a67b6d52081ac91c8e21","tier":"starter_2024"},"version":471,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c59e216253a2d162","login":"mehaase","name":"Mark E. Haase","avatar_url":"https://avatars-next.observableusercontent.com/8d4400329a9badef98ce12aebc71bb070afbfa4a6a54ddad5190fb0399a0d633","tier":null}],"members":[{"type":"team","id":"f0049cade5d2fe99","login":"center-for-threat-informed-defense","name":"MITRE Center for Threat-Informed Defense","avatar_url":"https://avatars-next.observableusercontent.com/3b469a4cc1bde42906cdf9cb8b1febfc36ddbfd46ac8a67b6d52081ac91c8e21","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c59e216253a2d162","login":"mehaase","name":"Mark E. Haase","avatar_url":"https://avatars-next.observableusercontent.com/8d4400329a9badef98ce12aebc71bb070afbfa4a6a54ddad5190fb0399a0d633","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Attack Flow: Timeline","cells":[{"id":0,"value":"# Attack Flow: Timeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"## Introduction\n\nOn this page, you can generate a timeline visualization automatically from an Attack Flow. The timeline is inspired by examples of timelines used in cyber threat reporting in the wild.\n\n## How to Use It\n\nFirst, open a flow in the Attack Flow Builder and choose \"File → Export STIX File\" to save the flow in `.json` format. **Note that the flow must contain execution start timestamps.** Next, upload that `.json` file here to generate a timeline.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"viewof uploadedFile = Inputs.file({\n label: \"Select an Attack Flow (.json)\",\n accept: \".json\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"viewof timelineColor = Inputs.color({label: \"Time Line color\", value: \"#005B94\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"viewof timelineWidth = Inputs.range([1, 5], {value: 3, step: 1, label: \"Time Line Width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"viewof labelOutlineColor = Inputs.color({label: \"Label outline\", value: \"#D4D4D3\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"viewof labelLineWidth = Inputs.range([1, 5], {value: 1, step: 1, label: \"Label line width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"viewof labelBackgroundColor = Inputs.color({label: \"Label background\", value: \"#F1F3F4\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"viewof display = Inputs.checkbox([\"Technique IDs\"], {label: \"Display Preferences:\", value: [\"Technique IDs\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"viewof timestampFormat = Inputs.select([\"date\", \"time\", \"datetime\"], {label: \"Timestamp format\", value: \"datetime\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"viewof orientation = Inputs.select([\"horizontal\", \"vertical\"], {label: \"Orientation\", value: \"horizontal\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"--- \n\n## Code 👩‍🔬\n\nEverything from here down is the support code used to run this page. If you are a developer, you may find this interesting, but for most audiences you can simply ignore it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"function wrapText(text, maxCols, maxRows) {\n // A naive approach to wrapping. It assumes that there will be\n // spaces in opportune places and never forces a line break.\n let startIdx = 0;\n let lastSpace = -1;\n let lines = new Array();\n\n for (let endIdx = 0; endIdx < text.length; endIdx++) {\n if (/\\s/.test(text.charAt(endIdx))) {\n lastSpace = endIdx;\n } else if (endIdx - startIdx >= maxCols) {\n lines.push(text.substring(startIdx, lastSpace));\n startIdx = lastSpace + 1;\n lastSpace = -1;\n }\n }\n lines.push(text.substring(startIdx));\n if (lines.length > maxRows) {\n lines = lines.slice(0, maxRows);\n if (lines[maxRows - 1].length > maxCols - 3) {\n lines[maxRows - 1] = lines[maxRows - 1].substring(0, maxCols - 3);\n }\n lines[maxRows - 1] += \"…\";\n }\n\n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"data = uploadedFile ? uploadedFile.json() : null\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"actions = {\n if (!data) {\n return null\n };\n \n const actionNodes = data.objects.filter(item => item.type === \"attack-action\");\n const actions = new Array();\n const grouped = {};\n\n for (const actionNode of actionNodes) {\n if (!actionNode[\"execution_start\"]) {\n continue;\n }\n\n const executionStart = new Date(actionNode[\"execution_start\"]);\n let datetime;\n if (timestampFormat == \"datetime\") {\n datetime = executionStart.toLocaleString();\n } else if (timestampFormat == \"date\") {\n datetime = executionStart.toLocaleDateString();\n } else {\n datetime = executionStart.toLocaleTimeString();\n }\n\n actions.push({\n timestamp: executionStart.getTime(),\n datetime,\n tid: actionNode[\"technique_id\"],\n technique: actionNode[\"name\"],\n description: actionNode[\"description\"],\n });\n };\n\n actions.sort((a,b) => a.timestamp - b.timestamp); \n return actions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"