Lead maintainer of of d3-x3d.
Public
Edited
Dec 11, 2022
draw(line(d3.curveLinear))
data = [
{x: 40, y: 110},
{x: 80, y: 50},
{x: 110, y: 30},
{x: 130, y: 10},
{x: 160, y: 90},
{x: 220, y: 90},
{x: 260, y: 50},
{x: 310, y: 70},
{x: 340, y: 90},
{x: 370, y: 80}
];
line = {
function line(curve){
return d3.line()
.x( d => d.x)
.y( d => d.y)
.curve(curve);
}
return line
}
draw = {
function draw(f){
const svg = d3
.select(DOM.svg(400, 150));
// Draw the exact points
svg
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y)
.attr("r", 5)
.attr('fill', '#b5b5b5');
// Draw the interpolated curve
svg.append("path")
.style("fill","none")
.style("stroke","#707070")
.style("stroke-width","3px")
.attr("d", (d) => f(data) );
return svg.node();
}
return draw
}
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.
