Developer @Observable
Published
Edited
May 4, 2022
1 fork
20 stars
el = {
const el = htl.html`<svg width="${walkerHeight}" height="${walkerHeight}" >
<g transform="translate(${walkerHeight / 2}, ${walkerHeight / 2})">
<g class="joints" />
<g class="bones" />
</g>
</svg>`;
const z = d3
.scaleLinear()
.domain([-50, 50])
.range([walkerHeight / 100, walkerHeight / 60]);
const joints = d3
.select(el)
.select("g.joints")
.selectAll("circle")
.data(
drawStyle === "Both" || drawStyle === "Joints only"
? walker.getMarkers(walkerHeight)
: []
)
.join("circle")
.attr("fill", "black");
const bones = d3
.select(el)
.select("g.bones")
.selectAll("line")
.data(
drawStyle === "Both" || drawStyle === "Bones only"
? walker.getLineMarkers(walkerHeight)
: []
)
.join("line")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1);
function update() {
joints
.data(walker.getMarkers(walkerHeight))
.attr("cx", ({ x }) => x)
.attr("cy", ({ y }) => y)
.attr("r", (d) => z(d.z));
bones
.data(walker.getLineMarkers(walkerHeight))
.attr("x1", ([{ x }]) => x)
.attr("y1", ([{ y }]) => y)
.attr("x2", ([, { x }]) => x)
.attr("y2", ([, { y }]) => y);
}
update();
return Object.assign(el, { update });
}
{
while (true) yield el.update();
}
paramBounds = {
let tmpWalker = new BMWalker();
return {
bodyStructure: [tmpWalker.minBodyStructure, tmpWalker.maxBodyStructure],
weight: [tmpWalker.minWeight, tmpWalker.maxWeight],
nervousness: [tmpWalker.minNervousness, tmpWalker.maxNervousness],
happiness: [tmpWalker.minHappiness, tmpWalker.maxHappiness]
};
}
walker = new BMWalker(walkerParams.bodyType)
walkerParams.bodyType
{
walker.setWalkerParam(
walkerParams.bodyStructure,
walkerParams.weight,
walkerParams.nervousness,
walkerParams.happiness
);
return walkerParams;
}
{
walker.setCameraParam(cam.azimuth, cam.spin ? 1 : 0, cam.elevation, cam.roll);
return cam;
}
BMWalker = bmwalker.BMWalker
bodyTypes = ({
human: bmwalker.TYPE_HUMAN,
pigeon: bmwalker.TYPE_PIGEON,
cat: bmwalker.TYPE_CAT,
box: bmwalker.TYPE_BOX
})
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.
