Published
Edited
May 27, 2020
2 forks
11 stars
d3 = require("d3")
dataset = [[10,10],[30,60],[90,60], [90,10], [180,10]]
line = d3.line()
path = line(dataset)
svg`<svg width=200 height=100 viewBox="0 0 200 100">
<path d="${path}" stroke="black" stroke-width="5" fill="none" />
</svg>`
lines = {
const NUM_LINES = 50
const N_SAMPLES = 50
const length = 600
const inputArray = Array(NUM_LINES).fill(0)
const xArray = Array(N_SAMPLES).fill(0)
const rows = inputArray.map((n, i) =>
xArray.map((n, j) => {
const x = 150 + j * (length / N_SAMPLES)
const distanceToCenter = Math.abs(j * (length / N_SAMPLES) - length / 2)
const random =
(Math.random() *
(distanceToCenter + 90 - length / 2) *
Math.max(250 - distanceToCenter, 0)) /
length
const y = 150 + i * (length / N_SAMPLES) + random
return [x, y]
})
)
return rows
}
paths = d3.line()
.x(d => d[0])
.y(d => d[1])
.curve(d3.curveBundle.beta(1));
paths(lines[0])
lines.map(line => `<path d="${paths(line)}" stroke="black" fill="none" stroke-width="3" >`)
svg`<svg width=900 height=900>
<rect x={0} y={0} width=900 height=900 fill="white" />
${lines.map(line => `<path d="${paths(line)}" stroke="black" fill="white" stroke-width="4" />`).join('\n')}
</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.
