test
Plot.mark render transform
This is your main text.
Another paragraph continues hereā¦
i thnik the This note appears in the margin on wide screens. feeling most This note appears in the margin on wide screens. people have
const pulse = (index, scales, values, dimensions, context, next) => {
console.log({ index, scales, values, dimensions, context });
const el = next(index, scales, values, dimensions, context);
el.style.animation = "pulse 1.5s ease-in-out infinite";
el.style.transformOrigin = "center";
el.style.transformBox = "fill-box";
return htl.svg`<g>
<style>@keyframes pulse {
0% { transform: scale(1, 1); opacity: 0; }
50% { opacity: 0.3; }
100% { transform: scale(3, 3); opacity: 0; }
}</style>
${el}
</g>`;
}
const chart = display(Plot.plot({
marks: [
Plot.lineY(aapl, {x: "Date", y: "Close"}),
Plot.dot(aapl, Plot.selectMaxX({x: "Date", y: "Close", fill: "steelblue", render: pulse})),
Plot.dot(aapl, Plot.selectMaxX({x: "Date", y: "Close", fill: "steelblue"})),
]
}))
Moo
Documented https://observablehq.com/@tophtucker/plot-simple-render-transform
also https://observablehq.com/@fil/plot-animate-a-bar-chart/2