broken account, please ignore - migrating
Public
Edited
Apr 28, 2023
1 fork
1 star
generateDotGraph(presboxes.config)
[4, 64, 64].length
presboxes
function generateDotGraph(config) {
let dotGraph = "digraph G {\n rankdir=TB;\n";
//return config.length;
for (let i = 0; i < config.length; i++) {
dotGraph += `box ${i}`;
const box = config[i];
const boxId = `cluster_${i}`;
const bgColor = box.bgcolor;
const boxLabel = `Box ${i + 1}`;
const typeId = `t${i + 1}`;
const typeLabel = box.typeLabel;
dotGraph += ` subgraph ${boxId} {\n`;
dotGraph += ` bgcolor="${bgColor}";\n`;
dotGraph += ` label="${boxLabel}"\n`;
dotGraph += ` ${typeId} [label="${typeLabel}", shape=box, penwidth=3, fontcolor="#804000"]\n`;
for (const node of box.nodes) {
const style = node.isFocal ? "penwidth=3" : "penwidth=2";
const fillColor = node.fillColor ? `, fillcolor="${node.fillColor}"` : "";
dotGraph += ` ${node.id} [label="${node.label}", shape=oval${fillColor}, ${style}]\n`;
}
for (const edge of box.edges) {
const style = edge.isFocal ? "style=bold" : "style=italic";
const arrowhead = edge.arrowhead ? `arrowhead="${edge.arrowhead}"` : "";
const label = edge.label ? `label="${edge.label}"` : "";
const taillabel = edge.taillabel ? `taillabel="${edge.taillabel}"` : "";
const headlabel = edge.headlabel ? `headlabel="${edge.headlabel}"` : "";
dotGraph += ` edge [${style}, color="#000000", ${arrowhead}]\n`;
dotGraph += ` ${edge.source} -> ${edge.target} [${label}]\n`;
// dotGraph += ` ${edge.source} -> ${edge.target} [${label}, ${taillabel}, ${headlabel}]\n`;
}
dotGraph += " }\n";
}
dotGraph += "}";
return dotGraph;
}
presboxes = {
return {
config: [
{
bgcolor: "lightblue",
typeLabel: "USPresident",
nodes: [
{ id: "b1n1", label: "Washington", isFocal: true },
{ id: "b1n2", label: "Adams", isFocal: true },
{ id: "b1n3", label: "Carter", isFocal: true },
{ id: "b1n4", label: "Bush", isFocal: true }
],
edges: [
{
source: "b1n1",
target: "t1",
label: "type",
arrowhead: "vee",
isFocal: true
},
{
source: "b1n2",
target: "t1",
label: "type",
arrowhead: "vee",
isFocal: true
},
{
source: "b1n3",
target: "t1",
label: "type",
arrowhead: "vee",
isFocal: true
},
{
source: "b1n4",
target: "t1",
label: "type",
arrowhead: "vee",
isFocal: true
}
]
},
{
bgcolor: "lightgreen",
typeLabel: "Person",
nodes: [
{ id: "b2n1", label: "Washington", isFocal: false },
{ id: "b2n2", label: "Adams", isFocal: false },
{ id: "b2n3", label: "Carter", isFocal: false },
{ id: "b2n4", label: "Bush", isFocal: false },
{ id: "b2n5", label: "Amy", isFocal: true },
{ id: "b2n6", label: "John", isFocal: true }
],
edges: [
{
source: "b2n1",
target: "t2",
label: "type",
arrowhead: "vee",
isFocal: false
},
{
source: "b2n2",
target: "t2",
label: "type",
arrowhead: "vee",
isFocal: false
},
{
source: "b2n3",
target: "t2",
label: "type",
arrowhead: "vee",
isFocal: false
},
{
source: "b2n4",
target: "t2",
label: "type",
arrowhead: "vee",
isFocal: false
},
{
source: "b2n5",
target: "t2",
label: "type",
arrowhead: "vee",
isFocal: true
},
{
source: "b2n6",
target: "t2",
label: "type",
arrowhead: "vee",
isFocal: true
},
{
source: "b2n3",
target: "b2n5",
label: "hasChild",
arrowhead: "vee",
isFocal: true
},
{
source: "b2n4",
target: "b2n6",
label: "hasChild",
arrowhead: "vee",
isFocal: true
}
]
},
{
bgcolor: "lightyellow",
typeLabel: "EducationalOrganization",
nodes: [
{ id: "b3n1", label: "Amy", isFocal: false },
{ id: "b3n2", label: "John", isFocal: false },
{ id: "b3n3", label: "Harvard", isFocal: true },
{ id: "b3n4", label: "Yale", isFocal: true }
],
edges: [
{
source: "b3n1",
target: "t3",
label: "type",
arrowhead: "vee",
isFocal: false
},
{
source: "b3n2",
target: "t3",
label: "type",
arrowhead: "vee",
isFocal: false
},
{
source: "b3n3",
target: "t3",
label: "type",
arrowhead: "vee",
isFocal: true
},
{
source: "b3n4",
target: "t3",
label: "type",
arrowhead: "vee",
isFocal: true
},
{
source: "b3n1",
target: "b3n3",
label: "attended",
arrowhead: "vee",
isFocal: true
},
{
source: "b3n2",
target: "b3n4",
label: "attended",
arrowhead: "vee",
isFocal: true
}
]
}
]
};
}
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.
