Giter Club home page Giter Club logo

arbomap's Introduction

ArboMap

Web application for displaying Dengue (and eventually other arbovirus) indicators on choropleth maps, on desktop and mobile.

The application is built using Vue, Vuetify and Pinia, and is deployed to Github Pages here: https://mrc-ide.github.io/arbomap/

Development

Install dependencies: npm ci

Build: npm run build

Run in development mode, with hot reloading: npm run dev

Lint: npm run lint or npm run lint-fix

Run unit tests: npm run test:unit

Run e2e tests: npm run test:e2e

Data and Scripts

We work with two sets of data:

  • indicator values: these are provided by the researchers in the form of xlsx files, and can be found in the data/raw directory, with Adm1_ and Adm2_ prefixes. These provide indicator values (force of infection, seroprevalence at age 9, and age-stratified hospitalisations) for admin1 and admin2 regions, using GADM's region IDs.
  • geographical data defining the shape and locations of regions: we use GADM's geojson data, which has been simplified using MapShaper. This data can be found in public/dengue/may24/resources/geojson.

When the app runs, all data is loaded from public/dengue/may24/resources. Some of this data has been further processed from the datasets described above. The data files are:

  • countryNames.json: a handy mapping of country IDs to names, used for Excel download and country selection. Generated by the script generate_country_names_from_adm0_geojson.cjs using data in geojson/admin0.
  • geojson/all_adm1_0_5_pc_by_iso.json: a single json file containing simplified admin1 level geojson for all countries - this is in the form of a dictionary where the country IDs are the keys, and is generated by the script transform_adm1_geojson_to_dict.cjs using the file data/raw/all_adm1_0_5pc.json, which contains all features in the form of a single FeatureCollection. We load this when the app first loads, to display the global view with admin1 data from all countries.
  • geojson/admin0: country-level geojson, one file per country. We use these to draw an outline around the selected country,
  • geojson/admin1: admin1-level geojson, one file per country. We keep this only for the small set of countries which have no admin2 regions (countriesWithoutAdmin2 in config.json). This geojson is more detailed than the simplified regions defined in the all_adm1.. file. When one of these countries is selected we load and display from these files.
  • geojson/admin2: admin2-level geojson, one file per country. When a country is selected, we load and display from these files.
  • indicators/admin1: a single file containing all admin1 level indicator values. We load this when the app first loads, to display the global view. Generated from the xlsx file in data/raw by the script process-data.R
  • indicators/admin2: admin2-level indicator values, one file per country, loaded when the country is selected. Generated from the xlsx file in data/raw by the script process-data.R

We also pre-generate the global Excel files available to download through the app. These can be found in the excel sub-folder of the resources folder.

All public data is committed to github, and is not currently automatically updated using the scripts. So you need to remember to run scripts manually when required:

  • if indicator values have changed: run process-data.R
  • if admin1 geojson has changed: run transform_adm_geojson_to_dict.cjs
  • if there are any changes to the list of countries, or country names: run generate_country_names_from_adm0_geojson.cjs

Remember to copy resulting data from the data/processed folder to the relevant part of public/dengue/may24/resources.

  • After copying new indicator values to the resources folder, run npm run generate:global-excel to regenerate the global Excel files.

arbomap's People

Contributors

emmalrussell avatar m-kusumgar avatar david-mears-2 avatar richfitz avatar

Watchers

Lekan Anifowoshe avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.