Difference between revisions of "Data Visualization"
Jump to navigation
Jump to search
(2 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
==Mermaid== | ==Mermaid== | ||
− | + | * Automated flow chart generation from markdown via Javascript package | |
− | * Automated flow chart generation from markdown | + | * [https://github.com/mermaid-js/mermaid mermaid on Github] |
− | * [https://github.com/ | + | * Configuration |
+ | ** YAML front matter is for [https://mermaid.js.org/config/schema-docs/config.html config options] | ||
+ | ** Can also style using comments | ||
* Jupyter notebook extension <code>%reload_ext mermaid</code> | * Jupyter notebook extension <code>%reload_ext mermaid</code> | ||
+ | |||
+ | === mermaid-cli === | ||
+ | * <code>npm install -g @mermaid-js/mermaid-cli</code> | ||
+ | * <code>mmdc -i input.mmd -o output.svg</code> | ||
+ | * <code>mmdc -i input.mmd -o output.png -t dark -b transparent</code> | ||
+ | * <code>mmdc --input test-positive/flowchart1.mmd --cssFile test-positive/flowchart1.css -o docs/animated-flowchart.svg</code> | ||
=== Flowchart syntax === | === Flowchart syntax === | ||
Line 23: | Line 31: | ||
* 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> | + | * Include [https://fontawesome.com/start fontawesome] in strings via fa:, e.g., <code>fa:fa-spinner</code> |
==== Edges/Links ==== | ==== Edges/Links ==== |
Latest revision as of 17:01, 22 January 2024
Contents
Mermaid
- Automated flow chart generation from markdown via Javascript package
- mermaid on Github
- Configuration
- YAML front matter is for config options
- Can also style using comments
- Jupyter notebook extension
%reload_ext mermaid
mermaid-cli
npm install -g @mermaid-js/mermaid-cli
mmdc -i input.mmd -o output.svg
mmdc -i input.mmd -o output.png -t dark -b transparent
mmdc --input test-positive/flowchart1.mmd --cssFile test-positive/flowchart1.css -o docs/animated-flowchart.svg
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