{
// Pre-process data
for(let i=0; i<data.length; i++){
const d = data[i];
d.length2use=d3.max([Number(d.length), 35000]);
d.r=r(d.length2use);
d.perc_dubbio=Number(d.perc_dubbio);
d.combinations=new Array();
for(let ii=0; ii<combinations_arr.length; ii++) {
const p = combinations_arr[ii];
d[p]=Number(d[p])
if (d[p]===0) continue; // skip this combinationi n case it is zero, we don't want any circle
let obj={};
obj['id']=d.id;
obj.type=p;
obj.percentage_combination = d[p];
obj.r=r(obj.percentage_combination*(d.length2use/100*d.perc_dubbio));
// clump the minimum radius value to a dimension that is suitable for printing
obj.r=d3.max([r(obj.percentage_combination*(d.length2use/100*d.perc_dubbio)),0.875])
if(d.length>130000) {
obj.mx = obj.x = matrix_grid_for_longer_texts.x(p.split('_')[1]) * r(d.length2use);
obj.my = obj.y = matrix_grid_for_longer_texts.y(p.split('_')[0]) * r(d.length2use);
} else {
obj.mx = obj.x = matrix_grid.x(p.split('_')[1]) * r(d.length2use);
obj.my = obj.y = matrix_grid.y(p.split('_')[0]) * r(d.length2use);
}
d.combinations.push(obj);
}
}
// viz
const height=500;
const svg=d3.create("svg")
.attr("width",width)
.attr('height',height)
.call(d3.zoom().on("zoom", ()=>g1.attr("transform", d3.event.transform))),
g1=svg.append('g'),
g2=g1.append('g').attr('transform','translate('+width/2+','+height/2+')'),
node=g2.selectAll('.node').data(data).enter().append('g').classed('node',true),
simulation=d3.forceSimulation(data)
.force('x',d3.forceX(d=>-k(d.mds_x)))
.force('y',d3.forceY(d=>-k(d.mds_y)))
.force('collide',d3.forceCollide(d=>{
const k=d.length>200000?0.65:0.75;
return (r(d.length2use)+1)*k;
}))
.on('tick',()=>{
node.attr('transform',d=>'translate('+d.x+','+d.y+')');
})
.alpha(1);
node.append('circle')
.classed('length',true)
.attr('r',d=>d.r)
.attr('fill','none')
.attr('stroke','black');
node.append('path')
.classed('metaball',true)
.attr('stroke','blue')
.attr('fill','rgba(0,0,255,0.5)')
.attr('opacity',0.2);
node.append('g')
.classed('combinations-g',true)
node.append('text')
.classed('label',true)
.attr('font-size',4)
.attr('font-family','sans-serif')
.attr('fill','grey')
.text(d=>d.title.substring(0,10));
// add combinations
simulation.on('end',()=>{
node.each(function(d){
const id=d.id;
const combination=d3.select(this).select('g.combinations-g').selectAll('.combination')
.data(d=>d.combinations)
.enter().append('circle')
.classed('combination',true)
.attr('opacity',0.2)
.attr('r',d=>d.r);
const innerSimulation=d3.forceSimulation(d.combinations)
.force('x',d3.forceX())
.force('y',d3.forceY())
.force('collision',d3.forceCollide(d=>d.r + 0.25))
.alpha(1)
.restart()
.on('end',()=>{
console.log('end',id)
combination.attr('cx',d=>d.x)
.attr('cy',d=>d.y);
// calculate metaballs
d.metaballSegments=drawMetaball(d.combinations,250);
d3.select(this).select('path.metaball').attr('d',d.metaballSegments);
});
})
});
return svg.node()
}
heatmap_riformulazione = cancellazione_dataset_spatialized_laLettura4.map(d=>{
const percentage = +d.cosa_riformulazione + d.senso_riformulazione + d.come_riformulazione
return {
title:d.title,
x:d.x,
y:-d.y,
percentage: d.perc_dubbio<2.5?0:percentage,
length:+d.length,
year:d.year
}
})
.flat()
.concat(
{title:"max",x:550,y:550, percentage: 0, length:500},
{title:"min",x:-550,y:-550, percentage: 0, length:500}
)
heatmap_esitazione = cancellazione_dataset_spatialized_laLettura4.map(d=>{
const percentage = +d.cosa_esitazione + d.senso_esitazione + d.come_esitazione
return {
title:d.title,
x:d.x,
y:-d.y,
percentage: d.perc_dubbio<2.5?0:percentage,
length:+d.length,
year:d.year
}
})
.flat()
.concat(
{title:"max",x:550,y:550, percentage: 0, length:500},
{title:"min",x:-550,y:-550, percentage: 0, length:500}
)
r=d3.scalePow().exponent(0.5).range([0,40]).domain([0,458335])
import {metaballSegments} from '@iosonosempreio/metaball-circle-packing-v359'
import {drawMetaball} from '@iosonosempreio/metaball-circle-packing-v359'
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.
