Public
Edited
Jan 20
runAnimation = (svg, clickedNode, width, animationInterval) => {
const tweets = clickedNode.posts.map((m) => m.Tweet);
const highlightWord = clickedNode.Keyword;
const nodeFill = clickedNode.sentimentSum < 0 ? colors.red : colors.green;
// clear tweet text (and remove tspans)
svg.selectAll(".tweetText").text("").selectAll("tspan").remove();
const populateText = (textClass, tweet, word, textOrder) => {
if (!tweet) return;
const transformY = 5 + 145 * textOrder;
svg
.select(`.${textClass}`)
.text(tweet)
.call(wrap, width * 0.3, 16, word, nodeFill, transformY);
};
//populate tweet text (and call wrap passing in the word)
populateText("tweetText1", tweets[0], highlightWord, 0);
populateText("tweetText2", tweets[1], highlightWord, 1);
populateText("tweetText3", tweets[2], highlightWord, 2);
populateText("tweetText4", tweets[3], highlightWord, 3);
populateText("tweetText5", tweets[4], highlightWord, 4);
let currentTweetIndex = 5;
debugger;
animationInterval = setInterval(() => {
populateText("tweetText1", tweets[currentTweetIndex], highlightWord, 0);
populateText("tweetText2", tweets[currentTweetIndex + 1], highlightWord, 1);
populateText("tweetText3", tweets[currentTweetIndex + 2], highlightWord, 2);
populateText("tweetText4", tweets[currentTweetIndex + 3], highlightWord, 3);
populateText("tweetText5", tweets[currentTweetIndex + 4], highlightWord, 4);
if (tweets[currentTweetIndex + 5]) {
currentTweetIndex += 5;
} else {
currentTweetIndex = 0;
}
}, 3000);
return animationInterval;
//if > 3, loop (until end then restart)
}
fifaWithKeywords = fifa_world_cup_2022_tweets.reduce((acc, dataEntry) => {
const entry = dataEntry;
const posts = top50.filter((f) => dataEntry.Tweet.includes(` ${f} `));
}, [])
top503.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
top502.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
top50.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
fifa_world_cup_2022_tweets.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
