stepRenderer = new StepRenderer({
points: new ScatterPlotRenderer(600),
tree: new TreeRenderer(400)
}).render(function*() {
let rootNode = new Node(new Point(0, 0), new Point(120, 120))
const findInsertedPoints = (node) => {
let point = null
if (node.point != null) {
point = [node.point.x, node.point.y]
point.fillStyle = "#ff0000"
}
if (!node.hasBeenPopulated) {
if (node.point != null) return [point]
return []
}
let res = []
res = res.concat(findInsertedPoints(node.topRightQuad))
res = res.concat(findInsertedPoints(node.topLeftQuad))
res = res.concat(findInsertedPoints(node.bottomLeftQuad))
res = res.concat(findInsertedPoints(node.bottomRightQuad))
return res
}
const buildTree = (node) => {
if (node == null) return []
let children = []
children = children.concat(buildTree(node.topRightQuad))
children = children.concat(buildTree(node.topLeftQuad))
children = children.concat(buildTree(node.bottomLeftQuad))
children = children.concat(buildTree(node.bottomRightQuad))
return {
fill: node.point != null ? "#ff0000" : "#1f1f1f",
children
}
}
for (let i = 0; i < points.length; i++) {
insertPoint(rootNode, points[i])
const pointsToRender = clone([...points, ...findInsertedPoints(rootNode)])
const linesToRender = clone(findLines(rootNode))
const treeToRender = clone(buildTree(rootNode))
yield {
points: renderer => renderer.render(pointsToRender, linesToRender),
tree: renderer => renderer.render(treeToRender)
}
}
});
function getPointsInRectangularRange(node, range) {
if (!node.hasBeenPopulated && node.point == null) {
return []
}
if (!range.doesOverlapWith(node.range)) {
return []
}
if (!node.hasBeenPopulated && range.isPointIn(node.point)) {
return [ node.point ]
}
if (!node.hasBeenPopulated) {
return []
}
let res = []
res = res.concat(getPointsInRectangularRange(node.topLeftQuad, range))
res = res.concat(getPointsInRectangularRange(node.topRightQuad, range))
res = res.concat(getPointsInRectangularRange(node.bottomLeftQuad, range))
res = res.concat(getPointsInRectangularRange(node.bottomRightQuad, range))
return res
}
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.
