A simple visualisation using published FTS and IATI data on Covid-19.
Data is generated nightly by the OCHA-DAP/covid19-data repository.
# install dependencies $ npm i # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $ npm run build $ npm run start # generate static project $ npm run generate
For detailed explanation on how things work, checkout Nuxt.js docs.
$ npm run generate $ npm run deploy
Pushing to the
main branch will now automatically build and deploy the site to Github Pages, under the
gh-pages branch, using Github Actions.
Note that linting is enabled, and will automatically fix a number of issues in your code. However, sometimes this can feel a bit aggressive or annoying while you are working through something, so if you want to disable linting, you can comment out the 3 indicated lines in
You can manage linting rules in
.eslintrc.js. I disabled a few rules but you may have other preferences.
There are four "tabs" in the visualisation: Contributions; Activities; Flows; About. Each of these tabs is accessible from the top navigation bar. The navigation bar is found in
The Contributions tab contains data from UNOCHA's FTS, and displays components in the following order:
SummaryPanes/HRP.vue: a "thermometer" at the top (currently, showing the % of the COVID-19 HRP funded to date).
SummaryPanes/Controls/Contributions.vue: a set of controls for determining what information gets displayed both in the Summary pane and in the list of contributions.
SummaryPanes/Contributions.vue: a Summary pane containing a chart or table for the currently filtered information.
ActivityTable.vue: a table containing the list of contributions.
The Activities tab contains data from IATI, and displays components in the following order:
SummaryPanes/Controls/IATI.vue: a set of controls for determining what information gets displayed both in the Summary pane and in the list of activities.
SummaryPanes/IATI.vue: a Summary pane containing a chart or table for the currently filtered information.
ActivityTable.vue: a table containing the list of IATI activities.
The Flows tab contains data from IATI, and displays the following information (which could potentially be stored in separate components, but currently is just in the one file, because these elements are not re-used elsewhere).
- A summary table displaying commitments, disbursements and expenditure for all organisations in the selected organisation type.
- A Sankey chart (using the
Sankey.vuecomponent) for the selected organisation.
- A table containing the total disbursements and expenditures from the selected organisation to its implementing partners.
- A table containing incoming funds from the selected organisation's funders to this organisation.
The About tab contains a description and background of the visualisation. It describes data sources and provides some high-level technical details.
Tooltips can be used throughout the site to provide more information where required.
- Currently, they are only enabled in
- Tooltips should be saved as a CSV file, with a unique
keycolumn and a
tooltipcolumn. You might want to namespace the
keycolumn (e.g. prefix all existing tooltips with
- Tooltips are loaded when
activities.vueloads and stored in the Vuex store. This means they are available to all other parts of the visualisation through
this.$store.state.tooltips- for the example below, the value of this is assigned to the computed property
- You can add a tooltip wherever you want using something like the following code:
<b-badge v-b-tooltip.hover variant="secondary" pill :title="tooltips['theTooltipKey']"> ? </b-badge>
Tooltips are currently only loaded when
activities.vue is loaded. You could easily make them load for other tabs too by adding relevant functionality within the
loadData() method of each tab. Alternatively, you could consider moving this retrieval to the Vuex store and call it from within the nuxtServerInit action, though this is a bit fiddly.
To export content from Google Docs (e.g. for the About page), install the "Docs to Markdown" add on, then run the scripts/clean-markdown.py Python3 script on the output:
$ python3 clean-markdown.py < raw.md > pages/About.md