chart = 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"})),
]
})
pulse = (index, scales, values, dimensions, context, next) => {
mutable debug = { 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>`;
}
mutable debug = {}
debug.scales.x
chart.scale("x")
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.
