Heptagram
md`Bent paths describing a timeline with randomly distributed circles`
{
const width = 950
const height = 950
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
const lineGenerator = d3.line()
.curve(d3.curveCardinal);
// const vpitch = 180
const numpaths = 8
const path_pitchx = 10
const path_pitchy = 12
for (let pp = 1; pp < numpaths; pp++) {
let mypoints = []
for (let turns = 0; turns < 9; turns++) {
let check = turns % 2
if (check == 0) {
mypoints.push([150, -220 + turns * 140 + pp * path_pitchx])
mypoints.push([150, -220 + turns * 140 + 130 + pp * path_pitchy])
for (let it = 0; it < 4; it++) {
const randx = 80 * Math.random() - 10
const randy = 80 * Math.random() - 10
group
.append('circle')
.attr('cx', 180 + it * 160 + randy)
.attr('cy', 80 + turns * 140 + randx)
.attr('r', 2 + 5 * Math.random())
.style('stroke-width', 1)
.style("opacity", 1)
.style("fill", d3.rgb(10, 120, 150));
}
}
else {
mypoints.push([800, -220 + turns * 140 + pp * path_pitchx])
mypoints.push([800, -220 + turns * 140 + 130 + pp * path_pitchy])
for (let it = 0; it < 4; it++) {
const randx = 80 * Math.random() - 10
const randy = 80 * Math.random() - 10
group
.append('circle')
.attr('cx', 260 + it * 160 + randy)
.attr('cy', 80 + turns * 140 + randx)
.attr('r', 2 + 3 * Math.random())
.style('stroke-width', 1)
.style("opacity", 1)
.style("fill", d3.rgb(150, 120, 15));
}
}
}
const pathData = lineGenerator(mypoints);
group
.append('path')
.attr('d', pathData)
.style('stroke-width', 2)
.style("opacity", .3)
.style("fill", "none")
.style("stroke", d3.rgb(100, 100, 100));
}
return svg.node();
}
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.
