31:[] 2f:{"title":"Graphviz - Previous","cells":[{"id":0,"value":"md`# Graphviz - Previous\n\n_This is an API compatible fork of [@observablehq/graphviz](https://observablehq.com/@observablehq/graphviz) using a wasm version of **Graphviz v${await graphviz.version()}**_ \n\nA quick demo of [Graphviz](http://www.graphviz.org/) using its Emscripten port from [@hpcc-js/wasm](https://github.com/hpcc-systems/hpcc-js-wasm/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"dot`\ndigraph structs {\n node [shape=plaintext]\n struct1 [label=<\n\n \n

left

mid dle

right

\n >];\n struct2 [label=<\n\n \n

one

two

\n >];\n struct3 [label=<\n\n \n \n \n \n \n \n \n \n \n \n \n \n

hello world	b	g	h
c	d	e
f

\n >];\n struct1:f1 -> struct2:f0;\n struct1:f2 -> struct3:here;\n}`\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"circo`\ngraph { \n splines = ortho\n n0 -- n1 -- n2 -- n3 -- n0; \n}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"dot`digraph { x -> y -> z; }`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"dot`\ndigraph G {\n subgraph cluster_0 {\n style=filled;\n color=lightgrey;\n node [style=filled,color=white];\n a0 -> a1 -> a2 -> a3;\n label = \"process #${1}\";\n }\n subgraph cluster_1 {\n node [style=filled];\n b0 -> b1 -> b2 -> b3;\n label = \"process #${2}\";\n color=blue\n }\n start -> a0;\n start -> b0;\n a1 -> b3;\n b2 -> a3;\n a3 -> a0;\n a3 -> end;\n b3 -> end;\n start [shape=Mdiamond];\n end [shape=Msquare];\n}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"dot`\ndigraph structs {\n node [shape=record];\n struct1 [label=\" left| mid\ dle| right\"];\n struct2 [label=\" one| two\"];\n struct3 [label=\"hello\nworld |{ b |{c| d|e}| f}| g | h\"];\n struct1:f1 -> struct2:f0;\n struct1:f2 -> struct3:here;\n}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"### HTML Like Tables","pinned":false,"hidden":false,"mode":"md"},{"id":918,"value":"dot`\ndigraph Blah {\n rankdir=\"LR\"\n node [shape=\"box\"];\n A -> B -> C;\n B -> D;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"graphvizModule = import ('https://unpkg.com/@hpcc-js/wasm@2.22.1/dist/graphviz.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"graphviz = graphvizModule.Graphviz.load();","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"layout = {\n let _id = 0;\n return function(layout) {\n return function * (parts, ...args) {\n yield html`

...loading...

`;\n \n const str = parts.map((s, i) => s + (i < args.length ? args[i] : \"\")).join(\"\");\n \n const svgText = graphviz.layout(str, \"svg\", layout)\n const id = ++_id;\n yield html`

${svgText}

`\n\n const div = d3.select(`#id_${id}`);\n const svg = div.select(\"svg\");\n const [x, y, _width, height] = svg.attr(\"viewBox\").split(\" \");\n svg\n .attr(\"width\", width -2)\n ;\n \n const g = svg.select(\"g\");\n const zoom = d3.zoom();\n svg.call(zoom\n .extent([[0, 0], [width, height]])\n .scaleExtent([0.1, 2])\n .on(\"zoom\", ({ transform }) => g.attr(\"transform\", transform))\n );\n svg.call(zoom.translateTo, width / 2, -height / 2); \n \n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"circo = layout(\"circo\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"dot = layout(\"dot\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"fdp = layout(\"fdp\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"sfdp = layout(\"sfdp\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"neato = layout(\"neato\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"osage = layout(\"osage\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"patchwork = layout(\"patchwork\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"twopi = layout(\"twopi\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"---","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}