Published
Edited
Feb 11, 2021
1 star
{
function toSegments(arr) {
return arr.map((point, i) => [i, point * (height / 4) + height / 2])
}
function transformedData(fn) {
return data.map(d => fn(d * period))
}
function line(fn) {
return d3.line()(toSegments(transformedData(fn)))
}
const sine = line(Math.sin)
const sinePlus = line(x => Math.sin(x + Math.PI))
const cosine = line(Math.cos)
const cosinePlus = line(x => Math.cos(x + Math.PI))
return svg`<svg width=${width} height=${height} viewBox="0 0 ${width} ${height}">
<g stroke-width='6'>
<path d="${sine}" stroke="red" fill="none" />
<path d="${cosine}" stroke="blue" fill="none" />
<path d="${cosinePlus}" stroke="green" fill="none" />
<path d="${sinePlus}" stroke="black" fill="none" />
</g>
</svg>`
}
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.
