Public
Edited
Dec 2, 2023
2 forks
md`# Cut polygon with line`
data = {
const { polygon, point, vector, line, multiline } = Flatten;
const poly = polygon([
[0, 0],
[100, 0],
[100, 100],
[0, 100]
]);
const l = line(point(50, 50), vector(0, 1));
const ip = l.intersect(poly);
const ip_sorted = l.sortPoints(ip);
const ml = multiline([l]).split(ip_sorted);
const [p1, p2] = poly.cut(ml);
return [p1, p2];
}
transformed_data = {
let m = data2center(data,width,height);
let transformed_data = data.map(shape => shape.transform(m))
return transformed_data;
}
{
let p = new Flatten.Polygon([[1,1],[1,2],[2,2],[2,1],[1,1]])
p.isValid()
return p
}
stageBox = new Flatten.Box(0, 0, width, height)
height = 400
function data2center(data, width, height) {
let {matrix} = Flatten;
let box = data.reduce( (acc,shape) => acc = acc.merge(shape.box), new Flatten.Box() )
let data_width = box.xmax - box.xmin || 400;
let data_height = box.ymax - box.ymin || 400;
let k = Math.min( width / (1.1*data_width), height / (1.1*data_height) );
let tx = width/2 - k*(box.xmin + box.xmax)/2;
let ty = height/2 - k*(box.ymin + box.ymax)/2;
let m = matrix().translate(tx,ty).scale(k,k)
return m;
}
Flatten = require("@flatten-js/core")
d3 = require("d3")
// Flatten = {
// const response = await fetch(
// "https://raw.githubusercontent.com/alexbol99/flatten-js/svg_attributes/dist/main.umd.js"
// );
// const blob = await response.blob();
// return require(URL.createObjectURL(blob)).catch(() => window.flatten);
// }
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.
