I map 🗺️ & graph 📈 data 🈸
circle = html`
<style>
div.circle {
border: 3px solid #f00;
border-radius: 50%;
width: 12px;
height: 12px;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fcc;
}
</style>
<div class="circle">
</div>`
π = Math.PI
τ = 2 * π
rad = 180 / π
radius = 3
lineWidth = 3
lineColor = '#000'
dot = {
const boxSize = 2*(radius + lineWidth);
const canvas = DOM.canvas(boxSize, boxSize);
const context = canvas.getContext('2d');
context.fillStyle = '#333';
context.strokeStyle = lineColor;
context.lineWidth = lineWidth;
context.beginPath();
context.arc(radius + lineWidth/2, radius + lineWidth/2, radius,
0, τ, true); // startAngle, endAngle, counterclockwise
context.stroke();
return canvas;
}
{
download;
return save(dot, 'dot.png');
}
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.
