graph { graph [engine:dot rankdir:LR clusterize:false applyCss:dark] visualization -> d3 [reverse: false] d3 -> webcola [reverse: false] d3 -> message_sequence_chart [reverse: false] visualization *= vega_lite [reverse: false] vega_lite *= sankey [reverse: false] visualization *= graphviz__osage [reverse: false] visualization *= to_vega__vega_lite [reverse: false] to_vega__vega_lite *= mdd_to_vega_lite [reverse: false] to_vega__vega_lite *= xdot_to_vega_lite [reverse: false] visualization *= editable_graph_ok_ [reverse: false] visualization *= eisenhover_matrix [reverse: false] visualization [z: 9.5 @html: "

visualization

• sankey:
https:/timeline-sankey

• https:/circular

• could be achieved with graphviz?

• msc revive zaujimave

• maybe use vegalite?

• https:/Kyrix ::
realizuju diving into data

" nomen: "visualization"] d3 [z: 4.75 @html: "

• https:/d3-gridding

• https:/awesome-d3?tab=readme-ov-f

	• https:/dc.js
	• https:/d2b?tab=readme-ov-file
	• https:/www.sigmajs.org
	• https:/d3-beeswarm?tab=readme-ov-
	• https:/d3kit-timeline

• https:/d3-gridding

" nomen: "d3"] webcola [z: 2.375 @html: "

webcola

• https:/powergraph.html

• https:/dotpowergraph.html

" nomen: "webcola"] message_sequence_chart [z: 2.375 @html: "

message sequence chart

• https:/example.html

• integrated into :rc or :log

• use mq-view

" nomen: "message sequence chart"] vega_lite [z: 4.75 @html: "

vega lite

• https:/Deneb-Showcase
:: vela peknych prikladov

• https:/vl-convert

• https:/index.html

• https:/figurelist.html

• https:/#faceting-trellis-plot--sm

• https:/voyager

• https:/?msg_id=0003nk

• idea: own jq-json based vega-lite based
infographics generator

• https:/Deneb-Showcase?tab=readme-
cola gridified

" nomen: "vega lite"] sankey [z: 2.375 @html: "

sankey

• https:/sankey-diagram-alluvial-di

• https:/chartjs-chart-sankey

• see more in databox-libs/visualization

" nomen: "sankey"] graphviz__osage [z: 4.75 @html: "

graphviz: osage

• https:/how-to-structure-multiple-

•

• see the difference with dot and osage:

digraph G { compound=true; node
【shape=box】; edge 【dir=none】; subgraph
cluster_overall{ subgraph
cluster_top{ apple;
banana; } subgraph
clustermsc{ basket1;
basket2;
label="Baskets"; }
subgraph cluster_bottom{ orange;
kiwi; } label="Test";
} apple -> basket1
【constraint=false】; banana ->
basket2; basket1 -> orange; // !!!
basket2-> kiwi; // !!! }

" nomen: "graphviz: osage"] to_vega__vega_lite [z: 4.75 @html: "

to vega/vega-lite

• https:/webcola

• https:/dagre?utm_source=chatgpt.c

• Graphviz WASM

• https:/hpcc-js-wasm?utm_source=ch

• https:/graph.html?id=small.json

• https:/dagre

• https:/wiki#demos

• https:/graph-story-board.html

• https:/demos

	• https:/activity-diagram
	•

" nomen: "to vega/vega-lite"] mdd_to_vega_lite [z: 2.375 @html: "

mdd to vega-lite

• alt. layout:

	• webcola
	• inhouse

• mdg achieved by vega

" nomen: "mdd to vega-lite"] xdot_to_vega_lite [z: 2.375 @html: "

xdot to vega-lite

• DOT → Vega force/tree layout

• DOT ↓ Graphviz -Tjson ↓ Vega

• DOT → Vega force/tree layout

•

" nomen: "xdot to vega-lite"] editable_graph_ok_ [z: 4.75 @html: "

editable graph ok?

• https:/Drawflow

	• https:/?k=20240326021cdd
	• https:/?k=202403808ba09f
	• https:/?k=20240339e781c7

• https:/flowy

• https:/DgrmJS

• https:/joint

• https:/community-edition

" nomen: "editable graph ok?"] eisenhover_matrix [z: 4.75 @html: "

eisenhover matrix

• see graphviz

" nomen: "eisenhover matrix"] }