Published
Edited
Feb 25, 2019
8 forks
5 stars
cloud = require("d3-cloud")
makecloud(
text.split(/ /).map(d => ({
text: d,
size: 230 / (d.length - 1), // could be the number of occurrences
fill: color(Math.random()) // or something else
}))
)
// Adapted from https://github.com/jasondavies/d3-cloud/blob/master/examples/browserify.js
function makecloud(words) {
var a = DOM.svg();
var layout = cloud()
.size([500, 500])
.words(words)
.padding(5)
.rotate(d => ~~(Math.random() * 2) * 90)
.font("Impact")
.fontSize(d => d.size)
.on("end", draw);
layout.start();
function draw(words) {
d3.select(a)
.attr("width", layout.size()[0])
.attr("height", layout.size()[1])
.append("g")
.attr(
"transform",
"translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")"
)
.selectAll("text")
.data(words)
.enter()
.append("text")
.style("font-size", d => `${d.size}px`)
.style("font-family", "Impact")
.attr("text-anchor", "middle")
.attr("transform", d => `translate(${[d.x, d.y]})rotate(${d.rotate})`)
.attr("fill", d => d.fill)
.text(d => d.text);
}
return a;
}
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.
