md`# Word Cloud
by [Jason Davies](https://github.com/jasondavies/d3-cloud/). using words from https://en.wikipedia.org/wiki/Delhi_Sultanate`
cloud = require("d3-cloud")
frequencies = {
let freqs = {};
text.split(/ /).forEach(word => {
if (word in freqs) {freqs[word]++}
else {freqs[word]=1}
})
let orderedFreqs = Object.keys(freqs).map(k => {return {text: k, count: freqs[k]}})
orderedFreqs.sort((a,b) => b.count-a.count);
return orderedFreqs
}
//var mft = text.split(/ /).forEach(word => {
//if(frequencies.hasOwnProperty(word)) {
//frequencies[word] += 1
//} else {
//frequencies[word] = 1
//}
//})
//console.log(mft);
text.split(/ /).forEach(word => {
if(frequencies.hasOwnProperty(word)) {
frequencies[word] += 1
} else {
frequencies[word] = 1
}
})
makecloud(
text.split(/ /).map(d => ({
text: d,
size: 12 + Math.random() * 65,
fill: color(Math.random())
}))
)
color = d3.scaleSequential(d3.interpolateRainbow)
// Adapted from https://github.com/jasondavies/d3-cloud/blob/master/examples/browserify.js
function makecloud(words) {
var a = DOM.svg();
var layout = cloud()
.size([1800, 600])
.words(words)
.padding(7)
.rotate(d => ~~(Math.random() * 2) * 90)
.font("New Times Roman")
.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)
.attr("fill", (d,i) => i <10 ? "black" : color(Math.random())) //make the top 10 most frequent terms black.
.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.
