CSS school progress
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 24s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 24s
This commit is contained in:
parent
c5e6c371c4
commit
3dfb5810f2
4 changed files with 486 additions and 42 deletions
|
|
@ -1,5 +1,8 @@
|
|||
<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";
|
||||
|
||||
class Range {
|
||||
start: number = 0;
|
||||
|
|
@ -18,51 +21,150 @@
|
|||
if (rightRange.start == rightRange.end) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
let currentCountry: string = "";
|
||||
let interactiveEmbed: HTMLIFrameElement;
|
||||
|
||||
function selectCountry(country: string, towards: boolean) {
|
||||
currentCountry =
|
||||
"https://deprived.dev/assets/school/social-science/data/interactive/" +
|
||||
country +
|
||||
"-" +
|
||||
(towards ? "in" : "out") +
|
||||
".html";
|
||||
|
||||
interactiveEmbed.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
}
|
||||
|
||||
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(() => {
|
||||
console.log(countryList.findByIso3("DNK"));
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center justify-center w-full prose">
|
||||
<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 class="flex flex-col w-full h-full pt-40 gap-16">
|
||||
<div class="flex justify-center w-full">
|
||||
<h1 class="text-4xl">Computational Social Science</h1>
|
||||
</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="flex gap-8">
|
||||
<DoubleRangeSlider
|
||||
bind:start={leftRange.start}
|
||||
bind:end={leftRange.end}
|
||||
/>
|
||||
<DoubleRangeSlider
|
||||
bind:start={rightRange.start}
|
||||
bind:end={rightRange.end}
|
||||
/>
|
||||
<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="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 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 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 class="w-full flex flex-col items-center gap-10">
|
||||
<div class="w-80">
|
||||
<div class="text-4xl">Interactive graphs</div>
|
||||
<div>
|
||||
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>
|
||||
|
||||
<div style="width: 80%; height: 800px;">
|
||||
<iframe
|
||||
src={currentCountry}
|
||||
width="100%"
|
||||
height="100%"
|
||||
style="border: none; background: transparent;"
|
||||
allowtransparency={true}
|
||||
title="Network Graph"
|
||||
bind:this={interactiveEmbed}
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="w-[40%]">
|
||||
<div class="text-2xl">List of interactive graphs</div>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
{#each iso3 as country}
|
||||
<tr>
|
||||
<th>{getCountryName(country)}</th>
|
||||
<th
|
||||
><button
|
||||
on:click={() => selectCountry(country, false)}
|
||||
class="btn btn-outline btn-primary">From {country}</button
|
||||
></th
|
||||
>
|
||||
<th
|
||||
><button
|
||||
on:click={() => selectCountry(country, true)}
|
||||
class="btn btn-outline btn-secondary"
|
||||
>Towards {country}</button
|
||||
></th
|
||||
>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
201
src/routes/school/css/iso3.json
Normal file
201
src/routes/school/css/iso3.json
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
[
|
||||
"AFG",
|
||||
"AGO",
|
||||
"ALB",
|
||||
"AND",
|
||||
"ARE",
|
||||
"ARG",
|
||||
"ARM",
|
||||
"ATG",
|
||||
"AUS",
|
||||
"AUT",
|
||||
"AZE",
|
||||
"BDI",
|
||||
"BEL",
|
||||
"BEN",
|
||||
"BFA",
|
||||
"BGD",
|
||||
"BGR",
|
||||
"BHR",
|
||||
"BHS",
|
||||
"BIH",
|
||||
"BLR",
|
||||
"BLZ",
|
||||
"BOL",
|
||||
"BRA",
|
||||
"BRB",
|
||||
"BRN",
|
||||
"BTN",
|
||||
"BWA",
|
||||
"CAF",
|
||||
"CAN",
|
||||
"CHE",
|
||||
"CHL",
|
||||
"CHN",
|
||||
"CIV",
|
||||
"CMR",
|
||||
"COD",
|
||||
"COG",
|
||||
"COL",
|
||||
"COM",
|
||||
"CPV",
|
||||
"CRI",
|
||||
"CSK",
|
||||
"CUB",
|
||||
"CYP",
|
||||
"CZE",
|
||||
"DDR",
|
||||
"DEU",
|
||||
"DJI",
|
||||
"DMA",
|
||||
"DNK",
|
||||
"DOM",
|
||||
"DZA",
|
||||
"ECU",
|
||||
"EGY",
|
||||
"ERI",
|
||||
"ESP",
|
||||
"EST",
|
||||
"ETH",
|
||||
"EU",
|
||||
"FIN",
|
||||
"FJI",
|
||||
"FRA",
|
||||
"FSM",
|
||||
"GAB",
|
||||
"GBR",
|
||||
"GEO",
|
||||
"GHA",
|
||||
"GIN",
|
||||
"GMB",
|
||||
"GNB",
|
||||
"GNQ",
|
||||
"GRC",
|
||||
"GRD",
|
||||
"GTM",
|
||||
"GUY",
|
||||
"HND",
|
||||
"HRV",
|
||||
"HTI",
|
||||
"HUN",
|
||||
"IDN",
|
||||
"IND",
|
||||
"IRL",
|
||||
"IRN",
|
||||
"IRQ",
|
||||
"ISL",
|
||||
"ISR",
|
||||
"ITA",
|
||||
"JAM",
|
||||
"JOR",
|
||||
"JPN",
|
||||
"KAZ",
|
||||
"KEN",
|
||||
"KGZ",
|
||||
"KHM",
|
||||
"KIR",
|
||||
"KNA",
|
||||
"KOR",
|
||||
"KWT",
|
||||
"LAO",
|
||||
"LBN",
|
||||
"LBR",
|
||||
"LBY",
|
||||
"LCA",
|
||||
"LIE",
|
||||
"LKA",
|
||||
"LSO",
|
||||
"LTU",
|
||||
"LUX",
|
||||
"LVA",
|
||||
"MAR",
|
||||
"MCO",
|
||||
"MDA",
|
||||
"MDG",
|
||||
"MDV",
|
||||
"MEX",
|
||||
"MHL",
|
||||
"MKD",
|
||||
"MLI",
|
||||
"MLT",
|
||||
"MMR",
|
||||
"MNE",
|
||||
"MNG",
|
||||
"MOZ",
|
||||
"MRT",
|
||||
"MUS",
|
||||
"MWI",
|
||||
"MYS",
|
||||
"NAM",
|
||||
"NER",
|
||||
"NGA",
|
||||
"NIC",
|
||||
"NLD",
|
||||
"NOR",
|
||||
"NPL",
|
||||
"NRU",
|
||||
"NZL",
|
||||
"OMN",
|
||||
"PAK",
|
||||
"PAN",
|
||||
"PER",
|
||||
"PHL",
|
||||
"PLW",
|
||||
"PNG",
|
||||
"POL",
|
||||
"PRK",
|
||||
"PRT",
|
||||
"PRY",
|
||||
"PSE",
|
||||
"QAT",
|
||||
"ROU",
|
||||
"RUS",
|
||||
"RWA",
|
||||
"SAU",
|
||||
"SDN",
|
||||
"SEN",
|
||||
"SGP",
|
||||
"SLB",
|
||||
"SLE",
|
||||
"SLV",
|
||||
"SMR",
|
||||
"SOM",
|
||||
"SSD",
|
||||
"STP",
|
||||
"SUR",
|
||||
"SVK",
|
||||
"SVN",
|
||||
"SWE",
|
||||
"SWZ",
|
||||
"SYC",
|
||||
"SYR",
|
||||
"TCD",
|
||||
"TGO",
|
||||
"THA",
|
||||
"TJK",
|
||||
"TKM",
|
||||
"TLS",
|
||||
"TON",
|
||||
"TTO",
|
||||
"TUN",
|
||||
"TUR",
|
||||
"TUV",
|
||||
"TZA",
|
||||
"UGA",
|
||||
"UKR",
|
||||
"URY",
|
||||
"USA",
|
||||
"UZB",
|
||||
"VAT",
|
||||
"VCT",
|
||||
"VEN",
|
||||
"VNM",
|
||||
"VUT",
|
||||
"WSM",
|
||||
"YDYE",
|
||||
"YEM",
|
||||
"YUG",
|
||||
"ZAF",
|
||||
"ZMB",
|
||||
"ZWE"
|
||||
]
|
||||
Loading…
Add table
Add a link
Reference in a new issue