29:null 2a:["$","title",null,{"children":"Attack Flow: Matrix View | MITRE Center for Threat-Informed Defense | Observable"}] 2f:Tfba,attackMatrix = { if (groupedTechniques == null) { return html`

Select an Attack Flow to get started…

`; } // Control the geometry of the matrix. const cellWidth = 200; const headerHeight = 40; const cellHeight = 90; const cellSpacing = 3; // Display preferences const displayTacticIds = !!display.find(i => i === "Tactic IDs"); const displayTechniqueIds = !!display.find(i => i === "Technique IDs"); // Basic elements const root = d3.create("div") const svg = root.append("svg"); // Create a for each tactic column const tacticGroups = svg .selectAll("g.tactic") .data(groupedTechniques) .join("g") .attr("class", "tactic") .attr("transform", (d, i) => `translate(${i * (cellWidth + cellSpacing)}, 0)`) // Create a header box for each tactic group. const headers = tacticGroups .append("g"); headers .append("rect") .attr("width", cellWidth) .attr("height", headerHeight) .attr("fill", "#0B2338"); headers .append("text") .attr("fill", "#F1F3F4") .attr("font-size", displayTacticIds ? "10pt" : "12pt") .attr("font-weight", "bold") .attr("text-anchor", "middle") .attr("x", cellWidth / 2) .attr("y", headerHeight - 15) .text(d => displayTacticIds ? `${d.tactic.id} – ${d.tactic.name}` : d.tactic.name); // Create technique boxes for each tactic group. const techniqueGroups = tacticGroups .selectAll("g.technique") .data(d => d.techniques) .join("g") .attr("class", "technique") .attr("transform", (d, i) => `translate(0, ${i * (cellHeight + cellSpacing) + headerHeight + cellSpacing})`); techniqueGroups .append("rect") .attr("fill", "#F1F3F4") .attr("width", cellWidth) .attr("height", cellHeight); const techniqueTexts = techniqueGroups .selectAll("text") .data(t => { return wrapText(displayTechniqueIds ? `${t.id} – ${t.name}: ${t.description}` : `${t.name}: ${t.description}`, 30, 5); }) .join("text") .attr("fill", "black") .attr("font-size", "10pt") .attr("font-weight", (d, i) => i < 2 ? "bold" : "regular") .attr("x", 5) .attr("y", (d, i) => 15 * (i + 1)) .text(d => d); // Resize the SVG to fit the content we just rendered const columnCount = groupedTechniques.length; const rowCount = Math.max(...groupedTechniques.map(g => g.techniques.length)); svg .attr("width", columnCount * (cellWidth + cellSpacing)) .attr("height", rowCount * (cellHeight + cellSpacing) + headerHeight + cellSpacing) 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-matrix.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:[{"id":"e837ab279c80d5a039cc683545f7066713f992f1e40086cb97e8890cd5fe75b2b59f3d6f3e5c65260e96562c6c4236c697d6fb142af356330d916faa6d3d0e7d","href":"https://static.observableusercontent.com/files/e837ab279c80d5a039cc683545f7066713f992f1e40086cb97e8890cd5fe75b2b59f3d6f3e5c65260e96562c6c4236c697d6fb142af356330d916faa6d3d0e7d","name":"tactics.json","type":"application/json","lastModified":1744679988154.127,"size":2941}] 2d:{"id":"11f0d433ededff7b","slug":null,"title":"Attack Flow: Matrix View","thumbnail":"e3e3491f0ffb0e2a3053cc062211a780d2f7ac97672e693e62358d6ca0b6e921","access_level":"public","create_time":"$D2025-04-14T16:05:56.013Z","update_time":"$D2025-07-22T17:27:48.033Z","view_time":null,"first_public_time":"$D2025-07-03T15:04:06.087Z","fork":true,"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":559,"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":0,"collection":null,"type":"notebook","body":{"title":"Attack Flow: Matrix View","cells":[{"id":0,"value":"# Attack Flow: Matrix View","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"## Introduction\n\nOn this page, you can generate an ATT&CK matrix automatically from an Attack Flow.\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 tactic and technique IDs.** Next, upload that `.json` file here to generate a matrix view.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"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":502,"value":"viewof display = Inputs.checkbox([\"Tactic IDs\", \"Technique IDs\"], {label: \"Display Preferences:\", value: [\"Technique IDs\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"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":443,"value":"import {fullscreen} from \"@fil/fullscreen\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"data = uploadedFile ? uploadedFile.json() : null\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"tactics = FileAttachment(\"tactics.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"groupedTechniques = {\n if (!data) {\n return null\n };\n \n const actions = data.objects.filter(item => item.type === \"attack-action\");\n const grouped = {};\n\n actions.forEach(action => {\n if (!action[\"technique_id\"]) {\n return;\n }\n \n let tacticId = action[\"tactic_id\"] || \"(NA)\";\n const tactic = tactics[tacticId] || {\n id: tacticId,\n name: \"(Tactic Not Provided)\",\n order: 99,\n domain: null,\n }\n\n if (!grouped[tacticId]) {\n grouped[tacticId] = {\n tactic,\n techniques: new Array(),\n }\n }\n\n grouped[tacticId].techniques.push({\n id: action.technique_id,\n name: action.name,\n description: action.description,\n });\n });\n\n const tacticGroups = new Array();\n for (const [tacticId, data] of Object.entries(grouped)) {\n tacticGroups.push({\n tactic: data.tactic,\n techniques: data.techniques,\n });\n }\n tacticGroups.sort((a,b) => a.tactic.order - b.tactic.order);\n \n return tacticGroups;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"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":515,"value":"wrapText(\"T1047 – Windows Management Instrumentation: Invoke-TotalExec is used to push out the ransomware binary.\", 30, 5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"wrapText(\"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.\", 80, 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"