test = text.indexOf('correnti')
delimited_text = delimitations.map((d,i)=>{
const start = d.start;
const end = i+1<delimitations.length?delimitations[i+1].start:text.length;
return {
chunk_id:i,
category:d.category,
style:d.style!==""?d.style:d.category,
start:+start,
end:+end,
text: text.substring(start,end)
}
})
words = {
const words = delimited_text.map((d,i)=>{
const groupStart = d.start
const words = d.text.split(" ").map((dd)=>({...d,text:dd}))
const words2 = words.map((dd,ii)=>{
const length = dd.text.length
const search_at = ii===0?0:words[ii-1].end
const start = d.text.indexOf(dd.text,search_at)
const end = start+length
dd.groupStart=groupStart
dd.start=start
dd.end=end
dd.length=length
return dd
})
words2.forEach(w=>{
w.start+=w.groupStart
w.end+=w.groupStart
delete w.groupStart
delete w.text
})
return words2
});
return words.flat();
}
words_to_export = {
let words_to_return = words;
words_to_return
}
visualization = {
const data = delimited_text;
const svg = d3.create('svg')
.attr("width", width)
.attr("height", height);
const g = svg.append('g').attr('transform','translate(0,20)').attr('id','texts');
const text = g.append('text').attr('font-size',fontSize);
const tspan = text.selectAll('tspan')
.data(data)
.enter().append('tspan');
const tspan2 = tspan.selectAll('tspan')
.data(d=>d.text.split(' ').map(dd=>({text:dd,category:d.category,style:d.style})))
.enter().append('tspan');
const tspan3 = tspan2.selectAll('tspan')
.data(d=>[d,{text:' ',category:'white-space',style:'white-space'}])
.enter().append('tspan')
.attr('class',(d,i)=>i==0?'text':'white-space')
.attr('fill',d=>color(d.category))
.text(d=>d.text)
//.text((d,i)=>i==0?'CCS':' ')
//.text((d,i)=>replaceText(d.style));
const g2 = svg.append('g').attr('transform','translate(0,20)').attr('id','lines');
const lines = []
setTimeout(function(){
tspan2.each(function(d){
const bcr=this.getBoundingClientRect();
if (bcr.x+bcr.width>width){
d3.select(this).attr('x',0).attr('dy',dy);
}
})
// Necessary to adjust the positioning (boundingClientRect)
let first_y;
let first_x;
d3.selectAll('tspan.text').each(function(d){
const bcr = this.getBoundingClientRect();
const css = window.getComputedStyle(this, null);
if (!first_y) first_y=bcr.y;
if (!first_x) first_x=bcr.x;
const obj = {
text:d.text,
width:bcr.width,
height:bcr.height,
x:bcr.x-first_x,
y:bcr.y-first_y,
category:d.category,
style:d.style
}
lines.push(obj);
})
g2.selectAll('line')
.data(lines)
.enter()
.append('line')
.attr('x1',d=>d.x)
.attr('x2',d=>d.x+d.width)
.attr('y1',d=>d.y+y_pos(d.style))
.attr('y2',d=>d.y+y_pos(d.style))
.attr('stroke',d=>color(d.category))
}, 50);
return svg.node();
}
y_pos = d3.scaleOrdinal()
.range([-2,-4,0])
.domain(['negazione','esitazione','riformulazione'])
.unknown(-2);
color=d3.scaleOrdinal()
.range(['#ccc','#666','#ffd93b','#10bed2','#ff3366'])
.domain(['testo neutro','testo soggetto','cosa','come','senso'])
replaceText = d3.scaleOrdinal()
.range([' ','...','---','NGZ','EST','RIF'])
.domain(['white-space','testo neutro','testo soggetto','negazione','esitazione','riformulazione'])
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.
