Published
Edited
Mar 16, 2021
1 fork
function update (cx, cy) {
let tris = [] // meh
for (let x = cellSize / 2, _cols = cols * cellSize; x < _cols; x += cellSize) {
for (let y = cellSize / 2, _rows = rows * cellSize; y < _rows; y += cellSize) {
tris.push({x, y, angle: Math.atan2(cy - y, cx - x)})
}
}
const marker = d3.select(svg).selectAll('circle')
.data([[cx, cy]]) // mehhhh
.attr('transform', d => `translate(${d})`)
marker.enter().append('circle')
.attr('r', 5)
.style('stroke', '#fff')
.style('fill', 'none')
.attr('transform', d => `translate(${d})`)
marker.exit().remove()
const path = d3.select(svg).selectAll('path')
.data(tris)
.attr('transform', transform)
.style('fill', color)
path.enter().append('path')
.attr('d', d => `M${triangle.join('L')}Z`)
.attr('transform', transform)
.style('fill', color)
path.exit().remove()
}
d3 = require('d3@v6')
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.
