Notebooks 2.0 is here.
function DragMyWordCloudSimple(word_list) {
const fontFamily = "Verdana, Arial, Helvetica, sans-serif";
var layout = d3cloud()
.size([width, height])
.words(word_list)
.padding(0)
.rotate(() => -Math.ceil(10*doc.out(its.sentiment)) )
.font(fontFamily)
.fontSize(d => computeFontSize(d.value))
.on('word', addWord);
const svg = DOM.svg(layout.size()[0], layout.size()[1]); // width, height
const svgDeltaX = d3.select(svg).attr("width");
const group = d3.select(svg).append('g');
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
const divWidth = parseInt(div.style("width"));
function handleMouseOver(d, i) {
const that = d3.select(this);
that.classed("word-hovered", true);
div.transition()
.duration(200)
.style("opacity", 1);
} // handleMouseOver()
function handleMouseOut(d, i) {
d3.select(this)
.classed("word-hovered", false);
div.transition()
.duration(500)
.style("opacity", 0);
} // handleMouseOut()
function addWord (word) {
const text = group.append('text');
text.style('font-size', '2px')
.style('fill', `${colorMap[word.pos]}`)
.style('cursor', 'pointer')
.attr('text-anchor', 'middle')
.attr('x', word.x)
.attr('y', word.y)
// .attr('transform', `translate(${[word.x, word.y]})rotate(${word.rotate})`)
.text(word.text)
.style('font-size', `${word.size}px`)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
}
// Define drag handlers
function dragstarted(event, d) {
d3.select(this).raise().classed("word-hovered", true);
}
function dragged(event, d) {
// d3.select(this).attr("transform", `translate(${[event.x, event.y]})rotate(${d.rotate})`);
d3.select(this)
.attr("x", event.x)
.attr("y", event.y);
}
function dragended(event, d) {
d3.select(this).classed("word-hovered", false);
}
layout.start();
return svg;
}
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.
