From bb0f115f0450273fc76a481c473e64a72cf37817 Mon Sep 17 00:00:00 2001
From: Jakob Schoedl
Date: Mon, 4 Nov 2024 11:35:12 +0100
Subject: [PATCH 01/14] feat: add About page with intro text
---
src/components/About/About.tsx | 46 +++++++++++++++++++
.../About/HungerMapLiveSuperscript.tsx | 12 +++++
src/styles/globals.css | 14 ++++++
3 files changed, 72 insertions(+)
create mode 100644 src/components/About/About.tsx
create mode 100644 src/components/About/HungerMapLiveSuperscript.tsx
diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx
new file mode 100644
index 00000000..367b43cf
--- /dev/null
+++ b/src/components/About/About.tsx
@@ -0,0 +1,46 @@
+import { Link } from '@nextui-org/link';
+import React from 'react';
+
+import HungerMapLiveSuperscript from '@/components/About/HungerMapLiveSuperscript';
+
+export function About() {
+ return (
+
+
+ About
+
+
+
+
+ is the World Food Programme (WFP)’s global hunger monitoring system.
+ {' '}
+ It combines key metrics from various data sources – such as food security information, weather, population
+ size, conflict, hazards, nutrition information and macro-economic data – to help assess, monitor and predict
+ the magnitude and severity of hunger in near real-time. The resulting analysis is displayed on an interactive
+ map that helps WFP staff, key decision makers and the broader humanitarian community to make more informed and
+ timely decisions relating to food security.
+
+
+ The platform covers 94 countries, including countries where WFP has operations as well as most{' '}
+
+ lower and lower-middle income countries
+ {' '}
+ (as classified by the World Bank). For any questions, comments, or if you would like further information,
+ please get in touch by sending an email to{' '}
+
+ wfp.mvam@wfp.org
+
+ .
+
-
- is the World Food Programme (WFP)’s global hunger monitoring system.
- {' '}
- It combines key metrics from various data sources – such as food security information, weather, population
- size, conflict, hazards, nutrition information and macro-economic data – to help assess, monitor and predict
- the magnitude and severity of hunger in near real-time. The resulting analysis is displayed on an interactive
- map that helps WFP staff, key decision makers and the broader humanitarian community to make more informed and
- timely decisions relating to food security.
-
-
- The platform covers 94 countries, including countries where WFP has operations as well as most{' '}
-
- lower and lower-middle income countries
- {' '}
- (as classified by the World Bank). For any questions, comments, or if you would like further information,
- please get in touch by sending an email to{' '}
-
- wfp.mvam@wfp.org
-
- .
-
-
-
-
-
-
- );
-}
-
-export default About;
diff --git a/src/components/About/AboutText.tsx b/src/components/About/AboutText.tsx
new file mode 100644
index 00000000..c4e9c996
--- /dev/null
+++ b/src/components/About/AboutText.tsx
@@ -0,0 +1,41 @@
+import { Link } from '@nextui-org/link';
+import React from 'react';
+
+import HungerMapLiveSuperscript from '@/components/About/HungerMapLiveSuperscript';
+
+export function AboutText() {
+ return (
+
+
+
+ is the World Food Programme (WFP)’s global hunger monitoring system.
+ {' '}
+ It combines key metrics from various data sources – such as food security information, weather, population size,
+ conflict, hazards, nutrition information and macro-economic data – to help assess, monitor and predict the
+ magnitude and severity of hunger in near real-time. The resulting analysis is displayed on an interactive map
+ that helps WFP staff, key decision makers and the broader humanitarian community to make more informed and
+ timely decisions relating to food security.
+
+
+ The platform covers 94 countries, including countries where WFP has operations as well as most{' '}
+
+ lower and lower-middle income countries
+ {' '}
+ (as classified by the World Bank). For any questions, comments, or if you would like further information, please
+ get in touch by sending an email to{' '}
+
+ wfp.mvam@wfp.org
+
+ .
+
Near real-time food security continuous monitoring
+
+
+
+
Predictive analysis
+
+ For first-level administrative areas where daily updated survey data is not available, the prevalence of
+ people with poor or borderline{' '}
+
+ food consumption (FCS)
+ {' '}
+ and the prevalence of people with{' '}
+
+ reduced coping strategy index (rCSI)
+ {' '}
+ ≥ 19 is estimated with a predictive model.
+
+
+
);
}
diff --git a/src/components/About/AboutText.tsx b/src/components/About/AboutText.tsx
index c4e9c996..e53450e9 100644
--- a/src/components/About/AboutText.tsx
+++ b/src/components/About/AboutText.tsx
@@ -1,11 +1,11 @@
-import { Link } from '@nextui-org/link';
import React from 'react';
+import ExternalLink from '@/components/About/ExternalLink';
import HungerMapLiveSuperscript from '@/components/About/HungerMapLiveSuperscript';
export function AboutText() {
return (
-
+ <>
is the World Food Programme (WFP)’s global hunger monitoring system.
@@ -16,25 +16,21 @@ export function AboutText() {
that helps WFP staff, key decision makers and the broader humanitarian community to make more informed and
timely decisions relating to food security.
+
+ WFP’s Hunger Monitoring Unit in the Research, Assessment and Monitoring Division conducts real-time food
+ security monitoring to track the latest food security trends. In areas where limited or no data is available, we
+ use machine learning-based predictive models to estimate the food security situation.
+
The platform covers 94 countries, including countries where WFP has operations as well as most{' '}
-
+
lower and lower-middle income countries
- {' '}
+ {' '}
(as classified by the World Bank). For any questions, comments, or if you would like further information, please
- get in touch by sending an email to{' '}
-
- wfp.mvam@wfp.org
-
+ get in touch by sending an email to wfp.mvam@wfp.org
.
-
+ >
);
}
diff --git a/src/components/About/ExternalLink.tsx b/src/components/About/ExternalLink.tsx
new file mode 100644
index 00000000..94a40067
--- /dev/null
+++ b/src/components/About/ExternalLink.tsx
@@ -0,0 +1,13 @@
+import { Link } from '@nextui-org/link';
+import clsx from 'clsx';
+import React, { ReactNode } from 'react';
+
+function ExternalLink({ href, children, className }: { href: string; children: ReactNode; className?: string }) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default ExternalLink;
diff --git a/src/domain/constant/about/accordionItems.tsx b/src/domain/constant/about/accordionItems.tsx
deleted file mode 100644
index 1d803db7..00000000
--- a/src/domain/constant/about/accordionItems.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import GroupedTable from '@/components/GroupedTable/GroupedTable';
-import { accuracyTableColumns, accuracyTableData } from '@/domain/constant/about/accuracyTableData';
-
-const accordionItems = [
- {
- title: 'How accurate are the prediction algorithms?',
- content: (
-
- ),
- },
-];
-
-export default accordionItems;
diff --git a/src/domain/constant/about/accuracyTableData.tsx b/src/domain/constant/about/accuracyTableContents.tsx
similarity index 67%
rename from src/domain/constant/about/accuracyTableData.tsx
rename to src/domain/constant/about/accuracyTableContents.tsx
index 537894e8..86ccc268 100644
--- a/src/domain/constant/about/accuracyTableData.tsx
+++ b/src/domain/constant/about/accuracyTableContents.tsx
@@ -1,5 +1,4 @@
-import { Link } from '@nextui-org/link';
-
+import ExternalLink from '@/components/About/ExternalLink';
import { GroupedTableColumns, GroupedTableData } from '@/domain/props/GroupedTableProps';
export const accuracyTableColumns = [
@@ -8,15 +7,16 @@ export const accuracyTableColumns = [
{ columnId: 'FCS', label: 'FCS' },
{ columnId: 'rCSI', label: 'rCSI' },
] as GroupedTableColumns;
-export const accuracyTableData = [
+
+export const accuracyTableContents = [
{
groupKey: '1',
groupName: (
<>
{' '}
-
+
Coefficient of determination (R²)
- {' '}
+ {' '}
(higher is better)
>
),
@@ -28,12 +28,12 @@ export const accuracyTableData = [
{
groupKey: '2',
groupName: (
- <>
-
+
+
Mean Absolute Error
- {' '}
+ {' '}
(lower is better)
- >
+
),
attributeRows: [
{ withPast: true, FCS: 0.08, rCSI: 0.06 },
diff --git a/src/domain/constant/about/generalFaqItems.tsx b/src/domain/constant/about/generalFaqItems.tsx
new file mode 100644
index 00000000..8f7152d6
--- /dev/null
+++ b/src/domain/constant/about/generalFaqItems.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+import ExternalLink from '@/components/About/ExternalLink';
+import HungerMapLiveSuperscript from '@/components/About/HungerMapLiveSuperscript';
+import { AccordionItemProps } from '@/domain/entities/accordions/Accordions';
+
+const generalFaqItems: AccordionItemProps[] = [
+ {
+ title: 'What is shown on the "Current food consumption" map?',
+ content: (
+ <>
+
+ The global view of the visualizes two data streams:
+
+
+
Prevalence of insufficient food intake at administrative level 1 (green, yellow, and red color)
+
Population density (brightness of a region)
+
+
+ Therefore, the color indicates the level of food insufficiency in a given country - wherein red signals areas
+ where people are not meeting the required food intake levels and thus require urgent assistance. At the same
+ time, the brightness of a region or country indicates how populated the area is - wherein brighter areas
+ signal the presence of more people.
+
+
+ More so, in areas where we do not have data on the prevalence of people with insufficient food intake - and
+ are therefore not clickable - we use the{' '}
+
+ Proteus index
+
+ , which measures food security in 185 countries over 28 years and is published annually.
+
+ >
+ ),
+ },
+ {
+ title: 'Why are the numbers different from last time I checked?',
+ content: (
+ <>
+
+ You might notice that the figures in the trends of the number of people with insufficient food consumption and
+ of the number of people using crisis or above crisis food-based coping might have changed from the last time
+ you accessed the . These are several reasons why this might have happened.
+
+
+
+ We are constantly looking at improving our predictive model. We regularly re-train the model as new
+ food insecurity data comes in from our near-real time food security continuous monitoring systems and from
+ face-to-face or mVAM surveys carried out by WFP Country Offices. Sometimes we also add new features to the
+ model to improve its accuracy. Overall, any change we make to the model is meant to improve the predictions
+ and make them closer to the truth. For consistency, every time we improve the model, we re-run the
+ predictions for the last 90 days, and this is why you might see numbers changing for dates in the past as
+ well.
+
+
+ As we expand our continuous monitoring systems, and as data becomes available for a new country, we{' '}
+ switch from showing predictions to showing actual data estimates obtained from daily mVAM surveys.
+ So, when this happens, we replace the historical, prediction-based series of data with the actual, live data
+ being collected daily.
+
+
+ We are constantly working to improve our survey aggregation methodology, exploring the best ways to
+ weight the contribution of each household and of each geographical area. As we improve how we compute the
+ aggregates, we apply the new methods across the entire historical series of data, and this may be why the
+ trends may show different numbers sometimes.
+
+
+ Finally, another reason might be because we obtained updated population estimates from WFP Country
+ Offices. In this case, the existing numbers computed from the predictive models or the continuous monitoring
+ data are recalculated with the new population estimates, causing changes in the number of people with
+ insufficient food consumption and using negative coping strategies.
+
+
+ >
+ ),
+ },
+];
+
+export default generalFaqItems;
diff --git a/src/domain/constant/about/predictionFaqItems.tsx b/src/domain/constant/about/predictionFaqItems.tsx
new file mode 100644
index 00000000..af5afea4
--- /dev/null
+++ b/src/domain/constant/about/predictionFaqItems.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+
+import ExternalLink from '@/components/About/ExternalLink';
+import GroupedTable from '@/components/GroupedTable/GroupedTable';
+import { accuracyTableColumns, accuracyTableContents } from '@/domain/constant/about/accuracyTableContents';
+import { AccordionItemProps } from '@/domain/entities/accordions/Accordions';
+
+const generalQuestionItems: AccordionItemProps[] = [
+ {
+ title: 'What data are used for training the models?',
+ content: (
+ <>
+
+ The models were trained using FCS and rCSI data spanning over 70 countries across, aggregated at the level of
+ first-order administrative divisions. The input variables used to make the predictions were built using
+ information about population density, rainfall, vegetation status, conflict, market prices, macroeconomic
+ indicators, and undernourishment. For areas where past FCS/rCSI measurements are available, the last available
+ data point is also included as input variable.
+
+
+ More details are listed in the Data sources page. Additional sources used only for the model but not
+ for display purposes are:
+
+
+
+
+ Gridded Population of the World, Version 4 (GPWv4): Population Count, Revision 11
+
+
+ >
+ ),
+ },
+ {
+ title: 'Which algorithm is being used for training?',
+ content: (
+
+ The predictive models are trained using XGBoost – a
+ machine learning technique producing predictive models in the of an ensemble of regression trees. The model
+ parameters were optimized by a cross-validated grid-search.
+
+ ),
+ },
+ {
+ title: 'How accurate are the predictions?',
+ content: (
+ <>
+
+ The accuracy of the model was evaluated on a test set comprising 20% of the historical data, having trained
+ 100 models on subsamples (with replacement) of the remaining 80% of the historical data. The following results
+ were obtained on the test sets.
+
+
+ >
+ ),
+ },
+ {
+ title: 'Which data are predicted by the model?',
+ content: (
+
+ The model produces current estimates of the prevalence of people with poor or borderline FCS and rCSI for areas
+ where no food security data is available; we call this nowcasting. For each first-level administrative boundary
+ we report the median and 95% confidence intervals of a distribution of predictions obtained from 100-bootstrap
+ models trained on subsamples (with replacement) of the training data.
+
+ ),
+ },
+ {
+ title: "What are next steps in the development of WFP's predictions?",
+ content: (
+
+ Moving forward, more features will be developed and made available to explain how predicted numbers are
+ calculated. In tandem, a technical report on the predictive model will also be made available soon.
+ Additionally, WFP aims to extend the scope of the system’s predictions from nowcasting the current food security
+ situation to forecasting how the situation is likely to change in the next one, three or six months.
+
+ ),
+ },
+];
+
+export default generalQuestionItems;
diff --git a/src/domain/constant/about/realTimeFaqItems.tsx b/src/domain/constant/about/realTimeFaqItems.tsx
new file mode 100644
index 00000000..3627c604
--- /dev/null
+++ b/src/domain/constant/about/realTimeFaqItems.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { AccordionItemProps } from '@/domain/entities/accordions/Accordions';
+
+const generalQuestionItems: AccordionItemProps[] = [
+ {
+ title: 'How does the near real-time food security monitoring work?',
+ content: (
+ <>
+
+ WFP conducts continuous food security monitoring via computer assisted telephone interviewing (CATI){' '}
+ through call centers. Data is collected on a rolling basis, spread evenly over a past 28/30 calendar days or
+ over a three-month period. The main advantage of this approach is that data is available more frequently and
+ processed daily through automated statistical engines. Daily updates are then produced showing a
+ snapshot of the current food security situation (with a slight time lag of 2-4 days to ensure data quality)
+ over the past 28/30 calendar days.
+
+
+ The questionnaire includes questions on household demographics, households’ food consumption, coping
+ strategies used (food-based and livelihood-based), access to food, market and health services, and other
+ country-specific livelihood-related questions. In addition, at the end of the survey, respondents are given
+ the opportunity to share additional information on the food situation in their communities.
+
+ >
+ ),
+ },
+ {
+ title: 'How does the WFP strive for representative monitoring results?',
+ content: (
+ <>
+
+ The call interviews aim to cover all mobile service providers, and telephone numbers are randomly selected
+ from a database of phone numbers or generated using random-digit dialling (RDD) method. To ensure a more
+ representative sample, WFP uses various types of pre/post-stratification and sampling methods,
+ including by weighting results by population at the first or second administrative level and by a demographic
+ variable such as the level of education or water sources which could impact food security, in order to account
+ for the fact that households with more phones are more likely to be selected (e.g. younger, somewhat
+ better-off households who live in urban areas).
+
+
+ In order to compensate for non-response and attrition, key challenges for high frequency mobile phone surveys,
+ new observations are added in each administrative area following the sample design specific for each of the
+ country.
+
+ >
+ ),
+ },
+ {
+ title: 'Where is near real-time data available?',
+ content: (
+
+ The countries where near-real time data is currently displayed are: Afghanistan, Angola, Benin, Burkina Faso,
+ Cameroon, Central African Republic, Chad, Colombia, Congo, Democratic Republic of the Congo, El Salvador,
+ Ethiopia, Guatemala, Guinea, Haiti, Honduras, Iraq, Ivory Coast, Kenya, Madagascar, Malawi, Mali, Mauritania,
+ Mozambique, Nicaragua, Niger, Nigeria, Sierra Leone, Somalia, Syrian Arab Republic, United Republic of Tanzania,
+ Yemen, Zambia, and Zimbabwe (as of January April 2021).
+
+ ),
+ },
+];
+
+export default generalQuestionItems;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index da223f27..c8ca3ccc 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -8,12 +8,32 @@
}
main h1 {
- @apply text-4xl sm:text-5xl lg:text-7xl font-black
+ @apply text-4xl sm:text-5xl lg:text-7xl font-black mb-8
}
- main p {
+ main h2 {
+ @apply text-2xl lg:text-3xl mb-3
+ }
+
+ main p, ol, ul {
@apply text-large leading-relaxed pb-6
}
+
+ main p:last-child {
+ @apply pb-0
+ }
+
+ main ol, ul {
+ @apply pl-8
+ }
+
+ main ol {
+ @apply list-decimal
+ }
+
+ main ul {
+ @apply list-disc
+ }
}
/* PdfViewer.css */
From c3e5f500c91c94223d64991275b4019087d407a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Sch=C3=B6dl?=
Date: Tue, 12 Nov 2024 11:30:16 +0100
Subject: [PATCH 08/14] feat: replace ExternalLink with a more generic
StyledLink
---
src/app/about/page.tsx | 10 ++++----
src/components/About/AboutText.tsx | 9 ++++----
src/components/About/ExternalLink.tsx | 13 -----------
src/components/About/StyledLink.tsx | 23 +++++++++++++++++++
.../constant/about/accuracyTableContents.tsx | 10 ++++----
src/domain/constant/about/generalFaqItems.tsx | 6 ++---
.../constant/about/predictionFaqItems.tsx | 16 ++++++-------
7 files changed, 48 insertions(+), 39 deletions(-)
delete mode 100644 src/components/About/ExternalLink.tsx
create mode 100644 src/components/About/StyledLink.tsx
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 75b7405f..5dd6f3eb 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import AboutText from '@/components/About/AboutText';
-import ExternalLink from '@/components/About/ExternalLink';
import HungerMapLiveSuperscript from '@/components/About/HungerMapLiveSuperscript';
+import StyledLink from '@/components/About/StyledLink';
import Accordion from '@/components/Accordions/Accordion';
import generalFaqItems from '@/domain/constant/about/generalFaqItems';
import predictionFaqItems from '@/domain/constant/about/predictionFaqItems';
@@ -30,13 +30,13 @@ function Page() {
For first-level administrative areas where daily updated survey data is not available, the prevalence of
people with poor or borderline{' '}
-
+
food consumption (FCS)
- {' '}
+ {' '}
and the prevalence of people with{' '}
-
+
reduced coping strategy index (rCSI)
- {' '}
+ {' '}
≥ 19 is estimated with a predictive model.
diff --git a/src/components/About/AboutText.tsx b/src/components/About/AboutText.tsx
index e53450e9..a7ca611b 100644
--- a/src/components/About/AboutText.tsx
+++ b/src/components/About/AboutText.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import ExternalLink from '@/components/About/ExternalLink';
import HungerMapLiveSuperscript from '@/components/About/HungerMapLiveSuperscript';
+import StyledLink from '@/components/About/StyledLink';
export function AboutText() {
return (
@@ -23,12 +23,11 @@ export function AboutText() {
The platform covers 94 countries, including countries where WFP has operations as well as most{' '}
-
+
lower and lower-middle income countries
- {' '}
+ {' '}
(as classified by the World Bank). For any questions, comments, or if you would like further information, please
- get in touch by sending an email to wfp.mvam@wfp.org
- .
+ get in touch by sending an email to wfp.mvam@wfp.org.
More so, in areas where we do not have data on the prevalence of people with insufficient food intake - and
are therefore not clickable - we use the{' '}
-
+
Proteus index
-
+
, which measures food security in 185 countries over 28 years and is published annually.
>
diff --git a/src/domain/constant/about/predictionFaqItems.tsx b/src/domain/constant/about/predictionFaqItems.tsx
index af5afea4..bac4ea91 100644
--- a/src/domain/constant/about/predictionFaqItems.tsx
+++ b/src/domain/constant/about/predictionFaqItems.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import ExternalLink from '@/components/About/ExternalLink';
+import StyledLink from '@/components/About/StyledLink';
import GroupedTable from '@/components/GroupedTable/GroupedTable';
import { accuracyTableColumns, accuracyTableContents } from '@/domain/constant/about/accuracyTableContents';
import { AccordionItemProps } from '@/domain/entities/accordions/Accordions';
@@ -23,14 +23,14 @@ const generalQuestionItems: AccordionItemProps[] = [
-
+
Gridded Population of the World, Version 4 (GPWv4): Population Count, Revision 11
-
+
>
@@ -40,9 +40,9 @@ const generalQuestionItems: AccordionItemProps[] = [
title: 'Which algorithm is being used for training?',
content: (
- The predictive models are trained using XGBoost – a
- machine learning technique producing predictive models in the of an ensemble of regression trees. The model
- parameters were optimized by a cross-validated grid-search.
+ The predictive models are trained using XGBoost – a machine
+ learning technique producing predictive models in the of an ensemble of regression trees. The model parameters
+ were optimized by a cross-validated grid-search.
About
diff --git a/src/styles/globals.css b/src/styles/globals.css
index c8ca3ccc..123d6508 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,35 +3,35 @@
@tailwind utilities;
@layer base {
- main {
+ .text-content {
@apply max-w-screen-lg mx-auto
}
- main h1 {
+ .text-content h1 {
@apply text-4xl sm:text-5xl lg:text-7xl font-black mb-8
}
- main h2 {
+ .text-content h2 {
@apply text-2xl lg:text-3xl mb-3
}
- main p, ol, ul {
+ .text-content p, .text-content ol, .text-content ul {
@apply text-large leading-relaxed pb-6
}
- main p:last-child {
+ .text-content p:last-child {
@apply pb-0
}
- main ol, ul {
+ .text-content ol, .text-content ul {
@apply pl-8
}
- main ol {
+ .text-content ol {
@apply list-decimal
}
- main ul {
+ .text-content ul {
@apply list-disc
}
}
From 975e7aa98b64d94f20928ee277b96732f2880cd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Sch=C3=B6dl?=
Date: Mon, 18 Nov 2024 10:54:12 +0100
Subject: [PATCH 10/14] feat: add Data Sources page
---
src/app/data_sources/page.tsx | 31 +++
.../dataSourceAccordionItems.tsx | 251 ++++++++++++++++++
src/domain/props/GroupedTableProps.ts | 10 +
.../groupedTable/formatDataSourceTable.tsx | 66 +++++
4 files changed, 358 insertions(+)
create mode 100644 src/app/data_sources/page.tsx
create mode 100644 src/domain/constant/dataSourceTables/dataSourceAccordionItems.tsx
create mode 100644 src/operations/groupedTable/formatDataSourceTable.tsx
diff --git a/src/app/data_sources/page.tsx b/src/app/data_sources/page.tsx
new file mode 100644
index 00000000..620d8318
--- /dev/null
+++ b/src/app/data_sources/page.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import HungerMapLiveSuperscript from '@/components/About/HungerMapLiveSuperscript';
+import StyledLink from '@/components/About/StyledLink';
+import CustomAccordion from '@/components/Accordions/Accordion';
+import dataSourceAccordionItems from '@/domain/constant/dataSourceTables/dataSourceAccordionItems';
+
+function Page() {
+ return (
+
+
+
Data Sources
+
+
+ This section includes all indicators and data sources displayed on (global and
+ country pages).
+ {' '}
+ Additional sources used as input variables for the predictive model but not for display purposes are listed on
+ the{' '}
+
+ About page
+
+ .
+
+
+
+
+ );
+}
+
+export default Page;
diff --git a/src/domain/constant/dataSourceTables/dataSourceAccordionItems.tsx b/src/domain/constant/dataSourceTables/dataSourceAccordionItems.tsx
new file mode 100644
index 00000000..413a8c25
--- /dev/null
+++ b/src/domain/constant/dataSourceTables/dataSourceAccordionItems.tsx
@@ -0,0 +1,251 @@
+import React from 'react';
+
+import GroupedTable from '@/components/GroupedTable/GroupedTable';
+import { AccordionItemProps } from '@/domain/entities/accordions/Accordions';
+import { DataSourceTableData, GroupedTableColumns } from '@/domain/props/GroupedTableProps';
+import formatDataSourceTable from '@/operations/groupedTable/formatDataSourceTable';
+
+const dataSourceTableColumns = [
+ { columnId: 'mainColumn', label: 'Data type' },
+ { columnId: 'source', label: 'Source' },
+] as GroupedTableColumns;
+
+const contextAndNeedTableData: DataSourceTableData = [
+ {
+ label: 'Conflict',
+ description:
+ 'All reported violence and conflicts in the last 30 days across Africa, the Middle East, South and South East ' +
+ 'Asia, Eastern and Southeastern Europe and the Balkans.',
+ dataSource: 'Armed Conflict Location & Event Data Project (ACLED)',
+ dataSourceLink: 'https://acleddata.com/',
+ updateInterval: 'daily',
+ },
+ {
+ label: 'Hazards',
+ description:
+ 'Current hazards information: Active Volcanoes; Active/Forecast Wind Radii (39, 58, 74); Previous, Current and ' +
+ 'Forecast Storm Positions; 3- and 5-day Potential Track Area of Storms; Recent Earthquakes; MODIS Hotspots; ' +
+ 'Tsunami Travel Time; GLIDE Events; H1N1 Affected Countries; Country Boundaries and Labels; Global Shaded ' +
+ 'Relief; Global Population Density; and PDC integrated hazards.',
+ dataSource: 'Pacific Disaster Centre (PDC) - Active Hazards Map Service',
+ updateInterval: 'hourly',
+ },
+ {
+ label: 'Population',
+ description:
+ 'Total population counts all residents, regardless of legal status or citizenship (the values shown are mid-year estimates).',
+ dataSource: 'World Bank',
+ },
+];
+
+const foodSecurityTableData: DataSourceTableData = [
+ {
+ label: 'Estimated number of people',
+ description:
+ 'The number of people are estimated by multiplying the percentages calculated from WFP mVAM data by the population of the country.',
+ dataSource: (
+
+ World Food Programme - (i) representative face-to-face household surveys, e.g. Comprehensive Food Security and
+ Vulnerability Analysis (CFSVA), Emergency Food Security Assessment (EFSA); and (ii) mobile Vulnerability
+ Analysis and Mapping (mVAM) surveys
+
+ ),
+ updateDetails: [
+ { label: 'mVAM surveys', interval: 'daily or monthly' },
+ { label: 'face-to-face surveys', interval: 'biyearly or less' },
+ ],
+ },
+ {
+ label: 'People with insufficient food consumption',
+ description:
+ 'Number of people with poor or borderline food consumption according to the Food Consumption Score (FCS).',
+ readMoreLink: '#',
+ dataSource: (
+
+ World Food Programme - (i) representative face-to-face household surveys, e.g. Comprehensive Food Security and
+ Vulnerability Analysis (CFSVA), Emergency Food Security Assessment (EFSA); and (ii) mobile Vulnerability
+ Analysis and Mapping (mVAM) surveys
+
+ ),
+ updateDetails: [
+ { label: 'mVAM surveys', interval: 'daily or monthly' },
+ { label: 'face-to-face surveys', interval: 'biyearly or less' },
+ ],
+ },
+ {
+ label: 'Integrated Food Security Phase Classification (IPC) / Cadre Harmonisé (CH)',
+ description:
+ 'Developed by a global partnership, the IPC/CH is a set of tools and procedures to classify food insecurity. ' +
+ 'It classifies the populations in five different phases according to the severity of the food insecurity and ' +
+ 'malnutrition situation: Minimal, Stressed, Crisis, Emergency, and Catastrophe/Famine.',
+ dataSource: 'Integrated Phase Classification (IPC) / Cadre Harmonisé (CH)',
+ dataSourceLink: 'https://www.ipcinfo.org/',
+ },
+ {
+ label: 'reduced Coping Strategies Index (rCSI)',
+ description: 'Frequency and Severity of behaviors when faced with shortages of food.',
+ readMoreLink: '#',
+ dataSource: (
+
+ World Food Programme - (i) representative face-to-face household surveys, e.g. Comprehensive Food Security and
+ Vulnerability Analysis (CFSVA), Emergency Food Security Assessment (EFSA); and (ii) mobile Vulnerability
+ Analysis and Mapping (mVAM) surveys
+
+ ),
+ updateDetails: [
+ { label: 'mVAM surveys', interval: 'daily or monthly' },
+ { label: 'face-to-face surveys', interval: 'biyearly or less' },
+ ],
+ },
+ {
+ label: 'Undernourishment',
+ description:
+ 'Estimate of the percentage of individuals in the total populations that are in a condition of undernourishment',
+ dataSource: 'FAO, IFAD, UNICEF, WFP and WHO: "The State of Food Security and Nutrition in the World"',
+ dataSourceLink:
+ 'https://www.wfp.org/publications/2019-state-food-security-and-nutrition-world-sofi-safeguarding-against-economic',
+ updateInterval: 'yearly',
+ },
+];
+
+const nutritionTable: DataSourceTableData = [
+ {
+ label: 'Acute malnutrition',
+ description: 'Characterized by a rapid deterioration in nutritional status over a short period of time.',
+ readMoreLink: '#',
+ dataSource: 'Joint Malnutrition Estimates – UNICEF, WHO, World Bank',
+ updateInterval: 'yearly or less',
+ },
+ {
+ label: 'Chronic malnutrition',
+ description:
+ 'A form of growth failure which develops as a result of inadequate nutrition and/or repeated infections over long periods of time.',
+ readMoreLink: '#',
+ dataSource: 'Joint Malnutrition Estimates – UNICEF, WHO, World Bank',
+ updateInterval: 'yearly or less',
+ },
+];
+
+const marketsTable: DataSourceTableData = [
+ {
+ label: 'Import dependency',
+ description: (
+
+ Percentage of a country’s imported food for domestic supply versus its own food production for domestic supply.
+
+ IDR = Imports ÷ (local production + imports – exports) × 100%
+
+ ),
+ dataSource: 'WFP’s calculation based on USDA data',
+ updateInterval: 'daily',
+ },
+ {
+ label: 'Currency exchange',
+ description: 'Price of a unit of domestic currency in terms of USD.',
+ dataSource: 'Trading Economics',
+ updateInterval: 'yearly',
+ },
+ {
+ label: 'Balance of trade',
+ description:
+ 'The balance of trade is the value of exports of goods and services less imports of goods and services. ' +
+ 'It is usually the largest component of the current account.',
+ dataSource: 'Trading Economics',
+ updateInterval: 'monthly or less',
+ },
+ {
+ label: 'Food inflation',
+ description:
+ 'Year-on-year percentage change in the price of a standard basket of food as calculated from the national Consumer Price Index.',
+ dataSource: 'Trading Economics',
+ updateInterval: 'monthly',
+ },
+ {
+ label: 'Headline inflation',
+ description:
+ 'Year on year percentage change in the price of a standard basket of goods and services as calculated from the national Consumer Price Index.',
+ dataSource: 'Trading Economics',
+ updateInterval: 'monthly',
+ },
+];
+
+const seasonalTable: DataSourceTableData = [
+ {
+ label: 'Rainfall',
+ description:
+ 'The rainfall layer shows the cumulative rainfall in the previous month compared to the 20-year average.',
+ dataSource:
+ 'CHIRPS rainfall estimates, Climate Hazards Group, University of California at Santa Barbara; data processed by WFP VAM',
+ updateInterval: 'every 10 days',
+ },
+ {
+ label: 'Vegetation',
+ description:
+ 'Recent vegetation development compared to the average. Values between 90% and 110% are considered as being within the range of normal variability.',
+ dataSource:
+ 'MODIS platforms Terra and Aqua. MODIS NDVI CMG data product retrieved from Earthdata Search, courtesy of NASA ' +
+ 'EOSDIS Land Processes Distributed Active Archive Center (LP DAAC), USGS/Earth Resources Observation and ' +
+ 'Science (EROS) Center and Sioux Falls, South Dakota, USA.',
+ updateInterval: 'every 8 days',
+ },
+ {
+ label: 'River baisins',
+ description:
+ 'The river basins visualization provides rainfall data for the last 35+ years for five of the world’s major ' +
+ 'rivers (Limpopo, Nile, Orange, Shabelli-Juba, and Zambesi), allowing users to track whether the current ' +
+ 'basin-wide rainfall is within the normal range, or whether there is a risk of drought and lower river flows ' +
+ 'or flooding and high river flows.',
+ dataSource:
+ 'CHIRPS rainfall estimates, Climate Hazards Group, University of California at Santa Barbara; data processed by WFP-VAM',
+ updateInterval: 'every 5-10 days',
+ },
+ {
+ label: 'Headline inflation',
+ description:
+ 'Year on year percentage change in the price of a standard basket of goods and services as calculated from the national Consumer Price Index.',
+ dataSource: 'Trading Economics',
+ updateInterval: 'monthly',
+ },
+];
+
+const otherTable: DataSourceTableData = [
+ {
+ label: 'News feed',
+ description:
+ 'News articles retrieved from news sources all over the web. Topics include recent events or developments ' +
+ 'relating to hazards and conflict. The news feed is country-specific and serves to provide further context to ' +
+ 'the food security situation in a country.',
+ dataSource: 'NewsAPI',
+ dataSourceLink: 'https://newsapi.org',
+ updateInterval: 'live',
+ },
+];
+
+const dataSourceAccordionItems: AccordionItemProps[] = [
+ {
+ title: 'Context and Need',
+ content: ,
+ },
+ {
+ title: 'Food Security',
+ content: ,
+ },
+ {
+ title: 'Nutrition',
+ content: ,
+ },
+ {
+ title: 'Markets',
+ content: ,
+ },
+ {
+ title: 'Seasonal Information',
+ content: ,
+ },
+ {
+ title: 'Other',
+ content: ,
+ },
+];
+
+export default dataSourceAccordionItems;
diff --git a/src/domain/props/GroupedTableProps.ts b/src/domain/props/GroupedTableProps.ts
index 51244f6b..eeda9602 100644
--- a/src/domain/props/GroupedTableProps.ts
+++ b/src/domain/props/GroupedTableProps.ts
@@ -26,3 +26,13 @@ export default interface GroupedTableProps {
data: GroupedTableData;
ariaLabel?: string;
}
+
+export type DataSourceTableData = {
+ label: string;
+ description: ReactNode;
+ readMoreLink?: string;
+ dataSource: ReactNode;
+ dataSourceLink?: string;
+ updateInterval?: string;
+ updateDetails?: readonly { label: ReactNode; interval: string }[];
+}[];
diff --git a/src/operations/groupedTable/formatDataSourceTable.tsx b/src/operations/groupedTable/formatDataSourceTable.tsx
new file mode 100644
index 00000000..37e9acdc
--- /dev/null
+++ b/src/operations/groupedTable/formatDataSourceTable.tsx
@@ -0,0 +1,66 @@
+import { Chip } from '@nextui-org/chip';
+
+import StyledLink from '@/components/About/StyledLink';
+import { DataSourceTableData, GroupedTableData } from '@/domain/props/GroupedTableProps';
+
+function formatDataSourceTable(dataSources: DataSourceTableData) {
+ return dataSources.map(
+ ({ label, description, updateInterval, updateDetails, dataSource, dataSourceLink, readMoreLink }) => {
+ // remove leading http[s]:// and trailing slash
+ const linkDisplayText = dataSourceLink?.split('//')?.pop()?.replace(/\/$/, '');
+ return {
+ groupKey: label,
+ updateDetails,
+ groupName: (
+ <>
+
+ {label} {updateInterval && {updateInterval}}
+
+
+ {description}
+ {readMoreLink && (
+ <>
+ {' '}
+
+ Read more...
+
+ >
+ )}
+
+ {updateDetails && (
+
+ );
+}
diff --git a/src/app/data_sources/page.tsx b/src/app/data_sources/page.tsx
index 620d8318..42e0dbd6 100644
--- a/src/app/data_sources/page.tsx
+++ b/src/app/data_sources/page.tsx
@@ -7,24 +7,22 @@ import dataSourceAccordionItems from '@/domain/constant/dataSourceTables/dataSou
function Page() {
return (
-
-
-
Data Sources
-
-
- This section includes all indicators and data sources displayed on (global and
- country pages).
- {' '}
- Additional sources used as input variables for the predictive model but not for display purposes are listed on
- the{' '}
-
- About page
-
- .
-
-
-
-
+
+
Data Sources
+
+
+ This section includes all indicators and data sources displayed on (global and
+ country pages).
+ {' '}
+ Additional sources used as input variables for the predictive model but not for display purposes are listed on
+ the{' '}
+
+ About page
+
+ .
+
- More details are listed in the Data sources page. Additional sources used only for the model but not
- for display purposes are:
+ More details are listed in the{' '}
+
+ Data sources page
+
+ . Additional sources used only for the model but not for display purposes are: