29:null 2a:["$","title",null,{"children":"Attack Flow: Treemap | MITRE Center for Threat-Informed Defense | Observable"}] 2f:T4d9,## Introduction On this page, you can visualize the distribution of techniques across multiple Attack Flows. The data is visualized in a Tree Map, where each technique present in a Flow has its own box, grouped by tactic. The size of each technique's box in the tree map is proportional to the number of times that technique appeared in the uploaded Flows. The color of each technique's box is related to the technique's score from the uploaded Navigator layer. Or, if you don't upload a Navigator layer, the colors will be determined by tactics. ## How to Use It First, upload as many Attack Flows as you'd like. Each one needs to be in STIX format (`.json`), which you can get by going to "File → Export STIX File" in Attack Flow Builder. Then, you can upload a Navigator Layer (`.json`) to pull scoring information from. If you upload a Navigator layer, you can select the colors for the start and end of your scoring range and select the midpoint using the slider. All items below the range midpoint will be colored with the start color and all items above the range midpoint will be colored with the end color. You can also toggle technique and tactic IDs and select the tiling method to customize the chart to your preferences. 30:Tf71,chart = { let outputContent = ''; if (!data || !root || !treeData || uploadedFiles.length < 1) { return html` Please select at least one Attack Flow file to get started… `; } // Append a tooltip. const format = d3.format(",d"); const svg = d3.create('svg') .style('font-family', 'sans-serif') .attr('width', width) .attr('height', height) const g = svg.append('g') .attr('class', 'treemap-container') // Place the labels for our tactics g.selectAll('text.tactic') // The data is the first "generation" of children .data( root.children ) .join('text') .attr('class', 'tactic') // The rest is just placement/styling .attr('x', d => d.x0) .attr('y', d => d.y0) .attr('dy', '-1em') .attr('dx', 3) .style('font-size', 12) .text(d => d.data.name) // Add a cell for each leaf of the hierarchy. const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); // Append a color rectangle. leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) // if technique scores exist, make color in range .attr('fill', d => getTechniqueColor(d)) .attr("fill-opacity", 0.6) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf.append('title') .text(d => `${ d.parent.data.name }-${ d.data.name }\nPrevalence: ${ d.value.toLocaleString()}\n${ getTechniqueScore(d)}`) // Append a clipPath to ensure text does not overflow. leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); // Append multiline text. The last line shows the value and has a specific formatting. leaf.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat("Prevalence: " + format(d.value)).concat(getTechniqueScore(d))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d) .style('font-size', 10); outputContent= svg.node(); // display graph to user under download/copy/fullscreen buttons if (outputContent) { // Export buttons const downloadButton = html``; downloadButton.onclick = () => { const svgText = new XMLSerializer().serializeToString(outputContent); 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-treemap.svg"; a.click(); URL.revokeObjectURL(url); }; const fullScreenButton = html`` fullScreenButton.onclick = () => { if (document.fullscreenElement) { document.exitFullscreen(); } else { document.querySelector("#preview").requestFullscreen(); } } return html`

${downloadButton} ${fullScreenButton}

${outputContent}

