Skip to content

Instantly share code, notes, and snippets.

@magjac

magjac/.block

Last active September 21, 2024 16:00
Show Gist options
  • Save magjac/f485e7b915c9699aa181a11e183f8237 to your computer and use it in GitHub Desktop.
Save magjac/f485e7b915c9699aa181a11e183f8237 to your computer and use it in GitHub Desktop.
Download ZIP
Growing Graphviz Edges
Raw
.block
height: 800
Raw
README.md

d3-graphviz demo of animated growth of entering edges.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/graphviz.umd.js"></script>
<script src="https://unpkg.com/[email protected]/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.schemeCategory10;
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>
@magjac
Copy link
Author

magjac commented Nov 19, 2017

grow-thumbnail

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment