broken account, please ignore - migrating
Public
Edited
Apr 28, 2023
1 fork
1 star
dot`digraph G {
a [label="Box 1.1\nUS Presidents"]
b [label="Box 1.2\nChildren of US Presidents"]
c [label="Box 1.3\nEducational Institutions"]
d [label="Box 1.4\nLocations of Institutions"]
a -> b [label="has child"]
b -> c [label="attended"]
c -> d [label="located at"]
}
`
svg`<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200">
<rect x="10" y="10" width="150" height="30" stroke="black" fill="white" />
<rect x="10" y="50" width="150" height="30" stroke="black" fill="white" />
<rect x="10" y="90" width="150" height="30" stroke="black" fill="white" />
<rect x="10" y="130" width="150" height="30" stroke="black" fill="white" />
<text x="20" y="30" font-family="Verdana" font-size="12">Box 1.1: US Presidents</text>
<text x="20" y="70" font-family="Verdana" font-size="12">Box 1.2: Children of US Presidents</text>
<text x="20" y="110" font-family="Verdana" font-size="12">Box 1.3: Educational Institutions</text>
<text x="20" y="150" font-family="Verdana" font-size="12">Box 1.4: Locations of Institutions</text>
<line x1="160" y1="25" x2="400" y2="25" stroke="black" />
<line x1="160" y1="65" x2="400" y2="65" stroke="black" />
<line x1="160" y1="105" x2="400" y2="105" stroke="black" />
</svg>
`
dot`digraph G {
graph [bgcolor="#ffffff", fontname="Verdana", fontsize="12"]
node [shape=box, style="filled", fillcolor="#ffffff", fontname="Verdana", fontsize="12"]
edge [fontname="Verdana", fontsize="10"]
// Main boxes with pastel backgrounds
subgraph cluster_1 {
bgcolor="#e0e0ff";
a [label="Box 1.1\nUS Presidents", fillcolor="#e0e0ff"]
}
subgraph cluster_2 {
bgcolor="#e0ffe0";
b [label="Box 1.2\nChildren of US Presidents", fillcolor="#e0ffe0"]
}
subgraph cluster_3 {
bgcolor="#ffe0e0";
c [label="Box 1.3\nEducational Institutions", fillcolor="#ffe0e0"]
}
subgraph cluster_4 {
bgcolor="#ffffe0";
d [label="Box 1.4\nLocations of Institutions", fillcolor="#ffffe0"]
}
// RDF-style subgraphs for entities
subgraph cluster_1_1 {
bgcolor="transparent";
president [label="ex:USPresident", fontcolor="#000080"]
}
subgraph cluster_2_1 {
bgcolor="transparent";
child [label="ex:Child", fontcolor="#008000"]
}
subgraph cluster_3_1 {
bgcolor="transparent";
institution [label="ex:EducationalInstitution", fontcolor="#800000"]
}
subgraph cluster_4_1 {
bgcolor="transparent";
place [label="ex:Place", fontcolor="#804000"]
}
// Edges between main boxes
a -> b [label="has child"]
b -> c [label="attended"]
c -> d [label="located at"]
// Edges between RDF-style subgraphs
president -> child [label="ex:parent", color="#008000"]
child -> institution [label="ex:attended", color="#800000"]
institution -> place [label="ex:location", color="#804000"]
}
`
dot`digraph G {
graph [bgcolor="#ffffff", fontname="Verdana", fontsize="12"]
node [shape=box, style="filled", fontname="Verdana", fontsize="12"]
edge [fontname="Verdana", fontsize="10"]
// Main boxes with pastel backgrounds
subgraph cluster_1 {
bgcolor="#e0e0ff";
a [label="Box 1.1\nUS Presidents", shape=none]
p1 [label="President 1", shape=oval, fontcolor="#000080"]
p2 [label="President 2", shape=oval, fontcolor="#000080"]
p3 [label="President 3", shape=oval, fontcolor="#000080"]
p4 [label="President 4", shape=oval, fontcolor="#000080"]
p5 [label="President 5", shape=oval, fontcolor="#000080"]
}
subgraph cluster_2 {
bgcolor="#e0ffe0";
b [label="Box 1.2\nChildren of US Presidents", shape=none]
c1 [label="Child 1", shape=oval, fontcolor="#008000"]
c2 [label="Child 2", shape=oval, fontcolor="#008000"]
c3 [label="Child 3", shape=oval, fontcolor="#008000"]
c4 [label="Child 4", shape=oval, fontcolor="#008000"]
}
subgraph cluster_3 {
bgcolor="#ffe0e0";
c [label="Box 1.3\nEducational Institutions", shape=none]
i1 [label="Institution 1", shape=oval, fontcolor="#800000"]
i2 [label="Institution 2", shape=oval, fontcolor="#800000"]
i3 [label="Institution 3", shape=oval, fontcolor="#800000"]
}
subgraph cluster_4 {
bgcolor="#ffffe0";
d [label="Box 1.4\nLocations of Institutions", shape=none]
l1 [label="Location 1", shape=oval, fontcolor="#804000"]
l2 [label="Location 2", shape=oval, fontcolor="#804000"]
}
// Thick black lines linking nodes to their common type
edge [style=bold, color="#000000"]
{rank=same; a -> p1 -> p2 -> p3 -> p4 -> p5}
{rank=same; b -> c1 -> c2 -> c3 -> c4}
{rank=same; c -> i1 -> i2 -> i3}
{rank=same; d -> l1 -> l2}
// Edges between main boxes
edge [style=solid, color="#000000"]
p1 -> c1
p2 -> c2
p3 -> c3
p4 -> c4
c1 -> i1
c2 -> i2
c3 -> i3
i1 -> l1
i2 -> l2
}`
dot`digraph G {
graph [bgcolor="#ffffff", fontname="Verdana", fontsize="12"]
node [style="filled", fontname="Verdana", fontsize="12"]
edge [fontname="Verdana", fontsize="10"]
// Box 1 - pale blue
subgraph cluster_1 {
bgcolor="#e0e0ff";
label="Box 1"
t1 [label="USPresident", shape=box, penwidth=3, fontcolor="#000080"]
b1n1 [label="Washington", shape=oval, penwidth=3]
b1n2 [label="Adams", shape=oval, penwidth=3]
b1n3 [label="Carter", shape=oval, penwidth=3]
}
// Box 2 - pale green
subgraph cluster_2 {
bgcolor="#e0ffe0";
label="Box 2"
t2 [label="Child", shape=box, penwidth=3, fontcolor="#008000"]
b2_copy_of_b1n3 [label="Carter", shape=oval, penwidth=3]
b2n8 [label="Amy", shape=oval, penwidth=3]
}
// Box 3 - pale red
subgraph cluster_3 {
bgcolor="#ffe0e0";
label="Box 3"
t3 [label="EducationalInstitution", shape=box, penwidth=3, fontcolor="#800000"]
b3_copy_of_b2n8 [label="Amy", shape=oval, penwidth=3]
b3n14 [label="School 1", shape=oval, penwidth=3]
}
// Thick black lines linking nodes to their common type
edge [style=bold, color="#000000"]
{rank=same; t1 -> b1n1 -> b1n2 -> b1n3}
{rank=same; t2 -> b2_copy_of_b1n3 -> b2n8}
{rank=same; t3 -> b3_copy_of_b2n8 -> b3n14}
// Edges within boxes
edge [style=solid, color="#000000"]
b2_copy_of_b1n3 -> b2n8 [label="hasChild"]
b3_copy_of_b2n8 -> b3n14 [label="attended"]
}
`
dot`digraph G {
graph [bgcolor="#ffffff", fontname="Verdana", fontsize="12"]
node [style="filled", fontname="Verdana", fontsize="12"]
edge [fontname="Verdana", fontsize="10"]
// Box 1 - pale blue
subgraph cluster_1 {
bgcolor="#e0e0ff";
label="Box 1"
t1 [label="USPresident", shape=box, penwidth=3, fontcolor="#000080"]
b1n1 [label="Washington", shape=oval, penwidth=3]
b1n2 [label="Adams", shape=oval, penwidth=3]
b1n3 [label="Carter", shape=oval, penwidth=3]
// Edges within Box 1
edge [style=solid, color="#000000", arrowhead="normal"]
b1n1 -> t1 [label="type"]
b1n2 -> t1 [label="type"]
b1n3 -> t1 [label="type"]
}
// Box 2 - pale green
subgraph cluster_2 {
bgcolor="#e0ffe0";
label="Box 2"
t2 [label="Child", shape=box, penwidth=3, fontcolor="#008000"]
b2_copy_of_b1n3 [label="Carter", shape=oval, penwidth=3]
b2n8 [label="Amy", shape=oval, penwidth=3]
// Edges within Box 2
edge [style=solid, color="#000000", arrowhead="normal"]
b2_copy_of_b1n3 -> t2 [label="type"]
b2n8 -> t2 [label="type"]
b2_copy_of_b1n3 -> b2n8 [label="hasChild"]
}
// Box 3 - pale red
subgraph cluster_3 {
bgcolor="#ffe0e0";
label="Box 3"
t3 [label="EducationalInstitution", shape=box, penwidth=3, fontcolor="#800000"]
b3_copy_of_b2n8 [label="Amy", shape=oval, penwidth=3]
b3n14 [label="School 1", shape=oval, penwidth=3]
// Edges within Box 3
edge [style=solid, color="#000000", arrowhead="normal"]
b3_copy_of_b2n8 -> t3 [label="type"]
b3n14 -> t3 [label="type"]
b3_copy_of_b2n8 -> b3n14 [label="attended"]
}
}
`
dot`digraph G {
graph [bgcolor="#ffffff", fontname="Verdana", fontsize="12"]
node [style="filled", fontname="Verdana", fontsize="12"]
edge [fontname="Verdana", fontsize="10"]
// Box 1 - pale blue
subgraph cluster_1 {
bgcolor="#e0e0ff";
label="Box 1"
t1 [label="USPresident", shape=box, penwidth=3, fontcolor="#000080"]
b1n1 [label="Washington", shape=oval, penwidth=3]
b1n2 [label="Adams", shape=oval, penwidth=3]
b1n3 [label="Carter", shape=oval, penwidth=3]
// Edges within Box 1
edge [style=bold, color="#000000", arrowhead="normal"]
b1n1 -> t1 [label="type"]
b1n2 -> t1 [label="type"]
b1n3 -> t1 [label="type"]
}
// Box 2 - pale green
subgraph cluster_2 {
bgcolor="#e0ffe0";
label="Box 2"
t2 [label="Person", shape=box, penwidth=3, fontcolor="#008000"]
b2_copy_of_b1n3 [label="Carter", shape=oval, penwidth=3]
b2n8 [label="Amy", shape=oval, penwidth=3]
b2n9 [label="John", shape=oval, penwidth=3]
// Edges within Box 2
edge [style=bold, color="#000000", arrowhead="normal"]
b2_copy_of_b1n3 -> b2n8 [label="hasChild"]
b2_copy_of_b1n3 -> b2n9 [label="hasChild"]
b2n8 -> t2 [label="type"]
b2n9 -> t2 [label="type"]
}
// Box 3 - pale red
subgraph cluster_3 {
bgcolor="#ffe0e0";
label="Box 3"
t3 [label="EducationalInstitution", shape=box, penwidth=3, fontcolor="#800000"]
b3_copy_of_b2n8 [label="Amy", shape=oval, penwidth=3]
b3_copy_of_b2n9 [label="John", shape=oval, penwidth=3]
b3n14 [label="School 1", shape=oval, penwidth=3]
b3n15 [label="College 1", shape=oval, penwidth=3]
// Edges within Box 3
edge [style=bold, color="#000000", arrowhead="normal"]
b3_copy_of_b2n8 -> b3n14 [label="attended"]
b3_copy_of_b2n9 -> b3n15 [label="attended"]
b3n14 -> t3 [label="type"]
b3n15 -> t3 [label="type"]
}
}
`
dot`digraph G {
graph [bgcolor="#ffffff", fontname="Verdana", fontsize="12", rankdir="TB"]
node [style="filled", fontname="Verdana", fontsize="12"]
edge [fontname="Verdana", fontsize="10"]
// Box 1 - pale blue
subgraph cluster_1 {
bgcolor="#e0e0ff";
label="Box 1"
t1 [label="USPresident", shape=box, penwidth=3, fontcolor="#000080"]
b1n1 [label="Washington", shape=oval, penwidth=3, fillcolor="skyblue"]
b1n2 [label="Adams", shape=oval, penwidth=3, fillcolor="palegreen"]
b1n3 [label="Carter", shape=oval, penwidth=3, fillcolor="sandybrown"]
b1n4 [label="Lincoln", shape=oval, penwidth=3, fillcolor="orchid"]
b1n5 [label="Roosevelt", shape=oval, penwidth=3, fillcolor="dodgerblue"]
// Edges within Box 1
edge [style=bold, color="#000000", arrowhead="normal"]
b1n1 -> t1 [label="type"]
b1n2 -> t1 [label="type"]
b1n3 -> t1 [label="type"]
b1n4 -> t1 [label="type"]
b1n5 -> t1 [label="type"]
}
// Box 2 - pale green
subgraph cluster_2 {
bgcolor="#e0ffe0";
label="Box 2"
t2 [label="Person", shape=box, penwidth=3, fontcolor="#008000"]
b2_copy_of_b1n3 [label="Carter", shape=oval, penwidth=3, fillcolor="sandybrown"]
b2_copy_of_b1n4 [label="Lincoln", shape=oval, penwidth=3, fillcolor="orchid"]
b2_copy_of_b1n5 [label="Roosevelt", shape=oval, penwidth=3, fillcolor="dodgerblue"]
b2n8 [label="Amy", shape=oval, penwidth=3, fillcolor="lightblue"]
b2n9 [label="John", shape=oval, penwidth=3, fillcolor="lightgreen"]
b2n10 [label="Robert", shape=oval, penwidth=3, fillcolor="lightsalmon"]
b2n11 [label="Alice", shape=oval, penwidth=3, fillcolor="mediumpurple"]
// Edges within Box 2
edge [style=bold, color="#000000", arrowhead="normal"]
b2_copy_of_b1n3 -> b2n8 [label="hasChild"]
b2_copy_of_b1n3 -> b2n9 [label="hasChild"]
b2_copy_of_b1n4 -> b2n10 [label="hasChild"]
b2_copy_of_b1n5 -> b2n11 [label="hasChild"]
b2n8 -> t2 [label="type"]
b2n9 -> t2 [label="type"]
b2n10 -> t2 [label="type"]
b2n11 -> t2 [label="type"]
}
// Box 3 - pale red
subgraph cluster_3 {
bgcolor="#ffe0e0";
label="Box 3"
t3 [label="EducationalInstitution", shape=box, penwidth=3, fontcolor="#800000"]
b3_copy_of_b2n8 [label="Amy", shape=oval, penwidth=3, fillcolor="lightblue"]
b3_copy_of_b2n9 [label="John", shape=oval, penwidth=3, fillcolor="lightgreen"]
b3_copy_of_b2n10 [label="Robert", shape=oval, penwidth=3, fillcolor="lightsalmon"]
b3_copy_of_b2n11 [label="Alice", shape=oval, penwidth=3, fillcolor="mediumpurple"]
b3n14 [label="School 1", shape=oval, penwidth=3]
b3n15 [label="College 1", shape=oval, penwidth=3]
b3n16 [label="School 2", shape=oval, penwidth=3]
b3n17 [label="College 2", shape=oval, penwidth=3]
// Edges within Box 3
edge [style=bold, color="#000000", arrowhead="normal"]
b3_copy_of_b2n8 -> b3n14 [label="attended"]
b3_copy_of_b2n9 -> b3n15 [label="attended"]
b3_copy_of_b2n10 -> b3n16 [label="attended"]
b3_copy_of_b2n11 -> b3n17 [label="attended"]
b3n14 -> t3 [label="type"]
b3n15 -> t3 [label="type"]
b3n16 -> t3 [label="type"]
b3n17 -> t3 [label="type"]
}
}
`
dot`digraph G {
graph [bgcolor="#ffffff", fontname="Verdana", fontsize="12", rankdir="TB"]
node [style="filled", fontname="Verdana", fontsize="12"]
edge [fontname="Verdana", fontsize="10"]
label = "Key: Types: USPresident, Person, EducationalInstitution; Properties: type, hasChild, attended (with from/until years)"
// Box 1
subgraph cluster_1 {
bgcolor="#e0e0ff";
label="Box 1"
t1 [label="USPresident", shape=box, penwidth=3, fontcolor="#000080"]
b1n1 [label="Washington", shape=oval, penwidth=3]
b1n2 [label="Adams", shape=oval, penwidth=3]
b1n3 [label="Carter", shape=oval, penwidth=3]
b1n4 [label="Reagan", shape=oval, penwidth=3]
b1n5 [label="Bush", shape=oval, penwidth=3]
edge [style=bold, color="#000000", arrowhead="normal"]
b1n1 -> t1 [label="type"]
b1n2 -> t1 [label="type"]
b1n3 -> t1 [label="type"]
b1n4 -> t1 [label="type"]
b1n5 -> t1 [label="type"]
}
// Box 2
subgraph cluster_2 {
bgcolor="#e0ffe0";
label="Box 2"
t2 [label="Person", shape=box, penwidth=3, fontcolor="#008000"]
b2_copy_of_b1n1 [label="Washington", shape=oval, penwidth=3]
b2_copy_of_b1n2 [label="Adams", shape=oval, penwidth=3]
b2_copy_of_b1n3 [label="Carter", shape=oval, penwidth=3]
b2_copy_of_b1n4 [label="Reagan", shape=oval, penwidth=3]
b2_copy_of_b1n5 [label="Bush", shape=oval, penwidth=3]
b2n8 [label="Amy", shape=oval, penwidth=3, fillcolor="lightblue"]
b2n9 [label="John", shape=oval, penwidth=3, fillcolor="palegreen"]
b2n10 [label="Robert", shape=oval, penwidth=3, fillcolor="lightsalmon"]
b2n11 [label="Alice", shape=oval, penwidth=3, fillcolor="mediumpurple"]
b2n12 [label="Mary", shape=oval, penwidth=3, fillcolor="palevioletred"]
b2n13 [label="James", shape=oval, penwidth=3, fillcolor="lightcoral"]
edge [style=bold, color="#000000", arrowhead="normal"]
b2_copy_of_b1n1 -> b2n8 [label="hasChild"]
b2_copy_of_b1n2 -> b2n9 [label="hasChild"]
b2_copy_of_b1n3 -> b2n10 [label="hasChild"]
b2_copy_of_b1n4 -> b2n11 [label="hasChild"]
// ... (previous Box 2 content)
b2_copy_of_b1n5 -> b2n12 [label="hasChild"]
b2_copy_of_b1n5 -> b2n13 [label="hasChild"]
edge [style=bold, color="#000000", arrowhead="normal"]
b2n8 -> t2 [label="type"]
b2n9 -> t2 [label="type"]
b2n10 -> t2 [label="type"]
b2n11 -> t2 [label="type"]
b2n12 -> t2 [label="type"]
b2n13 -> t2 [label="type"]
}
// Box 3
subgraph cluster_3 {
bgcolor="#ffffe0";
label="Box 3"
t3 [label="EducationalInstitution", shape=box, penwidth=3, fontcolor="#804000"]
b3_copy_of_b2n8 [label="Amy", shape=oval, penwidth=3, fillcolor="lightblue"]
b3_copy_of_b2n9 [label="John", shape=oval, penwidth=3, fillcolor="palegreen"]
b3_copy_of_b2n10 [label="Robert", shape=oval, penwidth=3, fillcolor="lightsalmon"]
b3_copy_of_b2n11 [label="Alice", shape=oval, penwidth=3, fillcolor="mediumpurple"]
b3n14 [label="College A", shape=oval, penwidth=3]
b3n15 [label="College B", shape=oval, penwidth=3]
b3n16 [label="College C", shape=oval, penwidth=3]
b3n17 [label="College D", shape=oval, penwidth=3]
b3n18 [label="College E", shape=oval, penwidth=3]
edge [style=bold, color="#000000", arrowhead="normal"]
b3_copy_of_b2n8 -> b3n14 [label="attended", taillabel="1990", headlabel="1994"]
b3_copy_of_b2n9 -> b3n15 [label="attended", taillabel="1980", headlabel="1984"]
b3_copy_of_b2n10 -> b3n16 [label="attended", taillabel="1975", headlabel="1979"]
b3_copy_of_b2n11 -> b3n17 [label="attended", taillabel="1990", headlabel="1994"]
b3_copy_of_b2n11 -> b3n18 [label="attended", taillabel="1994", headlabel="1998"]
edge [style=bold, color="#000000", arrowhead="normal"]
b3n14 -> t3 [label="type"]
b3n15 -> t3 [label="type"]
b3n16 -> t3 [label="type"]
b3n17 -> t3 [label="type"]
b3n18 -> t3 [label="type"]
}
}`
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.
