Public
Edited
Feb 16, 2023
1 fork
square
viewof square = Square({
height,
width,
value: update(),
easement: d3.easeCubic,
duration: 1000
})
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
Square = ({ width, height, value, event, easement, duration }) => {
const svg = d3.create("svg").attr("width", width).attr("height", height);
const node = svg.node();
const element = svg
.append("rect")
.attr("x", value.x)
.attr("y", value.y)
.attr("height", value.s)
.attr("width", value.s)
.attr("fill", "black")
.on("click", () => set(node, update(node.value)));
// const element = circle;
const animate = animator({ element, duration, easement });
return Object.defineProperty(node, "value", {
get: () => value,
set: (newValue) => animate((value = newValue)),
enumerable: true
});
}
// takes animation configuration parameters: {element, duration, easement}
// returns function that takes {event} and ⚠️ performs animation on event target’s kind
animator = ({ element, duration, easement }) =>
({ s, fill, x, y }) => {
const animation = element.transition().ease(easement).duration(duration);
animation
.attr("height", s)
.attr("width", s)
.attr("fill", fill)
.attr("x", x)
.attr("y", y);
}
update = (value) => ({
s: anyNatural(20, 100),
fill: d3.schemeCategory10[Math.floor(Math.random() * 10)],
// getter structure lets me reference s from other attributes
get x() {
return anyNatural(0, width - this.s);
},
get y() {
return anyNatural(0, height - this.s);
},
count: (value?.count ? value.count : 0) + 1 // if there is no or an invalid count, create one and/or reset to zero
})
anyNatural = (min, max) => +(min + (max - min) * Math.random()).toFixed(0)
height = 200
Math.floor(Math.random() * 10 + 1)
d3.schemeCategory10[10]
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.
