Difference between revisions of "Data Visualization"
Jump to navigation
Jump to search
Line 7: | Line 7: | ||
=== Flowchart syntax === | === Flowchart syntax === | ||
* [https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax Flowchart syntax docs] | * [https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax Flowchart syntax docs] | ||
+ | * Comment lines start with %% | ||
==== Chart types ==== | ==== Chart types ==== | ||
Line 22: | Line 23: | ||
* Other node shapes, asym flag >], hexagon {{}}, parallelogram [//] [\\], trapezoid [/\], [\/], double circle has triple parens ((())) | * Other node shapes, asym flag >], hexagon {{}}, parallelogram [//] [\\], trapezoid [/\], [\/], double circle has triple parens ((())) | ||
* Markdown strings by "`...`" | * Markdown strings by "`...`" | ||
+ | * Include [https://fontawesome.com/start fontawesome] in strings via fa:, e.g., <code>fa:fa-spinner<code> | ||
==== Edges/Links ==== | ==== Edges/Links ==== | ||
Line 38: | Line 40: | ||
* special text given using html character names | * special text given using html character names | ||
− | ==== | + | ==== attributes ==== |
+ | * node click effects | ||
flowchart LR | flowchart LR | ||
A-->B | A-->B | ||
Line 48: | Line 51: | ||
click C href "https://www.github.com" _blank | click C href "https://www.github.com" _blank | ||
click D href "https://www.github.com" "Open this in a new tab" _blank | click D href "https://www.github.com" "Open this in a new tab" _blank | ||
+ | * node styling by element id | ||
+ | flowchart LR | ||
+ | id1(Start)-->id2(Stop) | ||
+ | style id1 fill:#f9f,stroke:#333,stroke-width:4px | ||
+ | style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 | ||
+ | * node styling by class | ||
+ | flowchart LR | ||
+ | A:::foo & B:::bar --> C:::foobar | ||
+ | classDef foo stroke:#f00 | ||
+ | classDef bar stroke:#0f0 | ||
+ | classDef foobar stroke:#00f | ||
==Graphviz== | ==Graphviz== |
Revision as of 15:33, 22 January 2024
Contents
Mermaid
- Javascript
- Automated flow chart generation from markdown
- on Github
- Jupyter notebook extension
%reload_ext mermaid
Flowchart syntax
- Flowchart syntax docs
- Comment lines start with %%
Chart types
- flowchart (alias "graph") (LR, RL, TD, TB, BT)
- group subgraphs using subgraph/end tokens. label subgraph using regular [label] syntax. subgraphs can have their own directionality
Nodes (boxes)
node_id_name["square box"]
node_id_name("rounded edge box")
node_id_name(["Pressure vessel box"])
node_id_nameDouble side edge box"
node_id_name[(Database cylinder box have parens interior")]
node_id_name(("Circle boxes have double parens"))
node_id_name{"Diamond node have single brace"}
- Other node shapes, asym flag >], hexagon {{}}, parallelogram [//] [\\], trapezoid [/\], [\/], double circle has triple parens ((()))
- Markdown strings by "`...`"
- Include fontawesome in strings via fa:, e.g.,
fa:fa-spinner
Edges/Links
- -->
- ---
- -.- - dotted link
- === - thick line
- Colettace (talk) - invisible link to help with positioning
- --o
- --x
- <-->, o--o
- ---|Text delimited by pipes|
- A ---> B --> C
- a --> b & c --> d - multi node links
- Add additional dashes to make longer (i.e., add ranks)
- special text given using html character names
attributes
- node click effects
flowchart LR
A-->B
B-->C
C-->D
D-->E
click A "https://www.github.com" _blank
click B "https://www.github.com" "Open this in a new tab" _blank
click C href "https://www.github.com" _blank
click D href "https://www.github.com" "Open this in a new tab" _blank
- node styling by element id
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
- node styling by class
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
Graphviz
- Non directed graph, directed graph
from graphviz import Digraph, Graph
- Really not a lot of control over placement of the nodes.
- Some experimentation