Public
Edited
Oct 31, 2023
Insert cell
Insert cell
function draw(ctx) {
var scale = 3
var r_val1 = 30 * scale;
var r_val2 = 60 * scale;
var r_val3 = 30 * scale;

var x1 = 200;
var y1 = 150;
var x4 = 200 + r_val1;
var y4 = 150
var x5 = 200;
var y5 = 150 + r_val2;

var a = Math.atan(r_val1 / r_val2);
var b = (Math.PI - a) / 2;
var c = r_val3 * (1 / Math.tan(b));
var x2 = 200 + r_val1 + c;
var y2 = 150;
var x3 = 200;
var y3 = 150 + r_val2 + c;

ctx.moveTo(x2, y2);
ctx.arcTo(x4, y4, x5, y5, r_val3);
ctx.arcTo(x5, y5, x3, y3, r_val3);
ctx.lineTo(x3, y3);
return ctx; // not mandatory, but will make it easier to chain operations
}
Insert cell
Insert cell
svgPath = draw(d3.path()).toString()
Insert cell
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