visualise = async container => {
const visualiser = await new Highcharts.Visualiser(
container,
options
).build();
container.replaceChildren(visualiser.element);
return visualiser;
}
data = Data.buildMeasureMap(WorkforceData.sizeByMonthForCalendarYear.months, [
{ id: "openingHeadcount" },
{
id: "startingHeadcount",
source: row => row.openingHeadcount + row.startingHires
},
{
id: "endingHeadcount",
source: row => row.closingHeadcount + row.endingTerminations
},
{ id: "closingHeadcount" },
{
id: "openingClosingHeadcount",
source: row => {
const decline = row.openingHeadcount < row.closingHeadcount;
return {
borderColor: decline ? "#66BB6A" : "#FFA726",
color: decline ? "#C8E6C9" : "#FFE0B2",
low: row.openingHeadcount,
high: row.closingHeadcount
};
}
},
{
id: "startingEndingHeadcount",
source: row => {
const decline =
row.openingHeadcount + row.startingHires <
row.closingHeadcount + row.endingTerminations;
return {
borderColor: decline ? "#66BB6A" : "#FFA726",
color: decline ? "#66BB6A" : "#FFA726",
low: row.openingHeadcount + row.startingHires,
high: row.closingHeadcount + row.endingTerminations
};
}
}
])
options = ({
chart: {
animation: false,
backgroundColor: "transparent",
reflow: false,
style: { fontSize: "1em" }
},
legend: {
itemHiddenStyle: { color: "#FFE0B2" },
itemStyle: { fontSize: "0.875em", fontWeight: "normal" },
symbolRadius: 0
},
plotOptions: {
columnrange: { grouping: false, shadow: false },
series: { animation: false }
},
series: [
{
borderColor: "#66BB6A",
color: "#C8E6C9",
data: data.openingClosingHeadcount,
name: "Period of Growth",
pointPadding: 0,
type: "columnrange"
},
{
borderColor: "#FFA726",
color: "#FFE0B2",
name: "Period of Decline",
type: "arearange"
},
{
borderWidth: 1,
data: data.startingEndingHeadcount,
pointPadding: 0.4,
showInLegend: false,
type: "columnrange"
}
],
title: {
style: { fontSize: "1.125em" },
text: `Headcount Ranges by Month for ${WorkforceData.sizeByMonthForCalendarYear.year}`
},
xAxis: [
{
categories: Data.monthAbbreviations,
labels: { style: { fontSize: "0.875em" } }
}
],
yAxis: [
{
labels: { format: "{value:,.0f}", style: { fontSize: "0.875em" } },
title: { text: "Headcount" }
}
]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
