design+data+people nerd ❦ previously partner at IDEO, co-founded Datascope
<svg width=100 height=100 viewBox="0 -20 100 100">
${face("rgb(25,25,25)", 1)}
</svg>
// see https://observablehq.com/@observablehq/plot-custom-markers
// They all blink at the same time. Solving this probably requires something other than "marker" because it's one thing that's referenced.
Plot.plot({
marks: [
Plot.line(sftemp.slice(-90, -10), {
x: "date",
y: "high",
stroke: "rgb(0,100,200)",
marker: faceMarker(15, 1.5)
})
]
})
<style>
/* css animations adapted from https://dev.to/5t3ph/how-to-create-an-animated-svg-face-with-css-5djd */
svg {
overflow: visible;
}
.wink > .left-eye, .wink > .right-eye {
transform: scale(1);
transform-origin: 45% 45%;
animation: wink 250ms ease-in-out 1;
}
.blink > .left-eye, .blink > .right-eye {
transform: scale(1);
animation: wink 250ms ease-in-out 1;
}
.eye .white {
fill: white;
}
.eyebrow {
stroke-linecap: round;
/*display: none;*/
}
@keyframes wink {
50% {
transform: scale(1.2, 0.1);
}
0%, 100% {
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
* {
-webkit-animation-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
</style>
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.
