Published
Edited
Nov 6, 2018
Importers
Insert cell
Insert cell
Insert cell
Insert cell
direction = function(rot = 0) {
const w = 100,
h = w,
mid = w / 2,
r = 40,
mc = "black";
return svg`<svg width=${w} height=${h} viewBox="0 0 ${w} ${h}" style="width: 100%; height: auto; max-width: 640px;">
<clipPath id="myClip" clipPathUnits="userSpaceOnUse">
<circle cx=${mid} cy=${mid} r=${r} />
</clipPath>
<circle cx=${mid} cy=${mid} r=${r} stroke="black" fill="none" />
<g id="direction" transform="rotate(${rot}, ${mid}, ${mid})" clip-path="url(#myClip)" >
<path d="M${mid},90 81,25 19,25z" fill=${mc} stroke="none" />
<line x1=${mid} y1=${mid} x2=${mid} y2=${0} stroke=${mc} stroke-width=15 />
</g>
<text fill="white" stroke="black" x=${mid} y=${mid +
3} text-anchor="middle" font-size=40 font-family="Arial, sans-serif" alignment-baseline="middle">${getText(
rot
)}</text>
</svg>`;
}
Insert cell
Insert cell
Insert cell

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.
Learn more