r/biotechsalary

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()

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'}
)

// //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)
         ;
})

Avg Salary

parseFloat(d3.mean(filtered, d => d.salary_total/100).toFixed(0)*100)

Number of respondents

filtered.length

Avg years experience

parseFloat(d3.mean(filtered, d => d.years_of_experience).toFixed(1))

Plot.plot({
  style: {
    fontSize: 14
  }, 
  marginTop: 40, // so axisY title doesn't cover axis
  marginLeft: 0, // don’t need left-margin since labels are inset
  x: {label: 'Salary', insetLeft: 36}, // reserve space for inset labels
  y: {label: 'Number of Respondents'},
  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", 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}
    )))
  ]
})

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")}`
}

Inputs.table(filtered, {
  sort: "date", 
  reverse: true,
  layout: "auto",
  
  //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))
  }
})