Skip to content

Instantly share code, notes, and snippets.

@magjac

magjac/index.html

Last active September 21, 2024 16:15
Show Gist options
  • Save magjac/69dc955a2e2ee085f60369c4a73f92a6 to your computer and use it in GitHub Desktop.
Save magjac/69dc955a2e2ee085f60369c4a73f92a6 to your computer and use it in GitHub Desktop.
Download ZIP
d3-graphviz Shape Tweening Demo
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>
var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz()
.transition(function () {
return d3.transition("main")
.ease(d3.easeLinear)
.delay(40)
.duration(2000);
})
.logEvents(true)
.on("initEnd", render);
function render() {
var dotLines = [
'digraph {',
' node [style="filled"]',
];
for (i = 0; i < shapes.length; i++) {
if (dotIndex % 2 == 0) {
shape = shapes[(dotIndex / 2) % shapes.length];
} else {
shape = shapes[i % shapes.length];
}
dotLines.push(' ' + i + ' [label="' + shape + '" fillcolor="' + colors[i % 10] +'" shape="' + shape + '"]');
}
dotLines = dotLines.concat([
' 0 -> 1 -> 2 -> 3',
' 4 -> 5 -> 6 -> 7',
' 8 -> 9 -> 10 -> 11',
' 12 -> 13 -> 14 -> 15',
' 16 -> 17 -> 18 -> 19',
]);
dotLines.push('}');
var dot = dotLines.join('');
graphviz
.renderDot(dot)
.on("end", function () {
dotIndex += 1;
render();
});
}
var shapes = [
// "box",
"polygon",
"ellipse",
// "oval",
"circle",
"point",
"egg",
"triangle",
"diamond",
"trapezium",
"parallelogram",
"house",
"pentagon",
"hexagon",
"septagon",
"octagon",
"invtriangle",
"invtrapezium",
"invhouse",
// "rect",
// "rectangle",
"square",
"star",
"cds",
];
var colors = d3.schemeCategory10;
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment