Published
Edited
Apr 13, 2022
2 stars
svg = d3.select(svgRef)
nodes = svg
.selectAll('.node')
.data(data, (d, i) => i)
.enter()
.append('circle')
.attr('class', 'node')
.attr('r', 1)
.attr('stroke-width', 0)
.attr('cx', d => d[0])
.attr('cy', d => d[1])
.attr('fill', 'blue')
voronoi = delaunay.voronoi([0, 0, width, height]);
{
yield "I will provide Voronoi";
let selector = ".voronoi-polygons";
if (View.includes('Voronoi Polygons')) {
svg
.selectAll(selector)
.data([voronoi.render()])
.join('path')
.attr('class', () => selector.slice(1, selector.length))
.attr('d', d => d)
.attr('stroke', 'black')
.attr('opacity', 0.1);
yield "I have rendered Voronoi";
} else {
svg.selectAll(selector).remove();
("I've removed Voronoi.");
}
}
delaunay = d3.Delaunay.from(data)
//this is interesting because points are drawn by path...
delaunay.renderPoints()
delaunay.find([50, 200])
tree = d3
.quadtree()
.extent([
[0, 0],
[width, height]
])
.addAll(data)
blendMode = 'multiply'
html`<style>
h1,h2,h3,h4{
}
</style>`
import { checkbox } from '@jashkenas/inputs'
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.
