Public
Edited
Jun 15, 2023
Insert cell
Insert cell
nocoOutput = FileAttachment("noco-dump@1.json").json()
Insert cell
_.countBy(nocoOutput, "exchangeId")
Insert cell
_.countBy(nocoOutput, 'type')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function WordCloud(
text,
{
size = (group) => group.length, // Given a grouping of words, returns the size factor for that word
word = (d) => d, // Given an item of the data array, returns the word
marginTop = 0, // top margin, in pixels
marginRight = 0, // right margin, in pixels
marginBottom = 0, // bottom margin, in pixels
marginLeft = 0, // left margin, in pixels
width = 640, // outer width, in pixels
height = 400, // outer height, in pixels
maxWords = 250, // maximum number of words to extract from the text
fontFamily = "sans-serif", // font family
fontScale = 16, // base font size
padding = 8, // amount of padding between the words (in pixels)
rotate = 0, // a constant or function to rotate the words
invalidation // when this promise resolves, stop the simulation
} = {}
) {
const words =
typeof text === "string" ? text.split(/\W+/g) : Array.from(text);

const data = d3
.rollups(words, size, (w) => w)
.sort(([, a], [, b]) => d3.descending(a, b))
.slice(0, maxWords)
.map(([key, size]) => ({ text: word(key), size }));

const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("font-family", fontFamily)
.attr("text-anchor", "middle")
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");

const g = svg
.append("g")
.attr("transform", `translate(${marginLeft},${marginTop})`);

const cloud = d3Cloud()
.size([width - marginLeft - marginRight, height - marginTop - marginBottom])
.words(data)
.padding(padding)
.random(DeterministicHack)
.spiral("archimedean")
.rotate(rotate)
.font(fontFamily)
.fontSize((d) => Math.sqrt(d.size) * fontScale)
.on("word", ({ size, x, y, rotate, text }) => {
g.append("text")
.attr("font-size", size)
.attr("transform", `translate(${x},${y}) rotate(${rotate})`)
.text(text);
});

cloud.start();
invalidation && invalidation.then(() => cloud.stop());
return svg.node();
}
Insert cell
Insert cell
Insert cell
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