Data Visualization

From Colettapedia
Jump to navigation Jump to search

Mermaid

  • Automated flow chart generation from markdown via Javascript package
  • mermaid on Github
  • Configuration
  • 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

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