Website Interaction
Two modes for
archiving comments
The
Sorting
In the main page of the website, the “Explore”, the user is able to see the unfolding of the process of categorization of the comments. By scrolling in the page the comments (that are first presented without a cluster in the “Comments” column), slide into the other columns according to the topic discussed in it. This happens thanks to the keywords: the presence of the words determines a class, which represents the 5 different topics. Thanks to this interaction with the user and to the animation it is possible to understand how the discussion is not only about pollution but is fragmented into several others. Seeing each comment moving according to the keywords allows to make the user feel part of the debate; this is emphasized also by the fact that the comments are presented following the order of the 20 TikTok videos that you can see at the top of the "Comments" column. The “Pollution” column is separated from the others to represent the topic that was expected to find divided from the other 4, that were considered to be more unexpected in the debate. When a comment has keywords from more than one topic it stays in the “Comments” column and remains undefined.
var pollution = gsap.utils.toArray('.section.POLLUTION');
pollution.forEach((section) => {
gsap.to(section, {
x: "-16.3vw",
scrollTrigger: {
scroller: ".viewportCommenti",
trigger: section,
start: 'top top+=65%',
end: '+=100',
markers: false,
toggleActions: "play none none reverse",
preventOverlaps: preventOverlaps,
fastScrollEnd: fastScrollEnd
}
});
gsap.to(section, {
onStart: toto, onReverseComplete: totoreverse,
scrollTrigger: {
scroller: ".viewportCommenti",
trigger: section,
start: 'top top+=65%',
end: '+=100',
markers: false,
scrub: true,
repeat: 1,
fastScrollEnd: fastScrollEnd,
}
})
function toto() {
contatorePollution = contatorePollution + 0.05;
valorePollution = valorePollution + 1;
document.getElementById("barpoll").style.height = 10 + contatorePollution + "vh";
document.getElementById("counterpoll").innerHTML = valorePollution;
}
function totoreverse() {
contatorePollution = contatorePollution - 0.05;
valorePollution = valorePollution - 1;
document.getElementById("barpoll").style.height = 10 + contatorePollution + "vh";
document.getElementById("counterpoll").innerHTML = valorePollution;
}
})
SCROLL AND CLUSTERIZE
for (let i = 1; i < 4484; i++) {
let identificatore = i.toString();
for (let k = 0; k < 185; k++) {
document.getElementById(identificatore).innerHTML =
document.getElementById(identificatore).innerHTML.replace(keywords[k], change[k]);
}
}
//KEYWORDS ARRAY
let keywords = [/\b(aircraft)\b/gi, /\b(airplane)\b/gi, /\b(airplanes)\b/gi, /\b(airport)\b/gi, /\b(airports)\b/gi, /\b(animals)\b/gi,
/\b(atmosphere)\b/gi, /\b(aviation)\b/gi, /\b(bag)\b/gi, /\b(ban)\b/gi, /\b(beach)\b/gi, /\b(bike)\b/gi, /\b(millionaires)\b/gi,
/\b(billionaire)\b/gi, /\b(billionaires)\b/gi, /\b(bottle)\b/gi, /\b(boycott)\b/gi, /\b(brands)\b/gi, /\b(bryant)\b/gi, /\b(bus)\b/gi,
/\b(business)\b/gi, /\b(ca)\b/gi, /\b(california)\b/gi, /\b(cam)\b/gi, /\b(camarillo)\b/gi, /\b(cans)\b/gi, /\b(capitalism)\b/gi,
/\b(car)\b/gi, /\b(cars)\b/gi, /\b(carbon)\b/gi, /\b(celeb)\b/gi, /\b(celebrities)\b/gi, /\b(celebrity)\b/gi, /\b(celebs)\b/gi,
/\b(change)\b/gi, /\b(charter)\b/gi, /\b(chickpeas)\b/gi, /\b(china)\b/gi, /\b(elite)\b/gi, /\b(climate)\b/gi, /\b(company)\b/gi,
/\b(companies)\b/gi, /\b(consequences)\b/gi, /\b(consumption)\b/gi, /\b(corporations)\b/gi, /\b(cosmetics)\b/gi, /\b(makeup)\b/gi,
/\b(culture)\b/gi, /\b(damage)\b/gi, /\b(dicaprio)\b/gi, /\b(leo)\b/gi, /\b(leonardo)\b/gi, /\b(drake)\b/gi, /\b(drakes)\b/gi, /\b(drive)\b/gi,
/\b(driving)\b/gi, /\b(drought)\b/gi, /\b(eat)\b/gi, /\b(electric)\b/gi, /\b(elon)\b/gi, /\b(emissions)\b/gi, /\b(environmental)\b/gi, /\b(environment)\b/gi,
/\b(europe)\b/gi, /\b(fan)\b/gi, /\b(fans)\b/gi, /\b(fault)\b/gi, /\b(fire)\b/gi, /\b(fires)\b/gi, /\b(floyd)\b/gi, /\b(fly)\b/gi, /\b(flying)\b/gi,
/\b(flight)\b/gi, /\b(food)\b/gi, /\b(footprint)\b/gi, /\b(france)\b/gi, /\b(fuel)\b/gi, /\b(garbage)\b/gi, /\b(gas)\b/gi, /\b(government)\b/gi,
/\b(green)\b/gi, /\b(hamilton)\b/gi, /\b(hangar)\b/gi, /\b(hanger)\b/gi, /\b(heat)\b/gi, /\b(helicopters)\b/gi, /\b(henderson)\b/gi, /\b(hills)\b/gi,
/\b(hollywood)\b/gi, /\b(hour)\b/gi, /\b(hours)\b/gi, /\b(hypocrites)\b/gi, /\b(ig)\b/gi, /\b(impact)\b/gi, /\b(india)\b/gi, /\b(industry)\b/gi,
/\b(jack)\b/gi, /\b(jets)\b/gi, /\b(joke)\b/gi, /\b(kardashian)\b/gi, /\b(kardashians)\b/gi, /\b(kim)\b/gi, /\b(kimkardashian)\b/gi, /\b(kourtney)\b/gi,
/\b(kenny)\b/gi, /\b(kobe)\b/gi, /\b(kylie)\b/gi, /\b(kyliejenner)\b/gi, /\b(jenner)\b/gi, /\b(jenners)\b/gi, /\b(la)\b/gi, /\b(law)\b/gi, /\b(laws)\b/gi,
/\b(lifestyle)\b/gi, /\b(maintenance)\b/gi, /\b(mayweather)\b/gi, /\b(meat)\b/gi, /\b(media)\b/gi, /\b(miles)\b/gi, /\b(minute)\b/gi, /\b(minutes)\b/gi,
/\b(money)\b/gi, /\b(musk)\b/gi, /\b(ocean)\b/gi, /\b(oil)\b/gi, /\b(oxnard)\b/gi, /\b(paper)\b/gi, /\b(pay)\b/gi, /\b(peasants)\b/gi, /\b(people)\b/gi,
/\b(peoples)\b/gi, /\b(ppl)\b/gi, /\b(pilot)\b/gi, /\b(pilots)\b/gi, /\b(planes)\b/gi, /\b(plane)\b/gi, /\b(planet)\b/gi, /\b(world)\b/gi, /\b(earth)\b/gi,
/\b(plastic)\b/gi, /\b(politicians)\b/gi, /\b(politician)\b/gi, /\b(polluting)\b/gi, /\b(pollution)\b/gi, /\b(privacy)\b/gi, /\b(recycle)\b/gi,
/\b(recycling)\b/gi, /\b(repositioning)\b/gi, /\b(rich)\b/gi, /\b(ride)\b/gi, /\b(rides)\b/gi, /\b(rules)\b/gi, /\b(scam)\b/gi, /\b(scott)\b/gi,
/\b(seinfeld)\b/gi, /\b(service)\b/gi, /\b(shame)\b/gi, /\b(society)\b/gi, /\b(straw)\b/gi, /\b(straws)\b/gi, /\b(tax)\b/gi, /\b(taxed)\b/gi,
/\b(taxes)\b/gi, /\b(taylor)\b/gi, /\b(tiktok)\b/gi, /\b(tons)\b/gi, /\b(toronto)\b/gi, /\b(town)\b/gi, /\b(traffic)\b/gi, /\b(trip)\b/gi,
/\b(trips)\b/gi, /\b(turtles)\b/gi, /\b(twitter)\b/gi, /\b(uk)\b/gi, /\b(valley)\b/gi, /\b(van nuys)\b/gi, /\b(vegan)\b/gi, /\b(vegas)\b/gi,
/\b(ventura)\b/gi, /\b(county)\b/gi, /\b(waste)\b/gi, /\b(water)\b/gi, /\b(wealth)\b/gi, /\b(wedding)\b/gi];
CHANGE COLOR TO THE KEYWORDS
Reading &
Filtering
In the second page of the “Explore”, the “Archive”, the user can consult the complete list of comments already divided into the five areas of discussion. It is possible to read the comments in detail and compare those in different columns (topics). In addition, at the top of each column there are all the keywords and it is possible to select them one at a time to display only comments that contain a particular word. The filter also applies to the column of comments that remain undefined due to the presence of multiple words from different clusters. This page is intended to complement the archival experience of the first one and to have a more complete view of the result of the splitting process.
const buttonspoll = document.getElementsByClassName("pollutionfilter");
const buttonPressedpoll = e => {
let idclick = e.target.id;
let arreypoll = document.getElementsByClassName("pollutionfilter");
for (var i = 0; i < arreypoll.length; i++) {
arreypoll[i].style.filter = "invert(0)";
}
document.getElementById(idclick).style.filter = "invert(1)";
for (let i = 1; i < 4484; i++) {
let idstring = i.toString();
if ( document.getElementById(idstring).className.match(/(?:^|\s)polcom(?!\S)/) || document.getElementById(idstring).className.match(/(?:^|\s)undcom(?!\S)/) ){
document.getElementById(idstring).style.display = "block";}}
for (let i = 1; i < 4484; i++) {
let idstring = i.toString();
let compare = document.getElementById(idstring).getElementsByTagName("span");
let displaycheck = 0;
for (let j = 0; j < compare.length; j++) {
if (compare[j].id == idclick) {
displaycheck = 1;
}}
if ( document.getElementById(idstring).className.match(/(?:^|\s)polcom(?!\S)/) || document.getElementById(idstring).className.match(/(?:^|\s)undcom(?!\S)/) ){
if (displaycheck != 1) {
document.getElementById(idstring).style.display = "none";
}
}
}
}
for (let buttonpoll of buttonspoll) {
buttonpoll.addEventListener("click", buttonPressedpoll);
FILTER PER KEYWORD
TikToker
Celebjets page as bg
TikTok video