{
const height = 300;
const svg = d3.select(DOM.svg(width, height)).style('background', '#fafafa');
let g = svg.append('g').attr('transform', `translate(0,${height/2})`);
g.append('line').classed('base-line', true)
.attr('x1', x(0)).attr('y1', 0)
.attr('x2', x(1200)).attr('y2', 0)
.style('stroke-width', 1)
.style('stroke', 'LAVENDER');
let ghirigori = g.selectAll('.ghirigori');
ghirigori = ghirigori.data(data, d=>{
return d.id
});
ghirigori.exit().remove();
ghirigori = ghirigori.enter().append('path')
.classed('ghirigori', true)
.attr('d', d=>drawGhirigori(d))
.style('stroke-width', 1)
.style('stroke', 'black')
.style('fill', 'none')
.merge(ghirigori);
return svg.node()
}
x = d3.scaleLinear()
.range([10,width-10])
.domain([0,1200])
function drawGhirigori(d) {
const depth = d.depth;
const w = x(d.doubt_end) - x(d.doubt_start);
const s = x(d.subject_end) - x(d.subject_start);
const l = w + s;
const r = w/depth/2;
const curve = Math.PI*(r)
let segment = (l - curve*depth)/(2*depth)
segment = segment<0?0:segment;
let path_d = `M ${x(d.doubt_start)},${0} `;
for (var i = 1; i <= depth; i++) {
if (i%2!==0) {
path_d += `v ${ -1 * segment } a ${r} ${r*1} 180 0 1 ${2*r} 0 v ${ 1 * segment}`;
} else {
path_d += `v ${ 1 * segment } a ${r} ${r*1} 180 0 0 ${2*r} 0 v ${ -1 * segment}`;
}
}
return path_d;
}
d3 = require('d3')
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.
