flatten-js Tutorials. Getting Started
Flatten = require('@flatten-js/core')
height = {
return width > 300 ? 400 : 200; // less value for narrow device
}
{
// Define two random segments
let segment1 = new Flatten.Segment(
new Flatten.Point(Math.random()*width, Math.random()*height),
new Flatten.Point(Math.random()*width, Math.random()*height)
)
let segment2 = new Flatten.Segment(
new Flatten.Point(Math.random()*width, Math.random()*height),
new Flatten.Point(Math.random()*width, Math.random()*height)
)
return {segment1, segment2};
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
bisectors = {
let {point,vector,line} = Flatten;
let {segment1, segment2} = model;
// Get notmalized vectors of the segments
// Vector may be define by start and end point
let vec1 = vector(segment1.start, segment1.end);
let vec2 = vector(segment2.start, segment2.end);
vec1 = vec1.normalize();
vec2 = vec2.normalize();
// Get intersection between lines holding given segments
// Line in FlattenJS defined by point it passing through and a normal vector
let line1 = line(segment1.start, vec1.rotate90CCW());
let line2 = line(segment2.start, vec2.rotate90CCW());
let ip = line1.intersect(line2);
let pt = ip.length === 0 ? // in case lines are parallels take middle between two starts
point( (segment1.start.x + segment2.start.x)/2, (segment1.start.y + segment2.start.y)/2) :
ip[0]; // otherwise take intersection point
// Get two bisectoral lines
let bvec = vec1.add(vec2);
let b1 = line(pt, bvec);
let b2 = line(pt, bvec.rotate90CCW());
return {b1, b2, pt}
}
d3 = require("d3@5")
{
// Define svg container element using Observable's DOM method
let node = DOM.svg(width, height);
// Create stage selection
let stage = d3.select(node);
let {segment1, segment2} = model;
let box = new Flatten.Box(0,0,width,height);
let data = [segment1, segment2, ...segment1.vertices, ...segment2.vertices];
// Create svg content using built-in svg() method for each shape
let svg = data.reduce( (acc, shape) => acc + shape.svg(), "" );
// Concatenate svg strings for lines
let svg1 = bisectors.b1.svg(box, {stroke:"lightgrey"});
svg = svg1 ? svg + svg1 : svg;
let svg2 = bisectors.b2.svg(box, {stroke:"lightgrey"});
svg = svg2 ? svg + svg2 : svg;
// Concatenate svg string for intersection point
svg += bisectors.pt.svg({fill:"none",r:5,stroke:"blue"});
// Set innerHTML property of svg container to svg string
stage.html(svg);
return node; //stage.node()
}
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.