`; } }31:T5cd,treeData = { if (!data) { return null }; let actions = []; data.forEach(file => { actions.push(...file.objects.filter(item => item.type === "attack-action")); }) console.log("all actions", actions) const grouped = {}; console.log("action ", actions[1]) actions.forEach(action => { if (!action["technique_id"]) { return; } let tacticId = action["tactic_id"] || "(NA)"; const tactic = tactics[tacticId] || { id: tacticId, name: "(Tactic Not Provided)", order: 99, domain: null, } if (!grouped[tacticId]) { grouped[tacticId] = { tactic, techniques: new Array(), } } // increment matching techniques if (grouped[tacticId].techniques.find(t => t.name === getTechniqueLabel(action))) { grouped[tacticId].techniques.find(t => t.name === getTechniqueLabel(action)).value++; } else { grouped[tacticId].techniques.push({ id: action.technique_id, name: getTechniqueLabel(action), score: 1, value: 1, }); } }); const tacticGroups = new Array(); for (let i = 0; i < Object.entries(grouped).length; i++) { const [tacticId, data] = Object.entries(grouped)[i]; tacticGroups.push({ name: DISPLAY_TACTIC_IDS ? data.tactic.id + ": " + data.tactic.name : data.tactic.name, children: data.techniques, }); } return { name: "groupedTechniques", children: tacticGroups }; }32:[{"id":"e837ab279c80d5a039cc683545f7066713f992f1e40086cb97e8890cd5fe75b2b59f3d6f3e5c65260e96562c6c4236c697d6fb142af356330d916faa6d3d0e7d","href":"https://static.observableusercontent.com/files/e837ab279c80d5a039cc683545f7066713f992f1e40086cb97e8890cd5fe75b2b59f3d6f3e5c65260e96562c6c4236c697d6fb142af356330d916faa6d3d0e7d","name":"tactics-1.json","type":"application/json","lastModified":1747765135782.43,"size":2941}] 2d:{"id":"8c2d767bd699a8f7","slug":null,"title":"Attack Flow: Treemap","thumbnail":"6a94d1634a9a57041794d8bd09c5808a533879f6365192d39908b438c514d227","access_level":"public","create_time":"$D2025-05-20T18:18:55.782Z","update_time":"$D2025-07-22T17:26:41.009Z","view_time":null,"first_public_time":"$D2025-07-03T15:04:50.641Z","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":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":0,"collection":null,"type":"notebook","body":{"title":"Attack Flow: Treemap","cells":[{"id":0,"value":"# Attack Flow: Treemap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"viewof uploadedFiles = Inputs.file({\n label: \"Select Multiple Attack Flows (.json)\",\n accept: \".json\",\n multiple: true\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"viewof navigatorJson = Inputs.file({\n label: \"Upload your own navigator layer (.json)\",\n accept: \".json\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"viewof display = Inputs.checkbox([\"Technique IDs\", \"Tactic IDs\", \"Technique Scores\", \"Accessible Color Palette\"], {label: \"Display Preferences:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"viewof tile = Inputs.select(\n new Map([\n [\"binary\", d3.treemapBinary],\n [\"squarify\", d3.treemapSquarify],\n [\"slice-dice\", d3.treemapSliceDice]\n ]),\n {label: \"Tiling method\", value: d3.treemapBinary}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"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":76,"value":"width = 1200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"categoricalColorScale = d3.scaleOrdinal( d3.schemeSet2 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"divergingColorScale = d3.scaleDiverging(\n [MIN_MAX[0], (MIN_MAX[0] + MIN_MAX[1]) / 2, MIN_MAX[1]], \n d3.piecewise([\"#f51d22\", \"#fff\", ACCESSIBLE_PALETTE ? \"#1d2cec\" : \"#14b910\"])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"hierarchy = {\n // const dataCopy = await FileAttachment(\"treeData.json\").json()\n return d3.hierarchy( treeData )\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"root = treemap( hierarchy )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"treemap = d3.treemap()\n // set the size of the treemap render area\n .size([ width, height ])\n // set the padding between every rectangle in px\n .padding(2)\n // set the padding at the top of each group of rectangles\n // so that we can fit the tactic labels\n .paddingTop(10)\n // Set the generator to round pixel values to the nearest value\n // (makes things look better)\n .round(false)\n // Set the tree layout\n .tile(tile)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"tactics = FileAttachment(\"tactics-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"data = {\n let files = [];\n let promises = [];\n uploadedFiles.forEach(file => promises.push(file.json()));\n files = Promise.all(promises).then(data => {\n return data;\n })\n return files;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"DISPLAY_TECHNIQUE_IDS = display.find(i => i === \"Technique IDs\") ? true : false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"DISPLAY_TACTIC_IDS = display.find(i => i === \"Tactic IDs\") ? true : false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"ACCESSIBLE_PALETTE = display.find(i => i === \"Accessible Color Palette\") ? true : false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"SHOW_SCORES = display.find(i => i === \"Technique Scores\") ? true : false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"getTechniqueLabel = (action) => {\n return DISPLAY_TECHNIQUE_IDS ? action.technique_id + \": \" + action.name : action.name;\n // return action.technique_id;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"MIN_MAX = {\n // Pull gradient information from navigator layer\n if (navigatorJson) {\n const json = await navigatorJson.json();\n return [json.gradient.minValue, json.gradient.maxValue]\n }\n return [0,1];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"TECHNIQUE_LOOKUP = {\n if (navigatorJson) {\n const json = await navigatorJson.json();\n if (json.techniques) {\n return json.techniques;\n }\n else {\n return null;\n }\n }\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"function getTechniqueColor(t) {\n if (t && t.data && t.data.id && TECHNIQUE_LOOKUP && TECHNIQUE_LOOKUP.length > 1) {\n const technique = TECHNIQUE_LOOKUP.find(i => i.techniqueID === t.data.id);\n const score = technique ? technique.score : (MIN_MAX[1] - MIN_MAX[0]) / 2;\n return divergingColorScale(score);\n }\n else {\n return categoricalColorScale(t.parent.data.name);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"function getTechniqueScore(t) {\n if (t && t.data && t.data.id && TECHNIQUE_LOOKUP && TECHNIQUE_LOOKUP.length > 1 && SHOW_SCORES) {\n const technique = TECHNIQUE_LOOKUP.find(i => i.techniqueID === t.data.id);\n if ( technique && technique.score) {\n return \"Score: \" + technique.score;\n } \n }\n else {\n return '';\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"