Published
Edited
Jan 28, 2021
md`# Support GeoJSON polygon issue #79`
data = {
let { polygon } = Flatten;
let geoJSON = {
type: "MultiPolygon",
coordinates: [
[[[102.0, 2.0], [103.0, 2.0], [103.0, 3.0], [102.0, 3.0], [102.0, 2.0]]],
[
[[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]],
[[100.2, 0.2], [100.2, 0.8], [100.8, 0.8], [100.8, 0.2], [100.2, 0.2]]
]
]
};
const poly = polygon(geoJSON.coordinates);
return [poly, ...poly.vertices];
}
transformed_data = {
let m = data2center(data,width,height);
let transformed_data = data.map(shape => shape.transform(m))
return transformed_data;
}
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.2.20")
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.
