wordCloud = (data, xScale, xAxis, word,type,year) => {
if (type===undefined) {
data.map(d => d.type = 0)
}
const radius = 5
const padding = 1;
let svg = d3.select(html`<svg></svg>`)
.attr('width', width)
.attr('height', height);
const luminance = 50;
const textColor = d3.scaleQuantile().range(["#fff", "#000"]).domain([0, luminance, 100]);
const simulation = d3.forceSimulation(data)
.force("x", d3.forceX(d => xScale(d[year])).strength(3))
.force("y", d3.forceY(d => yScale(d[type])).strength(0.6))
.force("collide", d3.forceCollide().radius(d=> rScale(+d['Npat']) + padding).iterations(50))
.alpha(0.5)
.restart()
let gBubble = svg
.selectAll('gBubble')
.data(data);
gBubble.exit().remove();
let bubble = gBubble.enter()
.append('g')
.classed('gBubble', true)
.attr('id',d => d[word]);
bubble
.append('circle')
.attr('r', d => rScale(+d['Npat']))
.attr('fill', d => colors(+d[type]))
.attr('fill-opacity', 0.4)
.attr('stroke', d => colors[+d[type]])
.attr('stroke-width', 1)
let text= bubble
.append('text');
const textLabels = text
.text( d => (d[word]))
.style('text-anchor','middle')
.attr("dominant-baseline", "central")
.attr('pointer-events','none')
.attr('font-family', 'sans-serif')
.attr('font-size', '12px')
.attr('font-weight','normal')
.attr("transform", "rotate(-30)" )
.attr('fill', d => textColor(d3.hcl(colors[+d[type]]).l))
gBubble = gBubble
.merge(bubble);
gBubble.call(drag(simulation));
simulation.nodes(data)
.on('tick', () => {
gBubble
.attr('transform', d => 'translate('+ (d.x) +','+ (d.y)+')');
})
svg.append("g")
.call(xAxis);
svg.append("g")
;
return Object.assign(svg.node());
}