viz4 = {
const totalsByJob = d3.rollup(jobsData,
v => d3.sum(v, d => d.count),
d => d.job
);
const top5Jobs = Array.from(totalsByJob, ([job, total]) => ({job, total}))
.sort((a, b) => b.total - a.total)
.slice(0, 5)
.map(d => d.job);
const chart = vl.markLine()
.width(600)
.height(300)
.data(jobsData)
.transform([
{
filter: `datum.job == '${top5Jobs[0]}' || datum.job == '${top5Jobs[1]}' || datum.job == '${top5Jobs[2]}' || datum.job == '${top5Jobs[3]}' || datum.job == '${top5Jobs[4]}'`
},
{
aggregate: [{
op: "sum",
field: "count",
as: "total"
}],
groupby: ["year", "job"]
}
])
.encode(
vl.x().fieldN("year").axis({
title: "Census Year",
labelAngle: -45
}).sort("ascending"),
vl.y().fieldQ("total").axis({
title: "Number of Workers",
format: "~s"
}),
vl.color().fieldN("job")
)
.title("Trends in Top 5 Most Common Jobs (1850-2000)");
return chart.render();
}