31:T76f,{ console.log('magjac 100: tween'); playPathTweening; yield html`

`; var dotIndex = 0; var graphviz = d3.select("#graph2").graphviz(false) .transition(function () { return d3.transition() .ease(d3.easeLinear) .delay(500) .duration(dotIndex * dotIndex * 800); }); function attributer(datum, index, nodes) { var selection = d3.select(this); if (datum.tag == "svg") { //var width = 500; var height = 400 * width / 964; var scale = 1.5 * width / 964; var viewBox = `0 0 ${width * 3 / 4 / scale} ${height * 3 / 4 / scale}`; selection .attr("width", width) .attr("height", height) .attr("viewBox", `${viewBox}`); datum.attributes.width = width; datum.attributes.height = height; datum.attributes.viewBox = `${viewBox}`; } } function render() { var dotLines = dots[dotIndex % dots.length]; var dot = dotLines.join(''); graphviz .tweenPaths(tweenPaths) .zoom(false) .tweenShapes(false) .attributer(attributer) .renderDot(dot) .on('end', function () { dotIndex += 1; if (dotIndex != dots.length) { render(); } }); } var dots = [ [ 'digraph {', '}' ], [ 'digraph {', ' node [style="filled"]', ' a [fillcolor="#d62728"]', ' b [fillcolor="#1f77b4"]', ' c [fillcolor="#2ca02c"]', ' a -> b', ' a -> c', '}' ], [ 'digraph {', ' node [style="filled"]', ' a [fillcolor="#d62728"]', ' b [fillcolor="#1f77b4"]', ' c [fillcolor="#2ca02c"]', ' a -> b', ' a -> c', ' b -> c', '}' ], ]; render(); //return width; return md``; }32:T44b,md`## Examples & Applications Some of theses are local and requires installation of d3-graphviz * [Basic](https://bl.ocks.org/magjac/a23d1f1405c2334f288a9cca4c0ef05b) (bl.ocks.org) * [Demo](https://bl.ocks.org/magjac/4acffdb3afbc4f71b448a210b5060bca) (bl.ocks.org) * [Basic Path Tweening](http://localhost:8080/examples/basic-path-tween.html) (local) * [Growing Edges Demo](http://localhost:8080/examples/demo-grow-entering-edges.html) (local) * [Compare Edge Options](http://localhost:8080/examples/compare-edge-options.html) (local) * [Shape Tweening Demo](http://bl.ocks.org/magjac/69dc955a2e2ee085f60369c4a73f92a6) (bl.ocks.org) * [Delete Nodes and Edges Demo Application](https://bl.ocks.org/magjac/28a70231e2c9dddb84b3b20f450a215f) (bl.ocks.org) * [Combined Graphical and DOT Text Editor](http://bl.ocks.org/magjac/b2bf6da945e725a605e0d077781457b2) (bl.ocks.org, experimental) * [Jira Dependency Graph & Editor](http://ci.netinsight.se/jenkins/view/%7Eadmin/job/graph-jira-dependencies-SAND/lastSuccessfulBuild/artifact/color/html/16%3A9/projects/Sandbox/components/Sofia.html) (proprietary) `33:T446,dots = [ [ 'digraph {', ' node [style="filled"]', ' b [fillcolor="#1f77b4"]', ' a [fillcolor="#d62728"]', ' c [fillcolor="#2ca02c"]', ' d [fillcolor="#ff7f0e"]', '}' ], [ 'digraph {', ' node [style="filled"]', ' a [fillcolor="#d62728"]', ' b [fillcolor="#1f77b4"]', ' c [fillcolor="#2ca02c"]', ' d [fillcolor="#ff7f0e"]', ' a -> b', ' a -> c', ' a -> d', '}' ], [ 'digraph {', ' node [style="filled"]', ' a [fillcolor="#d62728"]', ' b [fillcolor="#1f77b4"]', ' c [fillcolor="#2ca02c"]', ' d [fillcolor="#ff7f0e"]', ' a -> b', ' a -> c', ' b -> d', ' c -> d', ' a -> d', '}' ], [ 'digraph {', ' node [style="filled"]', ' a [fillcolor="#d62728"]', ' b [fillcolor="#1f77b4"]', ' c [fillcolor="#2ca02c"]', ' d [fillcolor="#ff7f0e"]', ' a -> b', ' a -> c', ' b -> d', ' c -> d', ' a -> d', ' c -> b', '}' ], ]34:Td25,comparisonGraph = { if (!runComparison) { return; } let cell = this ? this : html`

`; let cellSel = d3.select(cell); var dotIndex = 0; var transition1; var numGraphs = 0; var numPending = 0; var table = d3.select(cell).append("table"); var graphs = []; var nrows = 2; var ncols = 4; var tweenPrecision = 10; for (var r = 0; r < nrows; r++) { var row = table.append("tr"); graphs.push([]); for (var c = 0; c < ncols; c++) { var id = "r" + r + "c" + c; var col = row.append("td") var p = col.append("p") .text(id); var div = col.append("div"); var graphviz = div.graphviz(useWorker) .zoom(false) .tweenShapes(false) .tweenPrecision(tweenPrecision) .transition(transitionFactory) .on("initEnd", firstRenderAll); graphs[r].push({ "p": p, "graphviz": graphviz, }); numPending += 1; numGraphs += 1; } } for (var r = 0; r < nrows; r++) { for (var c = 0; c < ncols; c++) { var graph = graphs[r][c]; var p = graph.p; var graphviz = graph.graphviz; let html = []; if (c < 2 ) { graphviz.fade(false); html.push("~~fade~~"); } else { html.push("fade"); } if (r == 0) { graphviz.tweenPaths(false); html.push("~~tweenPaths~~"); } else { html.push("tweenPaths"); } if (c == 0 | c == 2) { graphviz.growEnteringEdges(false); html.push("~~growEnteringEdges~~"); } else { html.push("growEnteringEdges"); } p.html(html.join(' ')); } } return cell; function firstRenderAll() { numPending -= 1; if (numPending == 0) { for (var r = 0; r < nrows; r++) { for (var c = 0; c < ncols; c++) { var graph = graphs[r][c]; render(graph.graphviz); } } } } function render(graphviz) { var dotLines = dots[dotIndex % dots.length]; var dot = dotLines.join(''); graphviz .tweenShapes(false) .dot(dot) .attributer(attributer) .render() .on('end', function () { if (numPending == 0 && dotIndex < dots.length) { dotIndex += 1; } if (runComparison && dotIndex < dots.length) { render(graphviz); } }); numPending += 1; } function loadCell() { cellSel.dispatch("load"); } function attributer(datum, index, nodes) { var selection = d3.select(this); if (datum.tag == "svg") { var width = compareWidth; var height = compareHeight; var x = "10"; var y = "10"; var k = 1.7; selection .attr("width", width) .attr("height", height) .attr("viewBox", -x + " " + -y + " " + width * k * 3 / 4 + " " + height * k * 3 / 4); datum.attributes.width = width; datum.attributes.height = height; datum.attributes.viewBox = -x + " " + -y + " " + width * k * 3 / 4 + " " + height * k * 3 / 4; loadCell(); } } function transitionFactory() { if (numPending == numGraphs) { transition1 = d3.transition("main") .ease(d3.easeLinear) .delay(3000) .duration(3000); } numPending -= 1; return transition1; } }35:[] 2f:{"title":"Introduction to d3-graphviz","cells":[{"id":0,"value":"md`# Introduction to d3-graphviz`","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"md`## A Javascript library for interactive DOT graphs with animated transitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"md`Presentation held at the [Data Visualization Stockholm Meetup](https://www.meetup.com/Data-Visualization-Stockholm), June 29 2018`","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"logoAnimation = adot.bind(this)`${logoDots[logoDotIndex]}${{width: width, height: 400 * width / 964, scale: 400 / 116 * 3 / 4 * width / 964, duration: logoDuration, zoom:false}}`\n//logoAnimation = adot.bind(this)`${logoDots[logoDotIndex]}${{width: width, height: 400, scale: 2.3 * width / 964, duration: logoDuration, zoom: false}}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"viewof playLogo = button({value: \"Play animation\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"md`### What is this?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1385,"value":"md`This [Observable](https://beta.observablehq.com/) notebook is a presentation aimed at introducing [d3-graphviz](https://github.com/magjac/d3-graphviz) to people without prior knowledge of [Graphviz](https://www.graphviz.org/) or [D3](https://d3js.org/). It also provides some background information which you don't need to be able to just *use* d3-graphviz. People anxios to get started using d3-graphviz in Observable directly whithout further ado, should probaby visit one of the following notebooks instead:\n* [d3-graphviz - Graphviz Animations Using the Observable ***adot*** Template Literal Tag](https://beta.observablehq.com/@magjac/d3-graphviz)\n* [Demo of Native d3-graphviz Animations in Observable](https://beta.observablehq.com/@magjac/demo-of-d3-graphviz-animations)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1370,"value":"md`### d3-graphviz dependencies\n\n* D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards.\n\n* Graphviz (short for Graph Visualization Software) is a package of open-source tools initiated by AT&T Labs Research for drawing graphs specified in DOT language scripts.\n\n* Emscripten is a source-to-source compiler that runs as a back end to the LLVM compiler and produces a subset of JavaScript known as asm.js.\n\n* Viz.js builds Graphviz with Emscripten and provides a simple wrapper for using it in the browser.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"adot`\ndigraph {\n graph [tooltip=\" \"]\n node [style=filled tooltip=\" \"]\n {\n graph [rank=same]\n D3 [fillcolor=\"#1f77b4\" shape=hexagon URL=\"https://d3js.org\"]\n Graphviz [fillcolor=\"#d62728\" shape=ellipse URL=\"https://www.graphviz.org\"]\n }\n Emscripten [fillcolor=\"#9467bd\" shape=octagon URL=\"http://kripken.github.io/emscripten-site\"]\n \"Viz.js\" [fillcolor=\"#ff7f0e\" shape=circle URL=\"https://github.com/mdaines/viz.js\"]\n \"d3-graphviz\" [fillcolor=\"#2ca02c\" shape=egg URL=\"https://github.com/magjac/d3-graphviz\"]\n D3 -> \"d3-graphviz\"\n Graphviz -> Emscripten -> \"Viz.js\" -> \"d3-graphviz\"\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"slide`\nd3-graphviz features:\n\n* Rendering of SVG from [DOT](https://www.graphviz.org/doc/info/lang.html)\n* Animated transition between graphs\n* Edge path tweening\n* Node shape tweening\n* Fade-in and fade-out of elements\n* Animated growth of entering edges\n* Panning & zooming\n* Interactively draw nodes and edges\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"slide.js`\n\n// Select an element,\n// create the Graphviz renderer instance\n// render from the DOT source\n\nd3.select(\"#graph\")\n .graphviz()\n .renderDot('digraph {a -> b}');`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"yield html`

`,\nd3.select(\"#graph\")\n .graphviz(useWorker)\n .renderDot('digraph {a -> b}')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1195,"value":"md`## Animated transition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"slide.js`\n\n\n// Select an element,\n// Create the Graphviz renderer instance\n// Create a transition factory\n// Render from the 1st DOT source\n// Render from the 2nd DOT source in the callback\n\nd3.select(\"#graph1\")\n .graphviz(useWorker)\n .transition(() => d3.transition().duration(2000))\n .renderDot('digraph {a -> b}', function () {\n this.renderDot('digraph {a -> b; a -> c}')\n })\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1497,"value":"viewof playTransition = button({value: \"Play transition\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1168,"value":"playTransition,\nyield html`

`,\nd3.select(\"#graph1\")\n .graphviz(useWorker)\n .transition(() => d3.transition().duration(2000))\n .renderDot('digraph {a -> b}', function () {\n this.renderDot('digraph {a -> b; a -> c}')\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"md`## Path tweening`","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"md`### What happens if we don't have it?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"viewof playPathTweening = button({value: \"Play path tweening animation\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"md`### Let's enable path tweening!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"viewof tweenPaths = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1245,"value":"slide`End of Presentation\n\nThank you!\n\nhttps://github.com/magjac/d3-graphviz\n\nhttps://beta.observablehq.com/@magjac/d3-graphviz\n\nhttps://beta.observablehq.com/@magjac/introduction-to-d3-graphviz\n\nhttps://join.slack.com/t/d3-graphviz/shared_invite/enQtMzMwODQzMDI5MDA5LTExYTgyYThhNzI3YjJlODRiMzQ3MWM3YWI5ZjAyMTI2MmI4YWIwMDM4ZmY5MDQzNjkzMDY4YTRmMTU1YzIzNTY\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"md`# End of presentation\n\nThe rest is notebook internals and work in progress\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"md`## Work in progress`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"md`### Edge options comparison`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1409,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"compareHeight = 230 * 4 / 3// * compareWidth / 290","pinned":true,"hidden":false,"mode":"ojs"},{"id":1416,"value":"compareWidth = width / 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":1481,"value":"viewof runComparison = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1281,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"md`### Using d3-graphviz natively in Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"md`Using [d3-graphviz]((https://github.com/magjac/d3-graphviz) natively gives access to the full functionality and configurability. For simpler cases in Observable, consider using the **adot** [template literal tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) defined in [@magjac/d3-graphviz]((https://beta.observablehq.com/@magjac/d3-graphviz)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1301,"value":"graph = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"dotSrc = dotSrcs[dotIndex % dotSrcs.length]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"md`First we define an array of DOT sources:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1299,"value":"dotSrcs = [\n \"digraph {a -> b; c}\", \n \"digraph {a -> b; a -> c}\",\n \"digraph {a -> b; a -> c; c -> d; e}\",\n \"digraph {a -> b; a -> c; c -> d; e -> d}\",\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"viewof dotIndex = slider({\n min: 0, \n max: dotSrcs.length - 1, \n step: 1, \n value: 0, \n description: \"Select DOT source to render\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"viewof duration = slider({\n min: 0, \n max: 5000, \n step: 1, \n value: 1000, \n description: \"Set duration of animated transition\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1315,"value":"{\n if (renderEnd) {\n return md`Last rendering ended at ${new Date}`;\n } else {\n return;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"md`#### Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"md`We set the height of the graph:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"md`We create the Graphviz renderer instance on a selected element`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1294,"value":"graphviz_init = d3.select(graph).graphviz(false)","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"graphviz = graphviz_init\n .attributer(attributerFn)\n .transition(transitionFactory)","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"md`An attributer function scales the graph to fit the allocated space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"attributerFn = function (d) {\n if (d.tag == \"svg\") {\n d3.select(this)\n .attr(\"width\", width)\n .attr(\"height\", height);\n d.attributes.width = width;\n d.attributes.height = height;\n }\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"md`A transition factory returns a transition and is called just before rendering starts:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"transitionFactory = function () {\n var t = d3.transition(\"magjacT\").duration(duration);\n return t;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"md`This variable evaulates to *true* when the animated transition ends and can be used to trigger other cells:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"renderEnd = new Promise(function(resolve, reject) { \n graphviz.renderDot(dotSrc, function () {resolve(this)})})","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"md`## Notebook assets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"useWorker = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"viz_script = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"logoDuration = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"logoDotIndex = {\n playLogo;\n let i = this ? (this + 1) % logoDots.length : logoDots.length - 1;\n yield i;\n while (++i < logoDots.length) {\n yield Promises.delay(logoDuration + 100, i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3-graphviz@2\", \"d3-selection@1\", \"d3-transition@1\", \"d3-ease@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"import {slider, button, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"//import {adot, logoDots} from \"@magjac/d3-graphviz\"\nimport {adot, logoDots, logoDot} from \"@magjac/d3-graphviz\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":697,"value":"import {slide, slide_style} from \"@mbostock/slide\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}