diff --git a/src/lib/Intro.svelte b/src/lib/Intro.svelte index 1709404..b61eb8a 100644 --- a/src/lib/Intro.svelte +++ b/src/lib/Intro.svelte @@ -45,6 +45,11 @@

{/if} + {#if $$slots.extra} +
+ +
+ {/if}
{#if $$slots.portrait} diff --git a/src/lib/Ranking.svelte b/src/lib/Ranking.svelte index fc1ce98..aa18ef8 100644 --- a/src/lib/Ranking.svelte +++ b/src/lib/Ranking.svelte @@ -3,36 +3,25 @@ import { countries } from '$lib/countries' let query = '' - let open = null - let data = countries() - // default sort key - const order = writable('name') - - // default sort direction - const direction = writable(1) - - // copy of the data items const items = writable(data) - function toggle(index) { - open = open === index ? null : index - } + // default sorting + const col = writable('rank') + let panel = 'participation' + let reverse = writable(true) - function setSort(target) { - open = null - if ($order === target) { - direction.update((val) => -val) + function sort(key) { + if ($col === key) { + reverse.set(!$reverse) } else { - order.set(target) - direction.set(1) + col.set(key) } } $: { items.set(data) - open = null if (query) { const filtered = $items.filter((item) => { query = query.toLowerCase() @@ -42,22 +31,31 @@ }) items.set(filtered) } - const sorted = [...$items].sort((a, b) => { - if ($order === 'name') { - if (a[$order] < b[$order]) { - return -$direction - } else if (a[$order] > b[$order]) { - return $direction + + let sorted = [...$items] + if ($col === 'name') { + sorted.sort((a, b) => { + if ($reverse) { + if (a[$col] < b[$col]) return -1 + if (a[$col] > b[$col]) return 1 + return 0 + } else { + if (a[$col] > b[$col]) return -1 + if (a[$col] < b[$col]) return 1 + return 0 } + }) + } else { + if ($reverse) { + sorted.sort((a, b) => { + return +a[panel][$col] - +b[panel][$col] + }) } else { - if (a[$order].rank - b[$order].rank) { - return -$direction - } else if (b[$order].rank - a[$order].rank) { - return $direction - } + sorted.sort((a, b) => { + return +b[panel][$col] - +a[panel][$col] + }) } - return 0 - }) + } items.set(sorted) } @@ -65,28 +63,70 @@
+ Search + placeholder="Country or region…" /> + Rankings +
+ + + + +
- - - - - - - - - - {#each $items as item, index} - {#if item.name !== 'East Germany'} +
+
setSort('name')} style="width: 35%">Name setSort('representation')} style="width: 17.5%"> - Representation - setSort('rights')} style="width: 17.5%">Rights setSort('law')} style="width: 17.5%">Rule of Law setSort('participation')} style="width: 17.5%"> - Participation -
+ + + + + + + + + + + {#each $items as item, index} {@const slug = item.name .toLowerCase() .replaceAll(' ', '-') @@ -95,171 +135,337 @@ .replaceAll('south-korea', 'republic-korea') .replaceAll('united-states', 'united-states-america') .replaceAll('east-germany', 'germany')} - toggle(index)}> + + + + + + + + + {/each} + +
sort('name')} style="width: 28%">Name sort('score')} style="width: 12%">Score sort('rank')} style="width: 12%"> + Ranking +
+ 2022 + 		sort('change_1y')} style="width: 12%"> + Change +
+ 2021→2022 + 		sort('rank_2021')} style="width: 12%"> + Ranking +
+ 2021 + 		sort('change_5y')} style="width: 12%"> + Change +
+ 2017→2022 + 		sort('rank_2017')} style="width: 12%"> + Ranking +
+ 2017 +
- {item.name}, + + {item.name} + + , {item.region} -
+ 		+ + {(+item.participation.score).toFixed(3)} + + + + {item.participation.rank} + + + + {item.participation.change_1y} + + + + {item.participation.rank_2021} + + + + {item.participation.change_5y} + + + + {item.participation.rank_2017} + +
+
+
+ + + + + + + + + + + + {#each $items as item, index} + {@const slug = item.name + .toLowerCase() + .replaceAll(' ', '-') + .replaceAll('-of-the-', '-') + .replaceAll('north-korea', 'democratic-peoples-republic-korea') + .replaceAll('south-korea', 'republic-korea') + .replaceAll('united-states', 'united-states-america') + .replaceAll('east-germany', 'germany')} + + + + - + + + + + {/each} + +
sort('name')} style="width: 28%">Name sort('score')} style="width: 12%">Score sort('rank')} style="width: 12%"> + Ranking +
+ 2022 + 		sort('change_1y')} style="width: 12%"> + Change +
+ 2021→2022 + 		sort('rank_2021')} style="width: 12%"> + Ranking +
+ 2021 + 		sort('change_5y')} style="width: 12%"> + Change +
+ 2017→2022 + 		sort('rank_2017')} style="width: 12%"> + Ranking +
+ 2017 +
- View Country - Profile + {item.name} + , + {item.region} + + + {(+item.representation.score).toFixed(3)} + + + + {item.representation.rank} + -
- {#if item.representation.rank !== 'null'} - {item.representation.rank} - {/if} - Ranking -
- -
+ - {#if item.representation.change_1y !== 'null'} - {item.representation.change_1y} - Change - {/if} - (1y) - (1 year) -
-
+
+ + {item.representation.rank_2021} + + + - {#if item.representation.change_5y !== 'null'} - {item.representation.change_5y} - Change - {/if} - (5y) - (5 year) - + {item.representation.change_5y} + + + + {item.representation.rank_2017} + +
+
+
+ + + + + + + + + + + + {#each $items as item, index} + {@const slug = item.name + .toLowerCase() + .replaceAll(' ', '-') + .replaceAll('-of-the-', '-') + .replaceAll('north-korea', 'democratic-peoples-republic-korea') + .replaceAll('south-korea', 'republic-korea') + .replaceAll('united-states', 'united-states-america') + .replaceAll('east-germany', 'germany')} + + + - + + + + + + {/each} + +
sort('name')} style="width: 28%">Name sort('score')} style="width: 12%">Score sort('rank')} style="width: 12%"> + Ranking +
+ 2022 + 		sort('change_1y')} style="width: 12%"> + Change +
+ 2021→2022 + 		sort('rank_2021')} style="width: 12%"> + Ranking +
+ 2021 + 		sort('change_5y')} style="width: 12%"> + Change +
+ 2017→2022 + 		sort('rank_2017')} style="width: 12%"> + Ranking +
+ 2017 +
+ + {item.name} + + , + {item.region} + + + {(+item.rights.score).toFixed(3)} + -
- {#if item.rights.rank !== 'null'} - {item.rights.rank} - {/if} - Ranking -
- -
+ + {item.rights.rank} + +
+ - {#if item.rights.change_1y !== 'null'} - {item.rights.change_1y} - Change - {/if} - (1y) - (1 year) - -
+
+ + {item.rights.rank_2021} + + + - {#if item.rights.change_5y !== 'null'} - {item.rights.change_5y} - Change - {/if} - (5y) - (5 year) - + {item.rights.change_5y} + + + + {item.rights.rank_2017} + +
+
+
+ + + + + + + + + + + + {#each $items as item, index} + {@const slug = item.name + .toLowerCase() + .replaceAll(' ', '-') + .replaceAll('-of-the-', '-') + .replaceAll('north-korea', 'democratic-peoples-republic-korea') + .replaceAll('south-korea', 'republic-korea') + .replaceAll('united-states', 'united-states-america') + .replaceAll('east-germany', 'germany')} + + + - + + + - - {/if} - {/each} - -
sort('name')} style="width: 28%">Name sort('score')} style="width: 12%">Score sort('rank')} style="width: 12%"> + Ranking +
+ 2022 + 		sort('change_1y')} style="width: 12%"> + Change +
+ 2021→2022 + 		sort('rank_2021')} style="width: 12%"> + Ranking +
+ 2021 + 		sort('change_5y')} style="width: 12%"> + Change +
+ 2017→2022 + 		sort('rank_2017')} style="width: 12%"> + Ranking +
+ 2017 +
+ + {item.name} + + , + {item.region} + + + {(+item.law.score).toFixed(3)} + -
- {#if item.law.rank !== 'null'} - {item.law.rank} - {/if} - Ranking -
- -
+ + {item.law.rank} + +
+ - {#if item.law.change_1y !== 'null'} - {item.law.change_1y} - Change - {/if} - (1y) - (1 year) - -
+
+ + {item.law.rank_2021} + + + - {#if item.law.change_5y !== 'null'} - {item.law.change_5y} - Change - {/if} - (5y) - (5 year) - + {item.law.change_5y} + -
- {#if item.participation.rank !== 'null'} - {item.participation.rank} - {/if} - Ranking -
- -
- {#if item.participation.change_1y !== 'null'} - {item.participation.change_1y} - Change - {/if} - (1y) - (1 year) -
-
- {#if item.participation.change_5y !== 'null'} - {item.participation.change_5y} - Change - {/if} - (5y) - (5 year) -
+ 		+ + {item.law.rank_2017} +
+ {/each} + + +
diff --git a/src/lib/countries.js b/src/lib/countries.js index a79406d..3316249 100644 --- a/src/lib/countries.js +++ b/src/lib/countries.js @@ -52,25 +52,33 @@ export function countries() { score: item[3], rank: item[4], change_1y: item[5], - change_5y: item[6] + change_5y: item[6], + rank_2021: Math.abs(item[4] - item[5]), + rank_2017: Math.abs(item[4] - item[6]) }, rights: { score: item[7], rank: item[8], change_1y: item[9], - change_5y: item[10] + change_5y: item[10], + rank_2021: Math.abs(item[8] - item[9]), + rank_2017: Math.abs(item[8] - item[10]) }, law: { score: item[11], rank: item[12], change_1y: item[13], - change_5y: item[14] + change_5y: item[14], + rank_2021: Math.abs(item[12] - item[13]), + rank_2017: Math.abs(item[12] - item[14]) }, participation: { score: item[15], rank: item[16], change_1y: item[17], - change_5y: item[18] + change_5y: item[18], + rank_2021: Math.abs(item[16] - item[17]), + rank_2017: Math.abs(item[16] - item[18]) } } }) diff --git a/src/routes/(app)/countries/+page.svelte b/src/routes/(app)/countries/+page.svelte index 4e3472d..316463c 100644 --- a/src/routes/(app)/countries/+page.svelte +++ b/src/routes/(app)/countries/+page.svelte @@ -6,6 +6,7 @@ import Theme from '$lib/Theme.svelte' import Intro from '$lib/Intro.svelte' import Menu from '$lib/Menu.svelte' + import Html from '$lib/Html.svelte' import Meta from '$lib/Meta.svelte' export let data @@ -28,7 +29,26 @@ {ranking.title} - {ranking.subheading} + +

+ This year, we have included annual global rankings of country + performance for each of the categories of democratic + performance—Representation, Rights, Rule of Law, and Participation— + rather than classifying regimes on an overall basis. +

+

+ The focus on category-level performance (rather than on something like + regime types) allows for a more nuanced understanding of where democracy + is thriving and where it is suffering. It also shifts the focus from the + broad idea of democracy generally to specific and narrower aspects of + democracy, which are more appropriate to target for reform and + intervention. +

+

+ Read more about the methodology + . +

+