I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
{
//Q - how d3 can programmatically generate a data-driven blue line that is exactly identical to the red line
const width = 1280;
const height = 720;
const root = htl.html`<svg viewBox="0 0 ${width} ${height}"><path class="BezierLine2" d="M0,0 C570.7851851851851,186.66666666666666 1067.6148148148147,533.3333333333333 1280,720" stroke="red" fill="none"></path></svg>`;
const svg = d3.select(root);
const rect = svg
.append("rect")
.attr("x", "0")
.attr("y", "0")
.attr("width", `${width}`)
.attr("height", `${height}`)
.attr("fill", `transparent`);
//src
const data = [
{
"x": 0,
"y": 0
},
{
"x": 570.7851851851851,
"y": 186.66666666666666
},
{
"x": 1067.6148148148147,
"y": 533.3333333333333
},
{
"x": 1280,
"y": 720
}
]
const pathVal = d3.path();
pathVal.moveTo(data[0].x,data[0].y)
pathVal.bezierCurveTo(...data.slice(1).map(o => [o.x,o.y]).flat())
console.log(pathVal);
// based on index1
svg.append('g')
.attr('class','test')
.append("path")
.attr("d", pathVal)
.attr("stroke", "blue")
.attr('fill','none')
return root;
}
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.
