diff --git a/README.md b/README.md index 54c6941..ab4ea8e 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ## Adding an item to the gallery -New items can be added to the [`items.yml`](items.yml) file after which they will automatically appear on the website gallery when it is next generated. +New items can be added to the [`gallery.yml`](items/gallery.yml) file after which they will automatically appear on the website gallery when it is next generated. Below is an example of an item entry: diff --git a/_quarto.yml b/_quarto.yml index 559eb79..1eb5430 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -7,14 +7,20 @@ website: navbar: background: light left: - - href: index.qmd + - href: gallery.qmd + icon: search text: Gallery + - href: software.qmd + icon: code-slash + text: Software execute: freeze: auto format: - html: - theme: cosmo + html: + theme: + - default + - styles.scss css: styles.css toc: true diff --git a/epicentre_qmd_style.scss b/epicentre_qmd_style.scss new file mode 100644 index 0000000..c74ae48 --- /dev/null +++ b/epicentre_qmd_style.scss @@ -0,0 +1,148 @@ +/*-- scss:defaults --*/ + +$col-primary: #2E4473; +$col-primary-light: #E4EDF3; +$col-secondary: #A1B8CF; +$col-secondary-bg: #F5F9FB; +$col-dark-grey: #C5C5C5; +$col-light-grey: #F8F8F8; +$col-red-prim : #C0392B; +$col-red-sec : #F9EBEA; +$col-yellow-prim : #FAB872; +$col-yellow-sec : #FEF6E7; + +/* Table of content */ + +$toc-color: $col-primary; +$toc-inactive-color: $col-light-grey; +$content-padding-top: 1px; + +/* titles font size and weight*/ +$h1-font-size: 30px; +$h1-font-weight: 400; + +$h2-font-size: 27px; +$h2-font-weight: 300; + +$h3-font-size: 25px; +$h3-font-weight: 300; + +$h4-font-size: 23px; +$h4-font-weight: 300; + +/* font-weights */ + +$weight-title: 600; + +$navbar-bg: $col-secondary-bg; + +/* inline code */ + +$code-bg: $col-primary-light; +$code-color: $col-primary; + +/* code block */ +$code-block-bg: $col-primary-light ; + +/*-- scss:rules --*/ + +h1, h2, h3 { + color: $col-primary; +} + +h1.title { + font-size: 50px; + font-weight: 600; + color: $col-primary; +} + +h1 { + font-weight: $h1-font-weight; +} + +h2 { + font-weight: $h2-font-weight; +} + +h3 { + font-weight: $h3-font-weight; +} + +h4{ + font-weight: $h4-font-weight; +} + +p.subtitle { + font-style: italic; + color: darken($col-dark-grey, 50%); +} + +/* BLOCKQUOTE */ +.blockquote { + font-size: 1em; + color: $col-primary; + border-left-color: $col-primary; +} + +/* Inline code */ +code { + border-radius: 5px; + +} + +/* Inline code */ +.quarto-title-block .quarto-title-banner { + background-image: url(assets/img/logo_epicentre.png); + background-size: 250px; + background-position: left; + background-repeat: no-repeat; + padding-left: 50px; + padding-right: 50px; + background-origin: content-box; +} + +/* Customize code block and output */ +.code { + + border-radius: 1px; +} + +/* call outs style */ + +div.callout-note.callout{ + border-left-color: $col-primary; + background-color: $col-secondary-bg; + border-radius: 10px; +} + +div.callout-caution.callout{ + border-left-color: $col-yellow-prim; + background-color: $col-yellow-sec; + border-radius: 10px; +} + +div.callout-important.callout{ + border-left-color: $col-red-prim; + background-color: $col-red-sec; + border-radius: 10px; +} + +/* TOC styling */ + +h2#toc-title{ + font-weight: 700; +} + +.nav-link { + border-left-color: $col-primary ; + border-left-width: thick; + border-radius: 3px; +} + +.nav-link:hover, .nav-link:focus, .nav-link.active { + color: $col-primary; + background-color: $col-secondary-bg; + font-weight: 700; +} + + diff --git a/gallery.Rproj b/gallery.Rproj index 7bdb19d..c8daeb9 100644 --- a/gallery.Rproj +++ b/gallery.Rproj @@ -5,9 +5,13 @@ SaveWorkspace: No AlwaysSaveHistory: Default EnableCodeIndexing: Yes +UseSpacesForTab: Yes +NumSpacesForTab: 2 Encoding: UTF-8 +RnwWeave: Sweave +LaTeX: pdfLaTeX + AutoAppendNewline: Yes StripTrailingWhitespace: Yes LineEndingConversion: Posix - diff --git a/gallery.qmd b/gallery.qmd new file mode 100644 index 0000000..a345c74 --- /dev/null +++ b/gallery.qmd @@ -0,0 +1,35 @@ +--- +page-layout: full +toc: false +listing: + id: gallery + template: epi-grid.ejs + contents: items/gallery.yml + categories: true + page-size: 1000 + sort: + - "status" + - "date-modified desc" + sort-ui: [title, date-created, date-modified] + filter-ui: true + field-required: [title, href, status, access, author, date-created, date-modified] + field-types: + date-created: date + date-modified: date + field-display-names: + status: "Status" + access: "Access" + date-created: "Published" + date-modified: "Updated" +--- + +## Data Visualisation Gallery + +Below is our collection of our interactive dashboards, reports and tools. Use the search bar and categories menu to filter to your areas of interest. + +Items labelled as [INTERNAL]{.tag .status-internal} will require a login. If you are a member of the MSF network and have an msf.org email address you can [create an account to access our dashboards on our sign-up page](https://reports.msf.net/signup/){target="_blank"}. Note that some dashboards are limited to specific OCs, individual personel or project partners, so not all content will be accessible with your account. + +--- + +::: {#gallery} +::: diff --git a/index.qmd b/index.qmd index 1fa3083..796a493 100644 --- a/index.qmd +++ b/index.qmd @@ -1,37 +1,22 @@ --- -page-layout: full -toc: false -listing: - id: gallery - template: epi-grid.ejs - contents: items.yml - categories: true - page-size: 1000 - sort: - - "status" - - "date-modified desc" - sort-ui: [title, date-created, date-modified] - filter-ui: true - field-required: [title, href, status, access, author, date-created, date-modified] - field-types: - date-created: date - date-modified: date - field-display-names: - status: "Status" - access: "Access" - date-created: "Published" - date-modified: "Updated" +title: "Data Science Team" +about: + template: jolla + image: assets/img/logo_epicentre.png + image-shape: rectangle + image-width: 600px + links: + - icon: twitter + text: twitter + href: https://twitter.com/@Epicentre_MSF + - icon: github + text: Github + href: https://github.com/epicentre-msf + - icon: website + text: Website + href: https://epicentre.msf.org/ --- -## Data Visualisation Gallery +From outbreaks to clinical trials, Epicentre's data science team (Epi DS) leverages its expertise in epidemiology, statistical analysis, GIS, programming and data visualisation to drive actionable insight from public health data. -From outbreaks to clinical trials, Epicentre's data science team (Epi DS) leverages its expertise in epidemiology, statistical analysis, programming and data visualisation to drive actionable insight from public health data. - -Below is our collection of our interactive dashboards and reports. Use the search bar and categories menu to filter to your areas of interest. - -Items labelled as [INTERNAL]{.tag .status-internal} will require a login. If you are a member of the MSF network and have an msf.org email address you can [create an account to access our dashboards on our sign-up page](https://reports.msf.net/signup/){target="_blank"}. Note that some dashboards are limited to specific OCs, individual personel or project partners, so not all content will be accessible with your account. - ---- - -::: {#gallery} -::: \ No newline at end of file +Explore our collection of web-apps, tools, interactive dashboards and reports on our [gallery page](/gallery.html), and our open-source software repository on our [software page](/software.html). diff --git a/items.yml b/items/gallery.yml similarity index 100% rename from items.yml rename to items/gallery.yml index fd62dc9..e4b6ce7 100644 --- a/items.yml +++ b/items/gallery.yml @@ -230,19 +230,6 @@ categories: - study - lassa -- title: ENABLE Interim Analysis - description: Report summarising the interim analysis for the Enable Lassa study - href: https://enable.epicentre-msf.org/app/lasv-interim-analysis - repo: https://github.com/epicentre-msf/enable-final-analysis - access: internal - status: active - author: Epi DS - image: assets/img/enable.png - date-created: '2022-06-26' - date-modified: '2023-11-15' - categories: - - study - - lassa - title: ENABLE ELISA Analysis description: Tool to measure IgG concentration in blood serum using an indirect ELISA @@ -285,20 +272,6 @@ categories: - surveillance - covid19 -- id: covid19-additional-analysis - title: MSF COVID-19 Additional Analysis - description: Supplementary graphics and tables - href: https://reports.msf.net/secure/app/covid19-additional-analysis - repo: https://github.com/epicentre-msf/covid19-episitrep-overall - access: internal - status: archived - author: Epi DS - image: assets/img/covid19-linelist-dashboard.png - date-created: '2020-06-07' - date-modified: '2022-04-01' - categories: - - surveillance - - covid19 - id: covid19-modelling-tool title: COVID-19 Modelling Tool description: Estimate the demand for hospitalization and operational resources for COVID patients in locations of your choice @@ -401,21 +374,6 @@ date-modified: '2023-10-01' categories: - hr -- id: drc-eb-001-en - title: DRC-EB-001 (Tujiokowe) Daily Situation Report (EN) - description: Daily data from the J&J vaccine trial in Kivu, DRC - href: https://reports.msf.net/secure/app/drc-eb-001-en - repo: https://github.com/epicentre-msf/tujiokowe - access: internal - status: archived - author: Epi DS - image: assets/img/drc-eb-001.png - date-created: '2019-12-01' - date-modified: '2019-12-01' - categories: - - trial - - ebola - - drc - id: drc-eb-001-fr title: DRC-EB-001 (Tujiokowe) Rapport de Situation Quotidien (FR) description: Daily data from the J&J vaccine trial in Kivu, DRC @@ -477,3 +435,45 @@ - trial - ebola - uganda +- title: ENABLE Interim Analysis + description: Report summarising the interim analysis for the Enable Lassa study + href: https://enable.epicentre-msf.org/app/lasv-interim-analysis + repo: https://github.com/epicentre-msf/enable-final-analysis + access: internal + status: active + author: Epi DS + image: assets/img/enable.png + date-created: '2022-06-26' + date-modified: '2023-11-15' + categories: + - study + - lassa +- id: covid19-additional-analysis + title: MSF COVID-19 Additional Analysis + description: Supplementary graphics and tables + href: https://reports.msf.net/secure/app/covid19-additional-analysis + repo: https://github.com/epicentre-msf/covid19-episitrep-overall + access: internal + status: archived + author: Epi DS + image: assets/img/covid19-linelist-dashboard.png + date-created: '2020-06-07' + date-modified: '2022-04-01' + categories: + - surveillance + - covid19 +- id: drc-eb-001-en + title: DRC-EB-001 (Tujiokowe) Daily Situation Report (EN) + description: Daily data from the J&J vaccine trial in Kivu, DRC + href: https://reports.msf.net/secure/app/drc-eb-001-en + repo: https://github.com/epicentre-msf/tujiokowe + access: internal + status: archived + author: Epi DS + image: assets/img/drc-eb-001.png + date-created: '2019-12-01' + date-modified: '2019-12-01' + categories: + - trial + - ebola + - drc diff --git a/items/software.yml b/items/software.yml new file mode 100644 index 0000000..fa380fd --- /dev/null +++ b/items/software.yml @@ -0,0 +1,103 @@ +- title: Outbreak Tools + description: Quickly build a linelist from an excel designer. + href: https://github.com/epicentre-msf/outbreak-tools + repo: https://github.com/epicentre-msf/outbreak-tools + status: active + author: Epi DS + image: assets/img/logo_epicentre.png + categories: + - data collection + - excel +- title: epishiny + description: Tools for interactive visualisation of epidemiological data + href: https://epicentre-msf.github.io/epishiny/ + repo: https://github.com/epicentre-msf/epishiny + status: active + author: P. Campbell + image: assets/img/logo_epicentre.png + categories: + - data visualisation + - shiny + - R +- title: epivis + description: Tools for visualising epidemiological data + href: https://epicentre-msf.github.io/epivis/ + repo: https://github.com/epicentre-msf/epivis + status: active + author: Epi DS + image: assets/img/logo_epicentre.png + categories: + - data visualisation + - ggplot + - R +- title: hmatch + description: Tools for cleaning and matching hierarchically-structured data + href: https://epicentre-msf.github.io/hmatch/ + repo: https://github.com/epicentre-msf/hmatch + status: active + author: P. Barks + image: assets/img/logo_epicentre.png + categories: + - data manipulation + - R +- title: nmatch + description: Fuzzy matching for proper names + href: https://epicentre-msf.github.io/nmatch/ + repo: https://github.com/epicentre-msf/nmatch + status: active + updated: daily + author: P. Barks + image: assets/img/logo_epicentre.png + categories: + - data manipulation + - R +- title: dbc + description: Dictionnary based cleaning + href: https://epicentre-msf.github.io/dbc/ + repo: https://github.com/epicentre-msf/dbc + status: active + author: P. Barks + image: assets/img/logo_epicentre.png + categories: + - data manipulation + - R +- title: qxl + description: Write quick, customized .xlsx files + href: https://epicentre-msf.github.io/qxl/ + repo: https://github.com/epicentre-msf/qxl + status: active + author: P. Barks + image: assets/img/logo_epicentre.png + categories: + - excel + - R +- title: rpxl + description: Read password-protected Excel files + href: https://epicentre-msf.github.io/rpxl/ + repo: https://github.com/epicentre-msf/rpxl + status: active + author: P. Barks + image: assets/img/logo_epicentre.png + categories: + - excel + - R +- title: redcap + description: R utilities for interacting with Redcap + href: https://epicentre-msf.github.io/redcap/ + repo: https://github.com/epicentre-msf/redcap + status: active + author: P. Barks + image: assets/img/logo_epicentre.png + categories: + - redcap + - R +- title: queryr + description: Data validation queries with tidy, stackable output + href: https://epicentre-msf.github.io/queryr/ + repo: https://github.com/epicentre-msf/queryr + status: active + author: P. Barks + image: assets/img/logo_epicentre.png + categories: + - data queries + - R diff --git a/pkg-grid.ejs b/pkg-grid.ejs new file mode 100644 index 0000000..4f9e427 --- /dev/null +++ b/pkg-grid.ejs @@ -0,0 +1,67 @@ +```{=html} + +<% +// Number of columns +const cols = 3; + +// Card alignment +const align = "left"; + +// Cap Options +const imgHeight = "100%"; +%> + +
+<% for (const item of items) { %> +
> +
+ +
+ + <%= item.title %> + +
+ + +
+ <% if (item.image) { %> + <%= item.title %> + <% } else { %> + <%= item.title %> + <% } %> +
+ + +
+ + <% if(item.categories) { %> +
+ <% for (const cat of item.categories) { %> +
+ + <%= cat %> + +
+ <% } %> +
+ <% } %> + + <% if (item.description) { %> +
<%= item.description %>
+ <% } %> +
+ +
+
+ <% if ('author') { %>
<%= item.author %>
<% } %> +
+
+ +
+
+<% } %> +
+ +``` \ No newline at end of file diff --git a/software.qmd b/software.qmd new file mode 100644 index 0000000..a1c4639 --- /dev/null +++ b/software.qmd @@ -0,0 +1,14 @@ +--- +page-layout: full +toc: false +listing: + id: gallery + template: pkg-grid.ejs + contents: items/software.yml + categories: true + page-size: 1000 + filter-ui: true + field-required: [title, href, author] + field-display-names: + status: "Status" +--- diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..0276216 --- /dev/null +++ b/styles.scss @@ -0,0 +1,23 @@ +/*-- scss:defaults --*/ + +// +// Color system +// + +$blue: #2E569E !default; +$orange: #D37331 !default; +$green: #94BA3B !default; + +$primary: $blue !default; +$success: $green !default; +$warning: $orange !default; + +// Variables + +$web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" !default; + +@if $web-font-path { + @import url($web-font-path); +} + +$font-family-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;