viewof answers_rand = Inputs.select(updated_answers_29thapr.map(d => d.Answers),{label:"Answsers"})
wordCloud = {
const fontFamily = "Fira Sans";
const svg = d3.create("svg")
.attr("id", "word-cloud")
.attr("viewBox", [0, -10, 900, 500])
.attr("font-family", fontFamily)
.attr("text-anchor", "middle");
const displaySelection = svg.append("text")
.attr("font-family", "Fira Sans")
.attr("font-size", 20)
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.attr("alignment-baseline", "hanging")
.attr("x", 350)
.attr("y", 0)
.text("Clouds of Answers");
const cloud = d3.cloud()
.size([900, 500])
.words(testData)
.padding(3)
.rotate(() => wordRotate(Math.random()))
.font(fontFamily)
.fontSize(d => wordScale(d.freq))
.on("end", draw)
function draw(words) {
console.log(words) //Console log again came to rescue...
var wordG = svg
.append("g")
.attr("id", "wordCloudG")
.attr("transform","translate(350,250)");
wordG.selectAll("text")
.data(words)
.enter()
.append("text")
.style("font-size", d => d.size + "px")
.style("fill", "#4F442B")
.attr("text-anchor", "middle")
.attr("transform", d => "translate(" + [d.x + 10, d.y] + ")rotate(" + d.rotate + ")")
.text(d => d.word);
};
cloud.start();
invalidation.then(() => {cloud.stop()});
return svg.node();
}
viewof answers = Inputs.select(updated_answers_29thapr.map(d => d.Answers),{label:"Answsers"})
nlpCloud = {
const fontFamily = "Fira Sans";
const svg = d3.create("svg")
.attr("id", "word-cloud")
.attr("viewBox", [0, -20, 800, 500])
.attr("font-family", fontFamily)
.attr("text-anchor", "middle");
const displaySelection = svg.append("text")
.attr("font-family", "Fira Sans")
.attr("font-size", 20)
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.attr("alignment-baseline", "hanging")
.attr("x", 350)
.attr("y", -10)
.text("Clouds of Answers");
const cloud = d3.cloud()
.size([400, 400])
.words(nlpData)
.padding(5)
.rotate(() => wordRotate(Math.random()))
.font(baseFont)
.fontSize(fontSize)
.on("end", draw)
function draw(words) {
console.log(words) //Console log again came to rescue...
var wordG = svg
.append("g")
.attr("id", "wordCloudG")
.attr("transform","translate(350,250)");
wordG.selectAll("text")
.data(words)
.enter()
.append("text")
.style("font-size", d => d.size + "px")
.style("fill", "#4F442B")
.attr("text-anchor", "middle")
.attr("transform", d => `translate(${d.x}, ${d.y}) rotate(${d.rotate})`)
.text(d => d.text);
};
cloud.start();
invalidation.then(() => {cloud.stop()});
return svg.node();
}
nlp = require('compromise@11.14.3')
d3 = {
const d3 = await require("d3@5", "d3-array@2");
d3.cloud = await require("d3-cloud@1");
return d3;
}
updated_answers_29thapr = FileAttachment("Updated_answers_29thApr.csv").csv({typed:true})
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.
