plot = {
console.log ('plot redefined');
let plotArea = d3.select(maindiv).select('svg');
let x = screenX, y = screenY;
const curveColor = ["DarkBlue", "DarkGreen", "DarkRed"];
// Draw the mocap projection curves
let curves = plotArea.selectAll("path.projcurve").data (mocaps);
curves.exit().remove();
curves.enter().append("path").attr("class", "projcurve").merge(curves)
.attr("stroke", (d,i) => curveColor[i%curveColor.length])
.attr("stroke-width", (d,i) => i == currentMocap ? 2.5 : 1.5)
.attr("fill", "none")
.attr("d", function (d) {
return line(d.projection)
});
// Draw the keyframes
let kfs = plotArea.selectAll("circle.key").data(kfProjection);
kfs.exit().remove();
console.log(!!kfCheckBox);
console.log("kfCheckBox = " + kfCheckBox);
let display = !!kfCheckBox ? "inline" : "none";
kfs.enter().append("circle").attr("class", "key")
.call (kfDrag)
.merge(kfs)
.attr("cx", d => x(d[1]))
.attr("cy", d => y(d[2]))
.attr("r", 8)
.attr("fill", "red")
.attr("opacity", 0.6)
.style("display", display);
// Draw the black circles
let projection = currentMocap == null ? [] : mocaps[currentMocap].projection;
let join = plotArea.selectAll("circle.frame").data(projection);
join.exit().remove();
join.enter().append("circle")
.attr("class", "frame")
.merge(join)
.attr("cx", d => x(d[0]))
.attr("cy", d => y(d[1]))
.attr("r", 4)
.attr("fill", "black")
.attr("opacity", 0.6)
.on ("click", function (d, i) { mutable currentFrame = i })
}
renderer = {
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(rendererSize.width, rendererSize.height);
renderer.setPixelRatio(devicePixelRatio);
invalidation.then(function () {
renderer.dispose();
});
return renderer
}
controls = {
let controls = new THREE.EditorControls(camera, renderer.domElement);
let controlsUpdate = () => renderer.render(scene, camera);
controls.addEventListener("change", controlsUpdate);
invalidation.then(function () {
controls.removeEventListener("change", controlsUpdate);
controls.dispose();
});
return controls;
}
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.
