static_dashboard.qmd

---
title: "r/biotechsalary"
format:
  dashboard:
    nav-buttons:
      - icon: plus-lg
        href: https://docs.google.com/forms/d/e/1FAIpQLSeXpPvkjdf8EPRU_cAdyMAUFVjgx67nyVgDxV7TNHeFkR2k9A/viewform
        aria-label: Add Your Salary
        text: Add Your Salary
      - icon: file-earmark-spreadsheet
        href: https://docs.google.com/spreadsheets/d/1G0FmJhkOME_sv66hWmhnZS5qR2KMTY7nzkxksv46bfk/edit#gid=491268892
        aria-label: Raw Data
        text: Raw Data
      - icon: reddit
        href: https://www.reddit.com/r/biotech/comments/125cy06/rbiotech_salary_and_company_survey/
        aria-label: Reddit
      - icon: github
        href: https://github.com/wvictor14/rbiotechsalary
        aria-label: GitHub
      - icon: house-fill
        href: https://victoryuan.com/
        aria-label: Homepage
    scrolling: false
    orientation: rows
    embed-resources: false
    theme: 
      - cosmo
      - custom.scss
editor: source
editor_options: 
  chunk_output_type: console
---


```{r setup_r}
#| echo: false
#| include: false
library(quarto)
library(here)
library(dplyr)
library(tidyr)
library(purrr)
library(forcats)
library(stringr)
library(ggplot2)
library(scales)
library(reactable)
library(gt)
library(gtExtras)
source(here::here('R', 'rb_clean_data.R'))
```

```{r data_prep}
#| echo: false
#| include: false


# load data for app
salaries_file <- here::here(
  'inst', 'extdata', 'salary_results_cleaned.csv'
)

if (!file.exists(salaries_file)) {
  message('Processed data not detected. Running processing script...')
  quarto::quarto_render(here::here('inst', 'extdata', 'clean_data.qmd'))
}

salaries <- readr::read_csv(salaries_file, show_col_types = FALSE) |> 
  rb_clean_data()
message('Processed data loaded')

# colors
.colors <- list(
  'primary' = '#41AB5DFF'
)

# pass to ojs
ojs_define(salaries_ojs = salaries)
```

# inputs {.toolbar}

```{ojs input_options}
//| output: false
job_titles_general = [...new Set(transpose(salaries_ojs).map(d => d.title_general))].sort()
location_country = [...new Set(transpose(salaries_ojs).map(d => d.location_country))].sort()
```

```{ojs inputs}
//viewof salary_min = Inputs.range(
//  [0, 950000], 
//  {value: 0, step: 5000, label: "Salary (min):"}
//)

viewof select_job_title_general = Inputs.select(
  job_titles_general, 
  {label:"Job Title", value: 'Scientist'}
)

viewof select_location_country = Inputs.select(
  location_country, 
  {label:"Country", value: 'United States Of America'}
)
```

```{ojs filter_data}
//| output: false
// //salary_min < x.salary_total &&
filtered = transpose(salaries_ojs).filter(function(x) {
  return select_job_title_general.includes(x.title_general) &&
         select_location_country.includes(x.location_country)
         ;
})
```

# Salaries

## Row 1 {height="50%"}

### Column - Value boxes {width="20%"}

```{ojs}
//| component: valuebox
//| title: "Avg Salary"
//| icon: currency-dollar
//| color: light
parseFloat(d3.mean(filtered, d => d.salary_total/100).toFixed(0)*100)
```

```{ojs}
//| component: valuebox
//| title: "Number of respondents"
//| icon: person-lines-fill
//| color: light
filtered.length
```

```{ojs}
//| component: valuebox
//| title: "Avg years experience"
//| icon: stars
//| color: light
parseFloat(d3.mean(filtered, d => d.years_of_experience).toFixed(1))
```

### Column - sublocation {width=25%}

```{ojs}
//| output: false
wrangled = aq.from(filtered)
  .groupby("location_granular")
  .count()
  .slice(0, 20)
  .objects()
```

```{ojs}
//| title: "Location"
//| padding: 1px
Plot.plot({
  marginLeft: 160,
  //height: 300,
  style: {
    fontSize: 12
  }, 
  height: 250,
  y: {label: ""},
  x: {label: 'Number of Respondents'},
  marks: [
    Plot.axisY({
      tickSize: 0, // don’t draw ticks
      //dx: 150, // offset right
      //dy: -6 // offset up
    }),
    Plot.axisX({
      tickSize: 0
    }),
    Plot.gridX({
      tickSpacing: 25,
      strokeDasharray: "0.75,2", // dashed
      strokeOpacity: 1 // opaque
    }),
    Plot.barX(wrangled, {
      y: "location_granular",
      x: "count"
    }),
    Plot.text(wrangled, {
      y: "location_granular",
      x: "count",
      text: "count",
      dx: 8,
      sort: {y: "-x"}
    }),

  ]
})
```

### Column - histogram 

```{ojs}
//| title: "Salary Distribution"
//| padding: 4px
Plot.plot({
  style: {
    fontSize: 14
  }, 
  x: {label: 'Salary', insetLeft: 36}, // reserve space for inset labels
  y: {label: 'Number of Respondents'},
  height: 190,
  color: {legend: true},
  marks: [
  
    // grid marks
    Plot.gridY({
      tickSpacing: 40,
      strokeDasharray: "0.75,2", // dashed
      strokeOpacity: 1 // opaque
    }),
    
    // axis
    Plot.axisY({
      tickSpacing: 40,
      tickSize: 0, // don’t draw ticks
      dx: 38, // offset right
      dy: -6, // offset up
      lineAnchor: "bottom" // draw labels above grid lines
    }),
    Plot.axisX({
      ticks: 5,
      tickFormat: (d) => (`$${d/1000}K`) // dollar
    }),
    
    Plot.rectY(
      filtered, 
      Plot.binX(
        {y: "count"}, 
        {x: "salary_total", fill: 'highest_achieved_formal_education', tip: true, thresholds: 20}
      )
    ),
    
    // zero line
    Plot.ruleY([0]),
    
    Plot.dot(
      filtered, 
      Plot.stackY(
        Plot.binX(
          {y: "count"}, 
          {x: "salary_total", stroke: "red", r: 0}
        )
      )
    )
  ]
})
```

## Row 2 - table

```{ojs}
//| output: false
function sparkbar(max) {
  return x => htl.html`<div style="
    background: #32de84;
    width: ${100 * x / max}%;
    float: right;
    padding-right: 3px;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    justify-content: end;">${x.toLocaleString("en")}`
}
```

```{ojs table}
Inputs.table(filtered, {
  sort: "date", 
  reverse: true,
  layout: "auto",
  height: 250,
  
  //format table column names
  columns: [
    "years_of_experience",
    "salary_base",
    "bonus",
    "title_detail",
    "where_are_you_located",
    "company_or_institution_name",
    "date"
  ],
  
  header: {
    years_of_experience: "YOE",
    salary_base: "Salary",
    bonus: "Bonus",
    where_are_you_located: "Location",
    title_detail: "Job details",
    company_or_institution_name: "Company",
    date: 'date'
  },
  //adjust column width 
  width: {
    years_of_experience: "10%",
    date: "10%"
  },
  format: {
    salary_base: sparkbar(d3.max(filtered, d => d.salary_total))
  }
})
```