Published
Edited
Sep 29, 2020
2 forks
2 stars
md`# Curved lines`
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height])
for(var iteration=0; iteration<100; iteration++){
data.forEach(curveData => {
var factor = 0.23;
curveData = curveData.map(d=>[
d[0] + Math.random()*d[0]*factor - d[0]*factor,
d[1] + Math.random()*d[1]*factor - d[1]*factor
])
svg.append('path')
.attr('stroke', 'black')
.attr('stroke-width', 0.2)
.attr('fill', 'none')
.attr('d', line(curveData))
});
}
return svg.node();
}
data = [
[[10,45],[30,45],[50,10],[70,45],[90,45]],
[[10,55],[30,52],[50,50],[60,53],[90,55]],
[[10,60],[30,60],[50,90],[70,60],[90,60]]
]
line = d3.line()
.x(d=>x(d[0]))
.y(d=>y(d[1]))
.curve(d3.curveBasis)
height = 500
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.
