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;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.