30:[] 2e:{"title":"Graphviz","cells":[{"id":0,"value":"md`# Graphviz\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 G {\n exRnd_a [\n shape=plaintext,\n label=<\n \n \n \n

col 1	foo
COL 2	bar

\n >\n ];\n}`;\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1038,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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":918,"value":"dot`\ndigraph Blah {\n rankdir=\"LR\"\n node [shape=\"box\"];\n A -> B -> C;\n B -> D;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"graphvizModule = import ('@hpcc-js/wasm-graphviz');","pinned":true,"hidden":false,"mode":"ojs"},{"id":861,"value":"graphviz = graphvizModule.Graphviz.load();","pinned":true,"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":true,"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":"$W30","stdlib":"1","titling":"auto"}