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
}
makecloud(
text.split(/ /).map(d => ({
text: d,
size: 10 + Math.random() * 90, // could be the number of occurrences
fill: color(Math.random()) // or something else
}))
)
color = d3.scaleSequential(d3.interpolateRainbow)
size = d3.scaleLinear().domain(d3.extent(frequencies.map(f => f.count))).range([5,50])
// 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 => size(d.count))
.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 => size(d.count))
.style("font-family", "Impact")
.attr("text-anchor", "middle")
.attr("transform", d => `translate(${[d.x, d.y]})rotate(${d.rotate})`)
.attr("fill", d => color(Math.random()))
.text(d => d.text)
.attr("fill", (d,i)=>i<10 ? "black": color(Math.random()))
}
return a;
}
Voyant.Corpus.htmltool(html, "Cirrus", {
corpus: "d352ddec8442951ce767ca6da720a4e9",
input: "https://gist.githubusercontent.com/sgsinclair/be4ebd7d10b82d866ada5077895eb8fa/raw/08c45504c0788195ea04f8f1a3927e703a2a9954/joseph.txt"
})
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.
