md`# Sample Pipeline`
dot`
digraph G {
graph [rankdir=TB]
node [shape="ellipse" fontname="verdana" fontsize=10]
node [style=filled fillcolor=white]
compound="true";
src [label="Source\nFiles" shape=folder]
subgraph cluster0 {
fontname="verdana" fontsize="10" style="filled" fillcolor="lightgrey" margin=20
label = "Parser\n(ANTLR)";
lex [label="Lexer"]
par [label="Parser"]
ast [label="Abstract\nSyntax\nTree"]
lex -> par -> ast
}
src -> lex [constraint=false]
subgraph cluster1 {
fontname="verdana" fontsize="10" style="filled" fillcolor="lightgrey" margin=20
label = "Transform\n(TypeScript)";
cst [label="Concrete\nSyntax\nTree" shape="ellipse"]
}
ast -> cst [constraint=false]
subgraph cluster4 {
fontname="verdana" fontsize="10" style="filled" fillcolor="lightgrey" margin=20
label = "Code Generator\n(TypeScript)";
js [label="JavaScript"]
}
cst -> js [lhead=cluster4 arrowhead=crow]
subgraph cluster2 {
fontname="verdana" fontsize="10" style="filled" fillcolor="lightgrey" margin=20
label = "VSCode Extension\n(TypeScript)";
node [shape="rectangle"]
scol [label="Syntax\nColouring"]
sc [label=" Syntax Checking \nError Reporting"]
ol [label="Outline"]
tt [label="Tooltips"]
scol -> sc [style=invis]
ol -> tt [style=invis]
}
cst -> sc [constraint=false lhead=cluster2 arrowhead=crow]
}`
dot`
digraph G {
rankdir="LR"
node [shape="ellipse" fontname="verdana" fontsize=10 margin=0.2]
node [style=filled fillcolor=white shape=Rectangle]
subgraph cluster_0 {
fontname="verdana"
fontsize=10
style=filled;
color=lightgrey;
margin=20
label="Pipeline"
s1 [label="Sensor 1" shape="ellipse"]
a1 [label="Activity 1"]
s2 [label="Sensor 2" shape="ellipse"]
s3 [label="Sensor 3" shape="ellipse"]
s1 -> a1 -> s2 -> s3
}
"Data In" -> s1;
s3 -> "Data Out";
"Data In" [shape=cylinder];
"Data Out" [shape=cylinder];
}`
dot`
digraph G {
rankdir="TB"
node [shape="ellipse" fontname="verdana" fontsize=10 margin=0.2]
node [style=filled fillcolor=white shape=Rectangle]
subgraph cluster_0 {
fontname="verdana"
fontsize=10
style=filled;
color=lightgrey;
margin=20
label=" Pipeline"
s1 [label="count" shape="ellipse"]
a1 [label="Filter\njob == 'Architect'"]
s2 [label="Age Distribution" shape="ellipse"]
s3 [label="count" shape="ellipse"]
s1 -> a1 -> s2 -> s3
}
"Data In\n(People)" -> s1;
s3 -> "Data Out\n(Architects)";
"Data In\n(People)" [shape=cylinder];
"Data Out\n(Architects)" [shape=cylinder];
}`
dot`
digraph G {
node [shape="rectangle" fontname="verdana" fontsize=10 margin=0]
subgraph cluster_0 {
fontname="verdana"
fontsize=10
style=filled;
color=lightgrey;
node [style=filled,color=white];
label = "Sample Pipeline";
s0 [label="count" shape="ellipse"]
a0 [label="Filter"]
s1 [label="count" shape="ellipse"]
a1 [label="Map"]
s2 [label="mean" shape="ellipse"]
a3 [label="Sort"]
a4 [label="FirstN"]
s0 -> a0 -> s1 -> a1 -> s2 -> a3 -> a4;
}
"Data In" -> s0;
a4 -> "Data Out";
"Data In" [shape=cylinder];
"Data Out" [shape=cylinder];
}`
dot`
digraph R {
node [shape=record style=rounded]
layout=dot;
splines=true;
subgraph cluster_flow1 {
label="first flow" style="filled" color="lightgreen"
0
}
subgraph cluster_flow2 {
label="second flow" style="filled" color="azure"
1
2
t[shape=ellipse label="'First task'"];
0->1
1->t
1->2:n
}
subgraph cluster_flow3 {
label="third flow" style="filled" color="azure"
5
6
0->5
5->6:n
6->6
}
}
`
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.
