CovInce is an an application built in React for visualising numbers and proportions of lineages for cases of SARS-CoV2. It is currently used primarily for the spatiotemporal displays at https://covid19.sanger.ac.uk/ and https://covglobe.org/.

If you would like to deploy your own version of covince and need assistance please raise an issue and we will try to help.

Demo of the code in this repository (with old static data): http://covince.vercel.app

• area_search_terms (optional) enable additional search terms for areas
• chart [object]
  • definitions [array] list of chart definitions
  • settings [object] (optional)
• chart_tooltip [object] [DEPRECATED - use chart.settings.tooltip]
  • use_nomenclature [boolean] defaults to true
• charts [array] list of chart definitions [DEPRECATED - use chart.definitions]
• colors [object|array] (optional, static builds only) lineages mapped to color definitions, or a list of ordered colors. Optionally provide dark mode alternatives in the format { "light": "...", "dark": "..." }
• datetime_format [string] for e.g. data updated date reference
• dynamic_mode [object] (required for dynamic builds)
  • initial_lineages [array|object] list of lineages, or an object mapping lineages to a numerical index in the colour palette. Numbers must be 0-8 for the built-in palette.
  • colour_palette [array] (optional) list of color definitions or ordered colours. Optionally provide dark mode alternatives in the format { "light": "...", "dark": "..." }
  • mutations ['single'|'multi'] (optional) enable mutation features, and whether multiple mutations can be selected
• map [object]
  • fade_uncertainty [{[parameter_id]: boolean}] (optional) enable fade uncertainty for specific parameters
  • settings [object] (optional)
  • viewport [object]
• nomenclature [array] (optional) list of nomenclature definitions, the order will be reflected on the UI
• ontology [object]
• parameters [array] list of parameter definitions
• timeline [object] (optional)

• url [string] should load a JSON file with the following structure: { "search_term": "area_id", ... }
• mode [string] type of search to apply to additional terms:
  • padded-first-input-token pads the term to the length of the input and matches against the first token of the input padded to the original length

• csv_download [boolean] (optional) defaults to true
• tooltip [object] (optional)
  • use_nomenclature [boolean] defaults to true
• group_stacked_colors [boolean] (optional) reorder stacked areas to group colours together, defaults to true

• allow_stack [boolean] (optional) enables stacking
• default_type ['line'|'area']
• heading [string]
• parameter [string] should match a parameter id
• preset ['percentage'] (optional) applies formatting rules [DEPRECATED - use parameter.format]
• y_axis [object] (optional)

• domain [number[]] (optional) reference
• ticks [string[]] (optional) reference
• reference_line [number] (optional) display a dotted line at the specified value
• allow_data_overflow [boolean] (optional) reference

• default_lineage [string] (optional) should match a lineage in lists, defaults to first lineage
• default_color_by [string] (optional) should match a parameter id, defaults to first parameter
• default_color_scale ['linear'|'quadratic'|{[parameter_id]: 'linear'|'quadratic'}] (optional) can be a string for all parameters, or an object for specific parameters. Omit parameters from the object to hide the scale control.
• color_map_domain [{[parameter_id]: object}] (optional) set the range of the colour map per parameter. Object should provide at least one of:
  • min [number] (optional) minimum value of the color map
  • max [number] (optional) maximum value of the color map

• min_zoom [number] reference
• default_lat [number] reference
• default_lon [number] reference
• default_zoom [number|object] reference provide a number for all screen types, or an object with properties: mobile, desktop, big
• default_zoom_mob [number] Mobile option where proportions are different reference [DEPRECATED - use default_zoom.mobile]
• bounds [object]
  • min_longitude [number] reference
  • max_longitude [number] reference
  • min_latitude [number] reference
  • max_latitude [number] reference

• lineage [string] should match a lineage in lists
• alt_name [string] alternative name

• overview [object]
  • category [string] e.g. "National Overview"
  • heading [string] e.g. "England"
  • short_heading [string] e.g. "National"
• area [object]
  • category [string] e.g. "Local authority"
  • noun_plural [string] e.g. "local authorities"

• id [string]
• display [string]
• format ['percentage'] (optional) values should be 0-1 and are formatted as percentages
• precision [number|object] (optional) decimal places for values, can a number for all values or an object with the following required keys:
  • mean [number]
  • range [number]

• label [string] (optional) e.g. "timeline",
• initial_date [string] (optional) should be in ISO format e.g. "2021-01-01", defaults to latest date
• date_format [string|object] (optional) can be a string for all dates or an object with the following required keys:
  • heading [string] reference
  • chart_tooltip [string] reference
• frame_length [number] (optional) time in milliseconds per date when playing the timeline. Defaults to 100.

yarn install

yarn dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Richard Goater 💻

Theo Sanderson 💻

Harald Vöhringer 💻