{
const canvasWidth = 960;
const canvasHeight = 640;
const unit = 40;
const canvas = DOM.canvas(canvasWidth, canvasHeight);
const p = new paper.PaperScope();
paper.setup(canvas);
// Vertical Baseline
for (let i = 0; i < canvasWidth - unit; i += unit) {
new p.Path.Line({
from: [i + unit, unit],
to: [i + unit, canvasHeight - unit],
strokeColor: "#ECECEC"
});
}
// Horizontal Baseline
for (let i = 0; i < canvasHeight - unit; i += unit) {
new p.Path.Line({
from: [unit, i + unit],
to: [canvasWidth - unit, i + unit],
strokeColor: "#ECECEC"
});
}
const translate = (point) => {
return [(point[0] * unit + unit) + 11 * unit, (point[1] * -1 * unit + unit) + 7 * unit];
};
const Yaxis = new p.Path.Line({
from: translate([0, 6.5]),
to: translate([0, -6.5]),
strokeColor: "black",
strokeWidth: 1
});
const Xaxis = new p.Path.Line({
from: translate([-9.5, 0]),
to: translate([9.5, 0]),
strokeColor: "black",
strokeWidth: 1
});
const pointSize = 4;
//(0, 0)
const perimeter = new p.Path.Circle({
center: translate([0, 0]),
radius: 5 * unit,
strokeWidth: 2,
strokeColor: "#5463FF"
});
const x1 = 5 * Math.cos(angle * Math.PI / 180)
const y1 = 5 * Math.sin(angle * Math.PI /180)
const circlePointLineA = new p.Path.Line({
from: translate([0, 0]),
to: translate([x1, y1]),
strokeWidth: 2,
strokeColor: "#FFC300"
});
const circlePointLineB = new p.Path.Line({
from: translate([x1, y1]),
to: translate([x1, 0]),
dashArray: [10, 4],
strokeWidth: 2,
strokeColor: "#FFC300"
});
const rightTop = new p.Path.Circle({
center: translate([0, 0]),
radius: pointSize,
fillColor: "black"
});
const circlePoint = new p.Path.Circle({
center: translate([x1, y1]),
radius: pointSize,
fillColor: "red"
});
return canvas
}
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.
