Full Stack Software Engineer at Alteryx in Boston, MA
{
const width = 1000, height = 1000
let ctx = DOM.context2d(width, width);
const rx = d3.randomUniform(0, width)
const ry = d3.randomUniform(0, height)
const pts = d3.range(100).map(() => [rx(), ry()])
// for( let i = 0 ; i < pts.length ; i++ ) {
// ctx.beginPath();
// ctx.arc(pts[i][0], pts[i][1], 2, 0, 2 * Math.PI);
// ctx.fill();
// }
const delaunay = d3.Delaunay.from(pts)
const voronoi = delaunay.voronoi([0.5, 0.5, width - 0.5, height - 0.5])
for( let i = 0 ; i < pts.length ; i++ ) {
var c = d3.hsl("orange");
c.h += d3.randomUniform(-5, 5)();
c.s += d3.randomUniform(-.1, .1)();
c + ""; // rgb(198, 45, 205)
const s = new Shape(voronoi.cellPolygon(i))
const s2 = s.scale(0.9)
const s3 = chaikin(s2, 0.25, 5)
s3.setFill(c)
s3.setStroke(null)
s3.draw(ctx)
}
return ctx.canvas;
}
import {chaikin} from '@dvreed77/chaikin'
import {Shape} from '@dvreed77/blocks'
d3 = require('d3@5', "d3-delaunay@^5.1")
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.
