startAnimation = (data) => {
const svg = d3.select("#lineMap")
//Select Field and place the players
return svg.selectAll("circle")
.data(data)
.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(1000)
.style("opacity", 0.8)
.transition().call(transitionMap);
}
//Interrupt agents in motion
interruptAnimation = () => {
const selection = d3.selectAll(".agent")
return selection.interrupt();
}
restartAnimation = (data) => {
const selection = d3.selectAll(".agent")
selection.remove();
return startAnimation(data);
}
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);
}
//Layout field
html`<svg id="lineMap" width=688 height=599>
<image xlink:href="http://www.essmek.com/ESSMEK_ENG/files/lay_out_ruote.jpg" x="0" y="0"/>
</svg>`
setAppearanceTime = (delayTime, data) => {
var t = d3.timeout(
function() {
startAnimation(data);
}, delayTime)
return t
}
data.map((d) => {
return setAppearanceTime(1500, [d])
})
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.
