Wise Fool.
Visioneer.
Published
Edited
Oct 26, 2021
7 stars
Also listed in…
Discover
viewof dot = Dot({
width,
height,
value: jolt(),
easement: d3.easeBounce,
duration: 1000
})
dot
Inputs.button([["Manual jolt", () => set(viewof dot, jolt(dot))]])
jumper = {
while (true) {
yield Promises.delay(every, jolt(dot));
}
}
set(viewof dot, jumper)
set = (input, value) => {
input.value = value;
input.dispatchEvent(new Event("input"), {bubbles: true});
return value
}
// takes configuration object for a clickable circle
// returns DOM node with circle element and process() method
Dot = ({ width, height, value, event, easement, duration }) => {
const sketch = d3.create("svg").attr("width", width).attr("height", height);
const node = sketch.node();
const element = sketch
.append("circle")
.attr("cx", value.x)
.attr("cy", value.y)
.attr("r", value.r)
.attr("stroke-width", height / 2)
.attr("stroke", "red")
.on("click", () => set(node, jolt(node.value)))
;
// const element = circle;
const moveOverPlease = shapeShifter({element, duration, easement});
return Object.defineProperty(
node,
"value",
{
get: () => value,
set: (newValue) => moveOverPlease(value = newValue),
enumerable: true
}
);
}
// takes animation configuration parameters: {element, duration, easement}
// returns function that takes {event} and ⚠️ performs animation on event target’s kind
shapeShifter = ({element, duration, easement}) => ({r, x, y}) => {
const animation = element
.transition()
.ease(easement)
.duration(duration);
animation
.attr("r", r)
.attr("cx", x)
.attr("cy", y);
}
// takes a value
// returns a value after having executed some ‘business logic’
jolt = (value) => ({
x: anyNatural(0, width),
y: anyNatural(0, height),
r: anyNatural(20, 400),
count: (value?.count ? value.count : 0) + 1 // if there is no or an invalid count, create one and/or reset to zero
})
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.
