Published
Edited
Dec 18, 2020
6 stars
chart = {
let offset = 0,
noiseFactor = 0.05
const margin = {
top: 10,
right: 10,
bottom: 10,
left: 10
}
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height)
.style('background-color', '#1a1a1a')
svg.selectAll('g')
.data( data )
.join('g')
.attr('transform', d => `translate(${ margin.left + d.x },${ margin.top + d.y })`)
.call(g => g
.append('line')
.attr('x1', 0)
.attr('y1', 0)
.style('stroke', 'black')
.style('stroke-width', 3)
.style('stroke-linecap', 'round')
)
while(true) {
svg.selectAll('line')
.attr('x2', d => gapSize * Math.sin( 2 * Math.PI * n.perlin2(d.xVal * noiseFactor + offset, d.yVal * noiseFactor + offset) ))
.attr('y2', d => gapSize * Math.cos( 2 * Math.PI * n.perlin2(d.xVal * noiseFactor + offset, d.yVal * noiseFactor + offset) ))
.style('stroke', d => color(n.perlin2(d.xVal * noiseFactor + offset, d.yVal * noiseFactor + offset)))
offset += 0.01
yield svg.node()
await Promises.tick(1000/30)
}
}
gapSize = 20
color = d3.interpolateRainbow
width = 960
height = 500
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.
