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