Public
Edited
Jan 17
Fork of word cloud
Insert cell
result = DOM.svg(width, height)
Insert cell
height = 1500
Insert cell
svg = d3.select(result)
.append("g")
.attr("transform", `translate(${width/2},${height/2})`)
Insert cell
{
const words = tokenize();

update(words)
}
Insert cell
update = function(words) {
d3Cloud()
.words(words)
.size([width, height])
.font('Impact')
.rotate(0)
.fontSize(function(d) { return d.sizeFactor * 15; })
// .padding(function(d) { return d.sizeFactor * 2; })
.on("end", draw)
.start();
}
Insert cell
Insert cell
tokenize = function () {
const counters = Object.values(test);
const max = Math.max(...counters);
const min = Math.min(...counters);
return Object.entries(test).map(([text, count]) => ({text, sizeFactor: selectSizeFactor(min, max, count)}))
}
Insert cell
test = FileAttachment("test.json").json()
Insert cell
selectSizeFactor = function(min, max, value) {
const a = (max - min) / (10 - 1);
const b = max - a * 10
return (value - b) / a;
}
Insert cell
Insert cell
Insert cell
d3Cloud = require('d3-cloud')
Insert cell
d3 = require('d3')
Insert cell

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.
Learn more