startSingleAnimation = (data) => {
const svg = d3.select("#lineMap")
//Select Field and place the players
const circles = svg.selectAll("circle")
.data(data, function(d) { return d ? d.name : this.id; })
return circles
.enter().append("circle")
.attr("class", "agent")
.attr("cx", function(d) { return d.path[0].x; })
.attr("cy", function(d) { return d.path[0].y; })
.attr("r", 5)
.attr("id", function(d) { return d.name; })
.style("fill", function(d) { return d.color; })
.style("opacity", 0)
.transition()
.duration(300)
.style("opacity", 0.8)
.transition().call(transitionMap);
}
setStartTime = (data) => {
var t = d3.timeout(
function() {
startSingleAnimation([data]);
}, data.start)
return t
}
startAnimation = () => {
return data.map((d) => {
return setStartTime(d)
})
}
//Interrupt agents in motion
interruptAnimation = () => {
const selection = d3.selectAll(".agent")
return selection.interrupt();
}
restartAnimation = (data) => {
const selection = d3.selectAll(".agent")
selection.remove();
return startAnimation();
}
resumeAnimation = () => {
return d3.selectAll(".agent")
.transition().call(transitionMap);
}
//How do we find the current path index?
reverseAnimation = () => {
const pathIndexArrayReversed = pathIndexArray.slice()
const transitionMapReverse = (g) => {
(pathIndexArrayReversed.reverse()).forEach((x) => {
g = g.transition().call(transitionMaster, x)
})
}
return d3.selectAll(".agent")
.transition().call(transitionMapReverse);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
