x = d3.scaleLinear()
.range([10,width-10])
.domain([0,1200])
data = [
{
id: 'subj-1',
type: 'subject',
sibling: 'doubt-1',
start: 100,
end: 500,
open: false,
level: 1
},
{
id: 'doubt-1',
type: 'doubt',
sibling: 'subj-1',
start: 600,
end: 700,
open: false,
level: 1
}
]
{
data.forEach(d=>{
if (d.type==='doubt') {
const sibling = data.find( dd => dd.id==d.sibling );
console.log(sibling);
d.sibling = sibling;
}
})
}
{return svg.node()}
function update(data) {
console.log(data);
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 segments = mutable segments
segments = segments.data(data, d=>{
return d.id
});
segments.exit().remove();
segments = segments.enter().append('path')
.classed('ghirigori', true)
.attr('d', d=>drawGhirigori(d))
.style('stroke-width', 2)
.style('stroke', 'black')
.style('fill', 'transparent')
.style('cursor', 'pointer')
.on('click', d=>{
console.log(d);
})
.merge(segments);
}
{
//update(data)
}
function drawGhirigori(d) {
let path_d = ``;
if (d.open) {
console.log(d)
path_d = `M ${x(d.start)},${0} l ${x(d.end) - x(d.start)}`;
return;
}
if (d.type === 'doubt') {
//console.log(d)
const level = d.level;
const w = x(d.end) - x(d.tart);
const s = x(d.sibling.end) - x(d.sibling.start);
const l = w + s;
const r = w/level/2;
const curve = Math.PI*(r)
let segment = (l - curve*level)/(2*level)
segment = segment<0?0:segment;
let path_d = `M ${x(d.doubt_start)},${0} `;
for (var i = 1; i <= level; 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.
