31:T76d,# INCOSE Handbook N² Diagram Development For a discipline that is [pushing for a transformation into 'model-based' delivery](https://www.incose.org/about-incose/transformation) and [rife with different modelling standards](https://www.sebokwiki.org/wiki/Modeling_Standards), the International Council on Systems Engineering (INCOSE) official [Handbook](https://www.incose.org/products-and-publications/se-handbook) has some spectacularly poor diagrams, including the [N² Diagram](https://en.wikipedia.org/wiki/N2_chart) included in Appendix D. This is an issue that [has been noted previously](https://www.researchgate.net/publication/270219287_INCOSE_Systems_Engineering_Handbook-Visual_Enhancement_to_Support_Understanding), with some suggestions made for improvement, but the current version of the handbook (4th Edition) still has a relatively poor layout. Here we will produce some diagrams, based on the [underlying handbook data](https://github.com/johnwelford/incoseHandbookModel), to try to improve on this diagram and make the contents more accessible. ## Existing diagram The existing N² Diagram looks like this: ![image.png](${await FileAttachment("image.png").url()}) The abbreviated pink boxes on the diagonal are Systems Engineering processes (their full names are given on a separate page) and an "X" in a cell represents an input/output (or enabler or control) relationship between the processes on the given row/column. Specifically outputs are on the horizontal (coming *from* the process) and inputs are on the vertical (going *to* the process). The N² only provides a summary of the inputs and outputs between processes that are described in much more detail throughout the handbook. ## Recreating the diagram from a model In order to improve on the diagram let's first try to recreate it based on the underlying information contained throughout the rest of the handbook.32:T52b, ${processIO.map((d,y,i) => html` ${d.map((f,x) => (x==y) ? html`` : html``)} ` )}

${processes[y].Name}

${evenShorterName(processes[x].Name)}

y ? "inputAbove" : x${f.length>0 ? (x>y ? "⮧" : "⮤") : ""}

33:T10a7,interactiveN2 = html`

${processIO.map((d,y,i) => html` ${d.map((f,x) => { if (x==y) { return htl.html.fragment` `; } else if (f.length>0) { return htl.html.fragment` `; } else { return html``} })} ` )}

${evenShorterName(processes[x].Name)} ${processes[x].Name}

${x>y ? html` ⮧

