Public
Edited
Dec 10, 2023
{
const talkComments = {};
const talkViews = {};
const talkUrls = {};
tedTalkData.forEach(d => {
d.views = +d.views;
d.comments = +d.comments;
talkViews[d.name] = +d.views;
talkComments[d.name] = +d.comments;
talkUrls[d.name] = d.url;
});
const width = 360;
const height = 360;
const talks = ["Edwidge Danticat: Stories of Haiti",
"Hans Rosling: The best stats you've ever seen",
"Ken Robinson: Do schools kill creativity?",
"Benjamin Grant: What it feels like to see Earth from space",
"Hans Rosling: The best stats you've ever seen",
"Richard Dawkins: Militant atheism"];
const sizes = [2, 2, 2, 2, 2, 2];
for (let i = 1; i <= 6; i++) {
d3.select("#svg" + i).selectAll("*").remove();
var metric = "";
if (i < 4) {
metric = "views";
}
else {
metric = "similarity";
}
drawRelations(d3.select("#svg" + i), width, height, talks[i - 1], metric, sizes[i - 1], i, false);
d3.select("#svg" + i).append("text")
.attr("text-anchor", "middle")
.attr("transform", `translate(${width/2}, 20)`)
.attr("style", "font-size: 14px")
.style('user-select', 'none')
.text(talks[i - 1]);
var num = 0;
if (metric == "views") {
num = talkViews[talks[i - 1]];
} else {
num = talkComments[talks[i - 1]];
}
d3.select("#svg" + i).append("text")
.attr("text-anchor", "middle")
.attr("transform", `translate(${width/2}, 40)`)
.attr("style", "font-size: 14px")
.style('user-select', 'none')
.text(`${num} ${metric}`);
}
}
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.
