wordCloud = {
const fontFamily = "Verdana, Arial, Helvetica, sans-serif";
const svg = d3.create("svg")
.attr("id", "word-cloud")
.attr("viewBox", [0, 0, width, height])
.attr("font-family", fontFamily)
.attr("text-anchor", "middle");
const displaySelection = svg.append("text")
.attr("font-family", "Lucida Console, Courier, monospace")
.attr("text-anchor", "start")
.attr("alignment-baseline", "hanging")
.attr("x", 10)
.attr("y", 10);
const cloud = d3.cloud()
.size([width, height])
.words(data.map(d => Object.create(d)))
.padding(1)
.rotate(() => 10)
.font(fontFamily)
.fontSize(d => s(d.value))
.on("word", ({size, x, y, rotate, text}) => {
svg.append("text")
.attr("font-size", size)
.attr("transform", `translate(${x},${y}) rotate(${rotate})`)
.text(text)
.classed("click-only-text", true)
.classed("word-default", true)
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut)
.on("click", handleClick);
function handleMouseOver(d, i) {
d3.select(this)
.classed("word-hovered", true)
.transition(`mouseover-${text}`).duration(300).ease(d3.easeLinear)
.attr("font-size", size + 2)
.attr("font-weight", "bold");
}
function handleMouseOut(d, i) {
d3.select(this)
.classed("word-hovered", false)
.interrupt(`mouseover-${text}`)
.attr("font-size", size);
}
function handleClick(d, i) {
var e = d3.select(this);
displaySelection.text(`selection="${e.text()}"`);
e.classed("word-selected", !e.classed("word-selected"));
}
});
cloud.start();
invalidation.then(() => cloud.stop());
return svg.node();
}