Published
Edited
Apr 1, 2019
1 star
ribbon = {return function (data,stretch=0){
// input {source,target}
// source / target == {radius,start angle, end angle, start shape, end shape}
// shape = linear|arc|inverse
// adapted from d3-chord and nbrimer stretched chord examples
var π = Math.PI,
halfπ = π / 2;
data.source.startAngle -= halfπ
data.target.startAngle -= halfπ
data.source.endAngle -= halfπ
data.target.endAngle -= halfπ
data.source.midpoints = [[ data.source.radius * Math.cos(data.source.startAngle), data.source.radius * Math.sin(data.source.startAngle)],[ data.source.radius * Math.cos(data.source.endAngle), data.source.radius * Math.sin(data.source.endAngle)]]
data.target.midpoints = [[ data.target.radius * Math.cos(data.target.startAngle), data.target.radius * Math.sin(data.target.startAngle)],[ data.target.radius * Math.cos(data.target.endAngle), data.target.radius * Math.sin(data.target.endAngle)]]
function arc(entry){
var a = entry.startAngle - entry.endAngle;
var sign = (entry.midpoints[1][0] >= 0 ? 1 : -1);
return " A" + entry.radius + "," + entry.radius + " 0 " + +(a > π) + ",1 " + (entry.midpoints[1][0] + sign*stretch) + "," + entry.midpoints[1][1];
}
function line (entry){
// a hack to draw an almost flat curve
var a = entry.startAngle - entry.endAngle;
var sign = (entry.midpoints[1][0] >= 0 ? 1 : -1);
return " A" + 99999 + "," + 99999 + " 0 " + +(a > π) + ",1 " + (entry.midpoints[1][0] + sign*stretch) + "," + entry.midpoints[1][1];
}
function inverse(entry){
var a = entry.startAngle - entry.endAngle;
var sign = (entry.midpoints[1][0] >= 0 ? 1 : -1);
return " A" + entry.radius + "," + entry.radius + " 0 " + +(a > π) + ",0 " + (entry.midpoints[1][0] + sign*stretch) + "," + entry.midpoints[1][1];
}
function curve(entry) {
var sign = (entry.midpoints[0][0] >= 0 ? 1 : -1);
return " Q 0,0 " + (entry.midpoints[0][0] + sign*stretch) + "," + entry.midpoints[0][1];
}
var myarc={'arc':arc, 'line':line, 'inverse':inverse}
data.source.style = myarc[data.source.style] || arc
data.target.style = myarc[data.target.style] || arc
var path = "M" + (data.source.midpoints[0][0] + stretch) + "," + data.source.midpoints[0][1] +
data.source.style(data.source) +
curve(data.target) +
data.target.style(data.target) +
curve(data.source) +
" Z";
//the path
console.log(path,data)
return path
}}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.