Skip to content

Instantly share code, notes, and snippets.

@magjac
Last active January 16, 2024 07:13
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save magjac/4acffdb3afbc4f71b448a210b5060bca to your computer and use it in GitHub Desktop.
Save magjac/4acffdb3afbc4f71b448a210b5060bca to your computer and use it in GitHub Desktop.
d3-graphviz Demo
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v5.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>
var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz()
.transition(function () {
return d3.transition("main")
.ease(d3.easeLinear)
.delay(500)
.duration(1500);
})
.logEvents(true)
.on("initEnd", render);
function render() {
var dotLines = dots[dotIndex];
var dot = dotLines.join('');
graphviz
.renderDot(dot)
.on("end", function () {
dotIndex = (dotIndex + 1) % dots.length;
render();
});
}
var dots = [
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728"]',
' b [fillcolor="#1f77b4"]',
' a -> b',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728"]',
' c [fillcolor="#2ca02c"]',
' b [fillcolor="#1f77b4"]',
' a -> b',
' a -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728"]',
' b [fillcolor="#1f77b4"]',
' c [fillcolor="#2ca02c"]',
' a -> b',
' a -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728", shape="box"]',
' b [fillcolor="#1f77b4", shape="parallelogram"]',
' c [fillcolor="#2ca02c", shape="pentagon"]',
' a -> b',
' a -> c',
' b -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="yellow", shape="star"]',
' b [fillcolor="yellow", shape="star"]',
' c [fillcolor="yellow", shape="star"]',
' a -> b',
' a -> c',
' b -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728", shape="triangle"]',
' b [fillcolor="#1f77b4", shape="diamond"]',
' c [fillcolor="#2ca02c", shape="trapezium"]',
' a -> b',
' a -> c',
' b -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728", shape="box"]',
' b [fillcolor="#1f77b4", shape="parallelogram"]',
' c [fillcolor="#2ca02c", shape="pentagon"]',
' a -> b',
' a -> c',
' b -> c',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728"]',
' b [fillcolor="#1f77b4"]',
' c [fillcolor="#2ca02c"]',
' a -> b',
' a -> c',
' c -> b',
'}'
],
[
'digraph {',
' node [style="filled"]',
' b [fillcolor="#1f77b4"]',
' c [fillcolor="#2ca02c"]',
' c -> b',
'}'
],
[
'digraph {',
' node [style="filled"]',
' b [fillcolor="#1f77b4"]',
'}'
],
];
</script>
@Capstan
Copy link

Capstan commented May 22, 2018

Seems to still work with modern versions:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.1/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@2.1.0/build/d3-graphviz.min.js"></script>

Not sure how to make pull requests to gists, so sorry if this is bad form.

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