data = [[[5,10],[50,5],[100,10]]]
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, height, width]).attr("transform", "rotate(-90)scale(0.2)")
for(var iteration=0; iteration<500; iteration++){
data.forEach((curveData,i) => {
var factor = 0.12;
curveData = curveData.map(d=>[
d[0] + Math.random()*d[0]*factor - d[0]*factor,
d[1] + Math.random()*d[1]*factor - d[1]*factor + Math.random() * (-2)
])
console.log(curveData)
var g = svg.append('g').attr('transform', `translate(0,${-iteration*width/40})`);
g.append('path')
.attr('stroke', 'black')
.attr('stroke-width', Math.random()* 0.6 + 10)
.attr('fill', 'none')
.attr('d', line(curveData)).attr('transform', 'scaleX(-1)scaleY(-1)')
});
}
return svg.node();
}
height = 3000
line = d3.line()
.x(d=>x(d[0]))
.y(d=>y(d[1]))
.curve(d3.curveNatural)
y = d3.scaleLinear([0,100], [height,0])
x = d3.scaleLinear([0,100], [0,width])
d3 = require("d3@6")
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.
