BOTAlex
0a07c56611
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 22s
291 lines
9 KiB
Svelte
291 lines
9 KiB
Svelte
<script lang="ts">
|
|
import DoubleRangeSlider from "@src/lib/components/DoubleRangeSlider.svelte";
|
|
import iso3 from "./iso3.json";
|
|
import countryList from "country-list-js";
|
|
import onMount from "@src/optimizers/onMount";
|
|
import Search from "lucide-svelte/icons/search";
|
|
import X from "lucide-svelte/icons/x";
|
|
import CustomScrollBar from "../../comps/CustomScrollBar.svelte";
|
|
|
|
class Range {
|
|
start: number = 0;
|
|
end: number = 1;
|
|
}
|
|
|
|
let leftRange: Range = new Range();
|
|
let rightRange: Range = new Range();
|
|
|
|
function round(num: number): number {
|
|
return Math.round(num * 10) / 10;
|
|
}
|
|
|
|
function isValidSelection() {
|
|
if (leftRange.start == leftRange.end) return false;
|
|
if (rightRange.start == rightRange.end) return false;
|
|
return true;
|
|
}
|
|
|
|
let currentCountry: string = "";
|
|
let currentCountrySelected: string = "";
|
|
let interactiveEmbed: HTMLIFrameElement;
|
|
let searchFilter: string = "";
|
|
|
|
interface RegionFilter {
|
|
region: string;
|
|
selected: boolean;
|
|
}
|
|
const continents: string[] = countryList.continents();
|
|
const regionFilters: RegionFilter[] = continents.map((name) => ({
|
|
region: name,
|
|
selected: false,
|
|
}));
|
|
|
|
function selectCountry(country: string, towards: boolean) {
|
|
currentCountry =
|
|
"https://deprived.dev/assets/school/social-science/data/interactive/" +
|
|
country +
|
|
"-" +
|
|
(towards ? "in" : "out") +
|
|
".html";
|
|
|
|
currentCountrySelected = towards
|
|
? "Others towards " + getCountryName(country)
|
|
: getCountryName(country) + "'s opinion of others";
|
|
|
|
setTimeout(() => {
|
|
interactiveEmbed.scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "end",
|
|
});
|
|
}, 200);
|
|
}
|
|
|
|
function getCountryName(code) {
|
|
const uppercaseCode = code.toUpperCase();
|
|
|
|
// Hardcoded historical and regional exceptions
|
|
const exceptions = {
|
|
YDYE: "People's Democratic Republic of Yemen",
|
|
CMR: "Cameroon",
|
|
CSK: "Czechoslovakia",
|
|
YUG: "Yugoslavia",
|
|
DDR: "German Democratic Republic",
|
|
EU: "European Union",
|
|
};
|
|
|
|
if (exceptions[uppercaseCode]) {
|
|
return exceptions[uppercaseCode];
|
|
}
|
|
|
|
const countryData = countryList.findByIso3(uppercaseCode);
|
|
return countryData ? countryData.name : "Country not found";
|
|
}
|
|
|
|
onMount(() => {
|
|
// selectCountry("DNK", true);
|
|
console.log(countryList.findByIso3("DNK"));
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-col w-full h-full pt-40 gap-16 NotoSans">
|
|
<div class="flex flex-col items-center justify-center w-full">
|
|
<h1 class="text-4xl">Country Mention Networks in UN Speeches</h1>
|
|
<div>Computational Social Science 02467 - group 10</div>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center w-full prose">
|
|
<div class="flex gap-30 justify-between">
|
|
<div>Negative range</div>
|
|
<div>Positive range</div>
|
|
</div>
|
|
<div class="w-98">
|
|
<div class="flex w-full justify-between">
|
|
<div class="-ml-1.5">-1</div>
|
|
<div>0</div>
|
|
<div>1</div>
|
|
</div>
|
|
<div class="flex gap-8">
|
|
<DoubleRangeSlider
|
|
bind:start={leftRange.start}
|
|
bind:end={leftRange.end}
|
|
/>
|
|
<DoubleRangeSlider
|
|
bind:start={rightRange.start}
|
|
bind:end={rightRange.end}
|
|
/>
|
|
</div>
|
|
<div class="flex w-full justify-around">
|
|
<div>
|
|
-{round(1 - leftRange.start).toFixed(1)} --- -{round(
|
|
1 - leftRange.end,
|
|
).toFixed(1)}
|
|
</div>
|
|
<div>
|
|
{round(rightRange.start).toFixed(1)} --- {round(
|
|
rightRange.end,
|
|
).toFixed(1)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex justify-center max-h-screen">
|
|
<img
|
|
class="max-h-[80vh] object-contain"
|
|
src={"https://deprived.dev/assets/school/social-science/data/plots/sentiment_graph_-" +
|
|
round(1 - leftRange.end).toFixed(1) +
|
|
"_-" +
|
|
round(1 - leftRange.start).toFixed(1) +
|
|
"_" +
|
|
round(rightRange.start).toFixed(1) +
|
|
"_" +
|
|
round(rightRange.end).toFixed(1) +
|
|
".jpg"}
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col items-center gap-10">
|
|
<div class="w-80">
|
|
<div class="text-4xl">Interactive graphs</div>
|
|
</div>
|
|
|
|
<div
|
|
class="{currentCountry == '' ? 'hidden' : ''} relative"
|
|
style="width: 80%; height: 800px;"
|
|
>
|
|
<div>{currentCountrySelected}</div>
|
|
<div class="relative w-full h-full">
|
|
<iframe
|
|
src={currentCountry}
|
|
width="100%"
|
|
height="100%"
|
|
style="border: none; background: transparent;"
|
|
allowtransparency={true}
|
|
title="Network Graph"
|
|
bind:this={interactiveEmbed}
|
|
class="relative"
|
|
>
|
|
</iframe>
|
|
<button
|
|
on:click={() => {
|
|
currentCountrySelected = "";
|
|
currentCountry = "";
|
|
}}
|
|
class="absolute right-0 top-0"
|
|
>
|
|
<X class="text-accent w-16 h-18 cursor-pointer" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="w-[60%]">
|
|
<div class="flex justify-between">
|
|
<div class="text-2xl">List of interactive graphs</div>
|
|
|
|
<div class="join">
|
|
<button
|
|
class="btn btn-outline btn-disabled btn-accent join-item grid items-center justify-center"
|
|
>
|
|
<Search />
|
|
</button>
|
|
<input
|
|
bind:value={searchFilter}
|
|
type="text"
|
|
class="input join-item"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="italic opacity-60">
|
|
The interactive graphs has to be filtered, due to the large amount of
|
|
connections, making a full interactive graph, requires too much
|
|
processing power.
|
|
</div>
|
|
|
|
<div class="py-4"></div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<div class="">Filter by region:</div>
|
|
{#each regionFilters as filter}
|
|
<div class="join">
|
|
<input
|
|
type="checkbox"
|
|
bind:checked={filter.selected}
|
|
class="join-item checkbox"
|
|
/>
|
|
<div class="input input-xs join-item">{filter.region}</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div class="py-2"></div>
|
|
<CustomScrollBar
|
|
overflowX="hidden"
|
|
overflowY="auto"
|
|
Class="h-[60vh] border border-base-200 "
|
|
requireAbsolute={true}
|
|
hideOnMobile={true}
|
|
>
|
|
<table class="table w-full border-separate border-spacing-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="sticky top-0 bg-base-100 z-10">Country</th>
|
|
<th class="sticky top-0 bg-base-100 z-10">ISO3</th>
|
|
<th class="sticky top-0 bg-base-100 z-10">From buttons</th>
|
|
<th class="sticky top-0 bg-base-100 z-10">Towards buttons</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each iso3 as country}
|
|
{#if (getCountryName(country)
|
|
.toLowerCase()
|
|
.includes(searchFilter.toLowerCase()) || country
|
|
.toLowerCase()
|
|
.includes(searchFilter.toLowerCase())) && (!regionFilters.some((r) => r.selected) || regionFilters.find((r) => r.region === countryList.findByIso3(country)?.continent)?.selected)}
|
|
<!-- Changed your data cell wrappers from <th> to <td> for correct semantics -->
|
|
<tr class="hover">
|
|
<td>{getCountryName(country)}</td>
|
|
<td>{country}</td>
|
|
<td>
|
|
<div class="w-full h-full grid items-center justify-center">
|
|
<button
|
|
on:click={() => selectCountry(country, false)}
|
|
class="btn btn-outline btn-primary">From</button
|
|
>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="w-full h-full grid items-center justify-center">
|
|
<button
|
|
on:click={() => selectCountry(country, true)}
|
|
class="btn btn-outline btn-secondary">Towards</button
|
|
>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{/if}
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</CustomScrollBar>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center w-full">
|
|
<div class="flex flex-col">
|
|
<div class="text-4xl">Sources</div>
|
|
<div class="flex justify-center gap-8">
|
|
<a
|
|
class="link link-primary"
|
|
href="https://git.deprived.dev/DeprivedDevs/deprived-main-website/src/branch/main/src/routes/school/css"
|
|
>Website repository</a
|
|
>
|
|
<a
|
|
class="link link-primary"
|
|
href="https://github.com/MagicBOTAlex/Social-Informatik-02467-project"
|
|
>Python repository</a
|
|
>
|
|
<a
|
|
class="link link-primary"
|
|
href="https://www.kaggle.com/datasets/unitednations/un-general-debates"
|
|
>Dataset from kaggle</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="py-8"></div>
|
|
</div>
|