Difference between revisions of "Data Visualization"
Jump to navigation
Jump to search
(5 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 === | ||
* [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] | ||
− | * Chart types | + | * Comment lines start with %% |
− | + | ||
− | * Nodes | + | ==== Chart types ==== |
− | ** | + | * flowchart (alias "graph") (LR, RL, TD, TB, BT) |
− | * Edges | + | * group subgraphs using subgraph/end tokens. label subgraph using regular [label] syntax. subgraphs can have their own directionality |
+ | |||
+ | ==== Nodes (boxes) ==== | ||
+ | * <code>node_id_name["square box"]</code> | ||
+ | * <code>node_id_name("rounded edge box")</code> | ||
+ | * <code>node_id_name(["Pressure vessel box"])</code> | ||
+ | * <code>node_id_name[[Double side edge box"]]</code> | ||
+ | * <code>node_id_name[(Database cylinder box have parens interior")]</code> | ||
+ | * <code>node_id_name(("Circle boxes have double parens"))</code> | ||
+ | * <code>node_id_name{"Diamond node have single brace"}</code> | ||
+ | * Other node shapes, asym flag >], hexagon {{}}, parallelogram [//] [\\], trapezoid [/\], [\/], double circle has triple parens ((())) | ||
+ | * Markdown strings by "`...`" | ||
+ | * Include [https://fontawesome.com/start fontawesome] in strings via fa:, e.g., <code>fa:fa-spinner</code> | ||
+ | |||
+ | ==== Edges/Links ==== | ||
+ | * --> | ||
+ | * --- | ||
+ | * -.- - dotted link | ||
+ | * === - thick line | ||
+ | * [[User:Colettace|Colettace]] ([[User talk: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== | ==Graphviz== |
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