Published
Edited
Dec 1, 2020
{
var w = 1000,
h = 500;
var svg = d3
.create("svg")
.attr("width", w)
.attr("height", h);
svg
.append("g")
.selectAll("lines")
.data(d3.range(100))
.join("path")
.attr("d", d =>
lw.describeArc(
d * p1 + w / 2,
d + h / 2 - 80,
p2 + d,
now / 1000 - d * p3,
now / 800 - d * p3
)
)
.attr('fill-opacity', '0')
.attr("class", "path")
.attr("stroke", "#777");
return svg.node();
}
// {
// const test = d3
// .create("svg")
// .attr("width", 1000)
// .attr("height", 500);
// let frame;
// test
// .append("g")
// .selectAll("lines")
// .data(d3.range(100))
// .join("path")
// .attr("d", d =>
// describeArc(
// d * 3 + 150,
// d + 150,
// 100 + d,
// Date.now() / 1000 - d / 100,
// Date.now() / 800 - d / 100
// )
// )
// .attr('fill-opacity', '0')
// .attr("class", "path")
// .attr("stroke", "#777");
// function moveSVG(time) {
// const x = Date.now();
// d3.selectAll("path").attr("d", d =>
// describeArc(
// d * 3 + 150,
// d + 150,
// 100 + d,
// Date.now() / 1000 - d / 100,
// Date.now() / 800 - d / 100
// )
// );
// frame = requestAnimationFrame(moveSVG);
// }
// requestAnimationFrame(moveSVG);
// return test.node();
// }
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.
