md`# Cut polygon with line`
data = {
const { polygon, point, vector, line, multiline } = Flatten;
const poly = polygon([
[
[0, 0],
[100, 0],
[100, 100],
[0, 100]
],
[
[30, 50],
[50, 70],
[70, 50],
[50, 30]
]
]);
let l = line(point(30, 30), vector(0, 1));
let res_poly = poly.cutWithLine(l);
return [res_poly];
}
transformed_data = {
let m = data2center(data, width, height);
let transformed_data = data.map((shape) => shape.transform(m));
return transformed_data;
}
svgString = {
let svgString = transformed_data.reduce(
(acc, shape, i) => (acc += shape.svg(stageBox)),
""
);
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.3.3")
// Flatten = {
// const response = await fetch(
// "https://raw.githubusercontent.com/alexbol99/flatten-js/master/dist/main.umd.js"
// );
// const blob = await response.blob();
// return require(URL.createObjectURL(blob)).catch(() => window.flatten);
// }
d3 = require("d3")
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.
