The avatar for @alexbol99
Alex Bol
Computational geometry and data visualization
Published
Edited
Jan 11, 2020
1 fork
Insert cell
md`# Demo SVG and Canvas 2d`
Insert cell
Insert cell
{
let svg = DOM.svg(width, height)
let stage = d3.select(svg)
stage.html(transformed_polygon.svg({fill:"lightcyan"}))
return svg;
}
Insert cell
Insert cell
{
const canvas = DOM.canvas(width, height);
const context = canvas.getContext("2d");

context.clearRect(0, 0, width, height);

for (let face of transformed_polygon.faces) {
const p = new Path2D(face.svg());
// text.stroke = "1px";
context.fillStyle = 'lightcyan'
context.fill(p);
context.stroke(p);
}

return canvas;
}
Insert cell
height = 400
Insert cell
Insert cell
Insert cell
import {data2center} from "@alexbol99/lib"
Insert cell
Insert cell
Flatten = require("@flatten-js/core")
Insert cell
d3 = require("d3")
Insert cell

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.
Learn more