Animating diagrams and graphs in quarto
-
Diagrams
-
This shows how to use fragments inside code/diagram segments: Fragment Layout Elements in Reveal.JS · quarto-dev/quarto-cli · Discussion #3685
-
Non-quarto solutions:
Simplest way possible
- Multiple fragments one after the other with less and less invisible graph parts
style=invis
:sum [label="∑", fillcolor="#27ae60", shape=circle, style=invis];
1
This makes everything invisible by default, uncommenting the lines makes the parts visible
digraph G {
rankdir=LR;
node [shape=circle, style=invis, fontcolor=white, fontsize=18, fillcolor="white", color="white"];
edge [color="white", fontcolor="white"];
graph [color="white"];
subgraph cluster_1 {
#label = "Inputs";
// uncomment for visibility:
node [fillcolor="#2c3e50", style="filled"]
n0 [label=<1>];
n1 [label=<x<SUB>1</SUB>>];
n2 [label=<x<SUB>2</SUB>>];
n3 [label=<x<SUB>n</SUB>>];
{ rank=same; n0; n1; n2; n3; }
}
subgraph arrows {
// uncomment for visibility of arrows:
edge [color="black", fontcolor="black"];
node [style="filled", fillcolor="#27ae60"];
n0 -> sum [label=<w<SUB>0</SUB>>];
n1 -> sum [label=<w<SUB>1</SUB>>];
n2 -> sum [label=<w<SUB>2</SUB>>];
n3 -> sum [label=<w<SUB>n</SUB>>];
sum [label="∑"];
}
subgraph end {
// uncomment for visibility
edge [color="black", fontcolor="black"];
node [style="filled", fillcolor="#27ae60"];
activation [label="∫", fillcolor="#f39c12", shape=circle];
// Output node
output [label="y", fillcolor="#8e44ad"];
// Other edges
sum -> activation;
activation -> output;
}
}
Nel mezzo del deserto posso dire tutto quello che voglio.