d3-graphviz demo of animated growth of entering edges.
Last active
February 5, 2021 12:32
-
-
Save magjac/f485e7b915c9699aa181a11e183f8237 to your computer and use it in GitHub Desktop.
Growing Graphviz Edges
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| height: 800 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script> | |
| <script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script> | |
| <div id="graph" style="text-align: center;"></div> | |
| <script> | |
| function attributer(datum, index, nodes) { | |
| var selection = d3.select(this); | |
| if (datum.tag == "svg") { | |
| var width = window.innerWidth; | |
| var height = window.innerHeight; | |
| var x = 200; | |
| var y = 10 | |
| var scale = 0.75; | |
| selection | |
| .attr("width", width + "pt") | |
| .attr("height", height + "pt") | |
| .attr("viewBox", -x + " " + -y + " " + (width / scale) + " " + (height / scale)); | |
| datum.attributes.width = width + "pt"; | |
| datum.attributes.height = height + "pt"; | |
| datum.attributes.viewBox = -x + " " + -y + " " + (width / scale) + " " + (height / scale); | |
| } | |
| } | |
| function transitionFactory() { | |
| return d3.transition("main") | |
| .ease(d3.easeLinear) | |
| .delay(40) | |
| .duration(300 * dotIndex); | |
| } | |
| var dotIndex = 0; | |
| var graphviz = d3.select("#graph").graphviz() | |
| .logEvents(true) | |
| .transition(transitionFactory) | |
| .tweenShapes(false) | |
| .on("initEnd", render) | |
| .attributer(attributer); | |
| function render() { | |
| var dotLines = dots[dotIndex % dots.length]; | |
| var dot = dotLines.join(''); | |
| graphviz | |
| .renderDot(dot) | |
| .on("end", function () { | |
| dotIndex += 1; | |
| if (dotIndex != dots.length) { | |
| render(); | |
| } | |
| }); | |
| } | |
| var colors = d3.schemeCategory20; | |
| var dots = [ | |
| [ | |
| 'digraph {', | |
| ' graph [rankdir=TB]', | |
| ' node [style="filled"]', | |
| ' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]', | |
| ' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]', | |
| ' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]', | |
| ' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]', | |
| ' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]', | |
| ' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]', | |
| ' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]', | |
| ' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]', | |
| ' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]', | |
| ' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]', | |
| '}' | |
| ], | |
| [ | |
| 'digraph {', | |
| ' graph [rankdir=TB]', | |
| ' node [style="filled"]', | |
| ' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]', | |
| ' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]', | |
| ' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]', | |
| ' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]', | |
| ' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]', | |
| ' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]', | |
| ' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]', | |
| ' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]', | |
| ' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]', | |
| ' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]', | |
| ' a0 -> a1', | |
| '}' | |
| ], | |
| [ | |
| 'digraph {', | |
| ' graph [rankdir=TB]', | |
| ' node [style="filled"]', | |
| ' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]', | |
| ' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]', | |
| ' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]', | |
| ' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]', | |
| ' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]', | |
| ' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]', | |
| ' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]', | |
| ' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]', | |
| ' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]', | |
| ' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]', | |
| ' a0 -> a1', | |
| ' a0 -> a2', | |
| ' a1 -> a2', | |
| '}' | |
| ], | |
| [ | |
| 'digraph {', | |
| ' graph [rankdir=TB]', | |
| ' node [style="filled"]', | |
| ' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]', | |
| ' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]', | |
| ' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]', | |
| ' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]', | |
| ' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]', | |
| ' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]', | |
| ' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]', | |
| ' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]', | |
| ' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]', | |
| ' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]', | |
| ' a0 -> a1', | |
| ' a0 -> a2', | |
| ' a1 -> a2', | |
| ' a0 -> a3', | |
| ' a1 -> a3', | |
| ' a2 -> a3', | |
| '}' | |
| ], | |
| [ | |
| 'digraph {', | |
| ' graph [rankdir=TB]', | |
| ' node [style="filled"]', | |
| ' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]', | |
| ' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]', | |
| ' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]', | |
| ' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]', | |
| ' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]', | |
| ' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]', | |
| ' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]', | |
| ' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]', | |
| ' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]', | |
| ' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]', | |
| ' a0 -> a1', | |
| ' a0 -> a2', | |
| ' a1 -> a2', | |
| ' a0 -> a3', | |
| ' a1 -> a3', | |
| ' a2 -> a3', | |
| ' a0 -> a4', | |
| ' a1 -> a4', | |
| ' a2 -> a4', | |
| ' a3 -> a4', | |
| '}' | |
| ], | |
| [ | |
| 'digraph {', | |
| ' graph [rankdir=TB]', | |
| ' node [style="filled"]', | |
| ' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]', | |
| ' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]', | |
| ' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]', | |
| ' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]', | |
| ' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]', | |
| ' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]', | |
| ' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]', | |
| ' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]', | |
| ' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]', | |
| ' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]', | |
| ' a0 -> a1', | |
| ' a0 -> a2', | |
| ' a1 -> a2', | |
| ' a0 -> a3', | |
| ' a1 -> a3', | |
| ' a2 -> a3', | |
| ' a0 -> a4', | |
| ' a1 -> a4', | |
| ' a2 -> a4', | |
| ' a3 -> a4', | |
| ' a0 -> a5', | |
| ' a1 -> a5', | |
| ' a2 -> a5', | |
| ' a3 -> a5', | |
| ' a4 -> a5', | |
| '}' | |
| ], | |
| [ | |
| 'digraph {', | |
| ' graph [rankdir=TB]', | |
| ' node [style="filled"]', | |
| ' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]', | |
| ' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]', | |
| ' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]', | |
| ' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]', | |
| ' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]', | |
| ' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]', | |
| ' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]', | |
| ' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]', | |
| ' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]', | |
| ' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]', | |
| ' a0 -> a1', | |
| ' a0 -> a2', | |
| ' a1 -> a2', | |
| ' a0 -> a3', | |
| ' a1 -> a3', | |
| ' a2 -> a3', | |
| ' a0 -> a4', | |
| ' a1 -> a4', | |
| ' a2 -> a4', | |
| ' a3 -> a4', | |
| ' a0 -> a5', | |
| ' a1 -> a5', | |
| ' a2 -> a5', | |
| ' a3 -> a5', | |
| ' a4 -> a5', | |
| ' a0 -> a6', | |
| ' a1 -> a6', | |
| ' a2 -> a6', | |
| ' a3 -> a6', | |
| ' a4 -> a6', | |
| ' a5 -> a6', | |
| '}' | |
| ], | |
| [ | |
| 'digraph {', | |
| ' graph [rankdir=TB]', | |
| ' node [style="filled"]', | |
| ' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]', | |
| ' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]', | |
| ' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]', | |
| ' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]', | |
| ' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]', | |
| ' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]', | |
| ' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]', | |
| ' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]', | |
| ' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]', | |
| ' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]', | |
| ' a0 -> a1', | |
| ' a0 -> a2', | |
| ' a1 -> a2', | |
| ' a0 -> a3', | |
| ' a1 -> a3', | |
| ' a2 -> a3', | |
| ' a0 -> a4', | |
| ' a1 -> a4', | |
| ' a2 -> a4', | |
| ' a3 -> a4', | |
| ' a0 -> a5', | |
| ' a1 -> a5', | |
| ' a2 -> a5', | |
| ' a3 -> a5', | |
| ' a4 -> a5', | |
| ' a0 -> a6', | |
| ' a1 -> a6', | |
| ' a2 -> a6', | |
| ' a3 -> a6', | |
| ' a4 -> a6', | |
| ' a5 -> a6', | |
| ' a0 -> a7', | |
| ' a1 -> a7', | |
| ' a2 -> a7', | |
| ' a3 -> a7', | |
| ' a4 -> a7', | |
| ' a6 -> a7', | |
| '}' | |
| ], | |
| [ | |
| 'digraph {', | |
| ' graph [rankdir=TB]', | |
| ' node [style="filled"]', | |
| ' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]', | |
| ' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]', | |
| ' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]', | |
| ' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]', | |
| ' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]', | |
| ' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]', | |
| ' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]', | |
| ' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]', | |
| ' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]', | |
| ' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]', | |
| ' a0 -> a1', | |
| ' a0 -> a2', | |
| ' a1 -> a2', | |
| ' a0 -> a3', | |
| ' a1 -> a3', | |
| ' a2 -> a3', | |
| ' a0 -> a4', | |
| ' a1 -> a4', | |
| ' a2 -> a4', | |
| ' a3 -> a4', | |
| ' a0 -> a5', | |
| ' a1 -> a5', | |
| ' a2 -> a5', | |
| ' a3 -> a5', | |
| ' a4 -> a5', | |
| ' a0 -> a6', | |
| ' a1 -> a6', | |
| ' a2 -> a6', | |
| ' a3 -> a6', | |
| ' a4 -> a6', | |
| ' a5 -> a6', | |
| ' a0 -> a7', | |
| ' a1 -> a7', | |
| ' a2 -> a7', | |
| ' a3 -> a7', | |
| ' a4 -> a7', | |
| ' a6 -> a7', | |
| ' a0 -> a8', | |
| ' a1 -> a8', | |
| ' a2 -> a8', | |
| ' a3 -> a8', | |
| ' a4 -> a8', | |
| ' a6 -> a8', | |
| ' a7 -> a8', | |
| '}' | |
| ], | |
| [ | |
| 'digraph {', | |
| ' graph [rankdir=TB]', | |
| ' node [style="filled"]', | |
| ' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]', | |
| ' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]', | |
| ' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]', | |
| ' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]', | |
| ' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]', | |
| ' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]', | |
| ' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]', | |
| ' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]', | |
| ' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]', | |
| ' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]', | |
| ' a0 -> a1', | |
| ' a0 -> a2', | |
| ' a1 -> a2', | |
| ' a0 -> a3', | |
| ' a1 -> a3', | |
| ' a2 -> a3', | |
| ' a0 -> a4', | |
| ' a1 -> a4', | |
| ' a2 -> a4', | |
| ' a3 -> a4', | |
| ' a0 -> a5', | |
| ' a1 -> a5', | |
| ' a2 -> a5', | |
| ' a3 -> a5', | |
| ' a4 -> a5', | |
| ' a0 -> a6', | |
| ' a1 -> a6', | |
| ' a2 -> a6', | |
| ' a3 -> a6', | |
| ' a4 -> a6', | |
| ' a5 -> a6', | |
| ' a0 -> a7', | |
| ' a1 -> a7', | |
| ' a2 -> a7', | |
| ' a3 -> a7', | |
| ' a4 -> a7', | |
| ' a6 -> a7', | |
| ' a0 -> a8', | |
| ' a1 -> a8', | |
| ' a2 -> a8', | |
| ' a3 -> a8', | |
| ' a4 -> a8', | |
| ' a6 -> a8', | |
| ' a7 -> a8', | |
| ' a0 -> a9', | |
| ' a1 -> a9', | |
| ' a2 -> a9', | |
| ' a3 -> a9', | |
| ' a4 -> a9', | |
| ' a6 -> a9', | |
| ' a7 -> a9', | |
| ' a8-> a9', | |
| '}' | |
| ], | |
| ]; | |
| </script> |
Author
magjac
commented
Nov 19, 2017
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment