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 selectedWords = svg.
const cloud = d3.cloud()
.size([width, height])
.words(data.map(d => Object.create(d)))
.padding(0)
.rotate(() => 0)
.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(200).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"));
e.classed("word-hovered", false);
}
});
cloud.start();
invalidation.then(() => cloud.stop());
return svg.node();
}
s = d3.scaleSqrt()
.domain([1, d3.max(data.map(d => d.value))])
.range([6, 82]);
html`<style type="text/css">
.click-only-text {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.click-only-text::selection {
background: none;
}
.word-default {
fill: cadetblue;
font-weight: normal;
}
.word-hovered {
fill: teal;
font-weight: bold;
}
.word-selected {
fill: darkslategrey;
font-weight: bold;
}
</style>`;
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.
