Full Stack Software Engineer at Alteryx in Boston, MA
{
// width = 40
let ctx = DOM.context2d(width, width);
ctx.fillStyle = "white"
const nPts = 100
const scale = d3.scaleLinear()
.domain([0, nPts])
.range([0, width])
const xPts = d3.range(nPts).map(pt => {
const x = 5,
y = scale(pt)
ctx.moveTo(x, y);
ctx.arc(x, y, 4, 0, 2*Math.PI);
return {x,y}
})
const yPts = d3.range(nPts).map(pt => {
const x = scale(pt),
y = 5
ctx.moveTo(x, y);
ctx.arc(x, y, 4, 0, 2*Math.PI);
return {x,y}
})
console.log(yPts)
ctx.fillStyle = "black"
ctx.fill()
for (let i = 0 ; i < nPts ; i++) {
// const start = xPts[i]
// console.log(start)
// const end = yPts[nPts-1-i]
// console.log(nPts, end)
const start = xPts[i]
const end = yPts[nPts-1-i]
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.lineTo(end.x, end.y);
ctx.stroke();
}
return ctx.canvas
}
d3 = require("d3@5")
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.
