graph = `
digraph {
edge [fontname="Courier"];
node [shape=plain, fontname="Courier"];
"Configuration State" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#2196f3" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["flag"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">Configuration State</TD></TR></TABLE>>];
"Dependency" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#2196f3" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["timeleft"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">Dependency</TD></TR></TABLE>>];
"System Element" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#2196f3" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["system"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">System Element</TD></TR></TABLE>>];
"Interface" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#2196f3" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["cycle"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">Interface</TD></TR></TABLE>>];
"Activity" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#2196f3" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["hammer"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">Activity</TD></TR></TABLE>>];
"RAID Item" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#795548" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["warning"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">RAID Item</TD></TR></TABLE>>];
"Client Requirement" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#689f38" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["filealt"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">Client Requirement</TD></TR></TABLE>>];
"Specification Requirement" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#689f38" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["task"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">Specification Requirement</TD></TR></TABLE>>];
"Guiding Principle" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#689f38" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["commentbubble"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">Guiding Principle</TD></TR></TABLE>>];
"Standard" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#689f38" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["gavel"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">Standard</TD></TR></TABLE>>];
"Specification Section" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#689f38" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["document"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">Specification Section</TD></TR></TABLE>>];
"Stakeholder" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#f44336" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["people"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">Stakeholder</TD></TR></TABLE>>];
"Person" [label=<<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD BORDER="3" COLOR="#ffffff00"><TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="ROUNDED" BGCOLOR="#f44336" WIDTH="41" HEIGHT="41" FIXEDSIZE="true"><TR><TD BORDER="6" COLOR="#ffffff00"><IMG SRC="`+icons["person"]+`" SCALE="TRUE"/></TD></TR></TABLE></TD></TR><TR><TD BORDER="3" COLOR="#ffffff00">Person</TD></TR></TABLE>>];
"Configuration State" -> "System Element" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>operates in</i></td><td></td><td></td></tr></table>> color="#2196f3;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"] [dir=back]
"System Element" -> "RAID Item" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>affects</i></td><td></td><td></td></tr></table>> color="#2196f3;0.5:#795548" fontcolor="#606060" fontsize="12pt"] [dir=back]
"Specification Requirement" -> "RAID Item" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>recorded in</i></td><td></td><td></td></tr></table>> color="#689f38;0.5:#795548" fontcolor="#606060" fontsize="12pt"] [dir=back]
"Interface" -> "RAID Item" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>affects</i></td><td></td><td></td></tr></table>> color="#2196f3;0.5:#795548" fontcolor="#606060" fontsize="12pt"] [dir=back]
"Guiding Principle" -> "Client Requirement" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>satisfies</i></td><td></td><td></td></tr></table>> color="#689f38;0.5:#689f38" fontcolor="#606060" fontsize="12pt"] [dir=back]
"Client Requirement" -> "Specification Requirement" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>satisfies</i></td><td></td><td></td></tr></table>> color="#689f38;0.5:#689f38" fontcolor="#606060" fontsize="12pt"] [dir=back]
"System Element" -> "System Element" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>part of</i></td><td></td><td></td></tr></table>> color="#2196f3;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"]
"System Element" -> "Interface" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>led by</i></td><td></td><td></td></tr></table>> color="#2196f3;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"] [dir=back]
"Specification Requirement" -> "Interface" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>addresses</i></td><td></td><td></td></tr></table>> color="#689f38;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"]
"Specification Requirement" -> "System Element" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>achieves</i></td><td></td><td></td></tr></table>> color="#689f38;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"] [dir=back]
"Stakeholder" -> "System Element" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>owns</i></td><td></td><td></td></tr></table>> color="#f44336;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"]
"Specification Section" -> "Specification Section" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>part of</i></td><td></td><td></td></tr></table>> color="#689f38;0.5:#689f38" fontcolor="#606060" fontsize="12pt"]
"Specification Section" -> "Specification Requirement" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>shows</i></td><td></td><td></td></tr></table>> color="#689f38;0.5:#689f38" fontcolor="#606060" fontsize="12pt"]
"Standard" -> "Specification Requirement" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>referenced by</i></td><td></td><td></td></tr></table>> color="#689f38;0.5:#689f38" fontcolor="#606060" fontsize="12pt"]
"Stakeholder" -> "RAID Item" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>owns</i></td><td></td><td></td></tr></table>> color="#f44336;0.5:#795548" fontcolor="#606060" fontsize="12pt"]
"System Element" -> "Interface" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>followed by</i></td><td></td><td></td></tr></table>> color="#2196f3;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"] [dir=back]
"Stakeholder" -> "Person" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>key contact</i></td><td></td><td></td></tr></table>> color="#f44336;0.5:#f44336" fontcolor="#606060" fontsize="12pt"] [dir=back]
"Stakeholder" -> "Person" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>part of</i></td><td></td><td></td></tr></table>> color="#f44336;0.5:#f44336" fontcolor="#606060" fontsize="12pt"]
"Dependency" -> "RAID Item" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>drives</i></td><td></td><td></td></tr></table>> color="#2196f3;0.5:#795548" fontcolor="#606060" fontsize="12pt"]
"Activity" -> "Dependency" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>led by</i></td><td></td><td></td></tr></table>> color="#2196f3;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"] [dir=back]
"Activity" -> "Dependency" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>followed by</i></td><td></td><td></td></tr></table>> color="#2196f3;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"] [dir=back]
"Configuration State" -> "Dependency" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>followed by</i></td><td></td><td></td></tr></table>> color="#2196f3;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"] [dir=back]
"Activity" -> "System Element" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>produces</i></td><td></td><td></td></tr></table>> color="#2196f3;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"]
"Stakeholder" -> "Activity" [label=<<table cellpadding='2ca02c' border='0' cellborder='0'><tr><td><i>delivers</i></td><td></td><td></td></tr></table>> color="#f44336;0.5:#2196f3" fontcolor="#606060" fontsize="12pt"]
}
`
adot = async function (strings) { // modified from https://observablehq.com/@magjac/d3-graphviz to incorporate teh addition of images
console.log('Running adot');
let string = strings[0] + "";
let i = 0;
let n = arguments.length;
var options = Object.assign({}, defaultOptions);
while (++i < n) {
if (arguments[i] instanceof Object) {
for (var option of Object.keys(arguments[i])) {
options[option] = arguments[i][option];
}
} else {
string += arguments[i] + "";
}
string += strings[i];
}
if (!this) {
var div = html`<div>`;
} else {
var div = this;
}
var graphviz = d3.select(div).graphviz(options);
var divSel = d3.select(div);
graphviz
.transition(function () {
return d3.transition("adot")
.duration(options.duration)
// ResizeObserver is currently only supported in Chrome.
// Make sure Observable notices cell hight changes during the transition by dispatching a load event.
// See also https://talk.observablehq.com/t/left-side-and-code-does-not-move-when-cell-content-height-changes-in-a-transition/780.
/*.tween("update", () => () => {
if (options.loadEvents) {
divSel.dispatch("load");
}
})*/;
});
Object.values(icons).forEach(icon => graphviz.addImage(icon, "52px", "52px"));
// graphviz.addImage(Object.values(icons)[0], "52px", "52px");
// graphviz.addImage(icons["hazard"], "80px", "80px");
// graphviz.addImage(icons["interface"], "52px", "52px");
await new Promise(function(resolve, reject) {
graphviz.renderDot(string, function () {
resolve(this);
});
});
return div;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
