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