Published
Edited
May 28, 2021
7 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function linetorect(points) {
let { x1, y1, x2, y2 } = points;
const dist = points.var / 2;
const slope = (y2 - y1) / (x2 - x1);
const angle = Math.atan(slope);
const linelength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
const cos = Math.cos(angle);
const sin = Math.sin(angle);

if (x1 > x2) {
x1 = x1 - cos * r1;
y1 = y1 - sin * r1;
x2 = x2 + cos * r2;
y2 = y2 + sin * r2;
} else {
x1 = x1 + cos * r1;
y1 = y1 + sin * r1;
x2 = x2 - cos * r2;
y2 = y2 - sin * r2;
}

let coords;
if (r1 + r2 >= linelength) {
coords = [];
} else {
let x1bis = x1 + sin * dist;
let y1bis = y1 - cos * dist;
let x1ter = x1 - sin * dist;
let y1ter = y1 + cos * dist;

let x2bis = x2 + sin * dist;
let y2bis = y2 - cos * dist;
let x2ter = x2 - sin * dist;
let y2ter = y2 + cos * dist;

coords = [
[
[x1bis, y1bis],
[x1ter, y1ter],
[x2ter, y2ter],
[x2bis, y2bis],
[x1bis, y1bis]
]
];
}
return {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: coords
},
properties: { var: points.var }
};
}
Insert cell
Insert cell
Insert cell
Insert cell
recy = linetoarrow(dots)
Insert cell
Insert cell
Insert cell
d3 = require("d3@6")
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