Public
Edited
Mar 29, 2024
md`# Cut polygon with MultiLine #159`
data = {
const { point, segment, Polygon, Multiline } = Flatten;
const poly = new Polygon([
point(20, 20),
point(60, 20),
point(60, 60),
point(20, 60)
]);
const segments = [
segment(20, 20, 40, 40),
segment(40, 40, 50, 40),
segment(50, 40, 60, 60)
];
const m = new Multiline(segments);
const newPoly = poly.cut(m);
return [...newPoly.toArray(), ...newPoly.vertices];
}
transformed_data = {
let m = data2center(data, width, height);
let transformed_data = data.map((shape) => shape.transform(m));
return transformed_data;
}
svgString = {
const colors = ["lightgreen", "lightblue"];
let svgString = transformed_data.reduce(
(acc, shape, ind) => (acc += shape.svg({ fill: colors[ind] })),
""
);
return svgString;
}
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@1.5.0")
d3 = require("d3")
// Flatten = {
// const response = await fetch(
// "https://raw.githubusercontent.com/alexbol99/flatten-js/159-cut-polygon-with-multiline/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.