${f.map(io => io.Name).join("
")}

` : html` ⮤

${f.map(io => io.Name).join("
")}

` }

`34:T4d5,function highlightRelated(event) { console.log(event); let target = event.target.localName=="td" ? event.target : event.relatedTarget; let processes = Array.from(target.classList).filter(d => !["io","process","above","below"].includes(d)) if (Array.from(event.target.classList).includes("process")) { // a process is highlighted processes.forEach(process => { document.querySelectorAll("table.interactive td.io."+process).forEach(ioCell => { // find all input/output cells referencing the process ioCell.classList.add("related"); // highlight input/output let relatedProcess = Array.from(ioCell.classList).filter(d => !["io",process,"above","below"].includes(d))[0]; document.querySelector("table.interactive td.process."+relatedProcess).classList.add("related"); // highlight related process }) }) } else if (Array.from(target.classList).includes("io")) { // an input/output is highlighted processes.forEach(process => { document.querySelectorAll("table.interactive td.process."+process).forEach(processCell => { // find both process cells providing/consuming the input/output processCell.classList.add("related"); // highlight input/output }) }) } }35:[{"id":"8ee3ddb6fcc2fc5a77e4eb83aeb8e0e8083d954323296ef83b780b65244c40108c5073c69fa5113894b81da319a18149b5bf9f15dbdf6f0bcbf02290519750b4","href":"https://static.observableusercontent.com/files/8ee3ddb6fcc2fc5a77e4eb83aeb8e0e8083d954323296ef83b780b65244c40108c5073c69fa5113894b81da319a18149b5bf9f15dbdf6f0bcbf02290519750b4","name":"image.png","type":"image/png","lastModified":1654757595279.894,"size":152031}] 2f:{"title":"INCOSE Handbook N² Diagram Development","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":329,"value":"\n \n ${processIO.map((d,y) => html`\n \n ${d.map((f,x) => (x==y) ? html`` : html``)}\n `\n )}\n \n

${shortenName(processes[x].Name)}

${(f.length)>0 ? \"X\" : \"\"}

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":326,"value":"## Making easy improvements\nPersonally I think this is pretty ugly and difficult to read. I assume it was made by manually entering data on a spreadsheet or an MS Word table, but even so there are a few basic changes that I think would make it a lot better.\n\nSpecific issues that could be resolved are:\n* The abbreviated names are hard to remember, leading to constant referencing between the previous page and this one – easily fixed by including the full names as an initial column.\n* The chosen abbreviations are further confused by forcing them all to capitals – by allowing lowercase it is clearer which are truncated and which are acronyms.\n* The direction of reading is hard to remember, as having a simple 'X' gives no directionality – easily fixed by replacing the crosses with unicode arrow symbols.\n* The heavy gridlines dominate the graphic – easily fixed by the use of a light grey.\n\nBelow is an improved version that fixes these issues.","pinned":false,"hidden":false,"mode":"md"},{"id":201,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":424,"value":"## Adding more details\nAs we now have the underlying data we can also make some more significant improvements by adding some interactivity to enhance readability and reveal the underlying data.","pinned":false,"hidden":false,"mode":"md"},{"id":751,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"## Further development\nThere are many further developments that could be made to this, some ideas are given below:\n* Add full lines between processes and inputs/outputs - this would require moving to a drawing format, rather than an html table.\n* interactively link to Input-Process-Output diagrams.\n* Show descriptions of each process.\n* Decompose processes into the activities that make them up - although input/outputs are not defined by the handbook on a per-activity basis.\n* Highlight the difference between Inputs/Outputs, Enablers and Controls.","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"#### Load data","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"entities = d3.csv(\"https://raw.githubusercontent.com/johnwelford/incoseHandbookModel/main/incoseHandbookEntities.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"relationships = d3.csv(\"https://raw.githubusercontent.com/johnwelford/incoseHandbookModel/main/incoseHandbookRelationships.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"#### Manipulate data","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"processes = entities.filter(d => d.Name==\"External\").concat(entities.filter(d => (d.Type==\"Process\" && d.Name!=\"External\")).sort((a, b) => Number(a.Section.split(\".\")[0])Number(b.Section.split(\".\")[0]) ? 1 : \n Number(a.Section.split(\".\")[1])Number(b.Section.split(\".\")[1]) ? 1 : 0));","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"iOEntityRelationships = entities.filter(d => (d.Type==\"Input/Output\" || d.Type==\"Enabler\" || d.Type==\"Control\")).map(io => {\n io.relationshipsFrom = relationships.filter(r => (r[\"To ID\"]==io.ID && r.Type==\"outputs\")).map(r => r[\"From ID\"])\n io.relationshipsTo = relationships.filter(r => (r[\"From ID\"]==io.ID && (r.Type==\"inputs into\" || r.Type==\"enables\" || r.Type==\"controls\"))).map(r => r[\"To ID\"])\n return io\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"processIO = processes.map(processOutput => \n processes.map(processInput => \n iOEntityRelationships.filter(io => io.relationshipsFrom.includes(processOutput.ID) && io.relationshipsTo.includes(processInput.ID))\n )\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"#### Highlighting functions","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"shortenName = function(name){\n if (name==\"Information Management\") return \"INFOM\"\n else if (name==\"Infrastructure Management\") return \"INFRAM\"\n else if (name.split(\" \").length>1) return name.split(\" \") // separate words\n .filter(d => ![\"and\",\"or\"].includes(d)) // remove joining words\n .map(d => d.substring(0, 1)) // take first letters\n .join(\"\") // merge letters\n .toUpperCase();\n else return [\"a\",\"e\",\"i\",\"o\",\"u\"].includes(name.substring(3, 4)) ? name.substring(0, 3).toUpperCase() : name.substring(0, 4).toUpperCase();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"evenShorterName = function(name){\n if (name==\"Information Management\") return \"Info.\"\n else if (name==\"Infrastructure Management\") return \"Infr.\"\n else if (name.split(\" \").length>1) return name.split(\" \") // separate words\n .filter(d => ![\"and\",\"or\"].includes(d)) // remove joining words\n .map(d => d.substring(0, 1)) // take first letters\n .join(\"\") // merge letters\n .substring(0, 3)\n .toUpperCase();\n else return name.substring(0, 3).concat(\".\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"function unhighlightRelated(event) {\n document.querySelectorAll(\"table.interactive td\").forEach(p => p.classList.remove(\"related\"));\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}