Dataviz at Office for National Statistics (UK)
Plot.plot({
width: width,
height: '600',
marginBottom: '60',
x: {
domain: [...variableCategories],
tickRotate: 35,
label: null,
},
y: {
grid: true,
percent: true,
},
marks: [
Plot.barY(data, Plot.stackY({
x: variablesByName.get(variable),
y: "value",
fill: variablesByName.get(secondaryVariable),
title: variablesByName.get(secondaryVariable),
offset: "expand"
})),
Plot.ruleY([0])
]
})
data = tidyData(JSONstat(jsonStatData).toTable())
jsonStatData = toJsonStat(d)
tidyData = function(dataTable) {
let fields = [...dataTable[0]];
fields[fields.length - 1] = "value";
let result = [];
for (let i = 1; i < dataTable.length; i++) {
let tableRow = dataTable[i];
let outputRow = {};
tableRow.forEach((d, i) => (outputRow[fields[i]] = d));
result.push(outputRow);
}
return result;
}
toJsonStat = function (d) {
let result = {
version: "2.0",
class: "dataset",
id: d.dimensions.map((d) => d.variable.name),
size: d.dimensions.map((d) => d.count),
dimension: {},
value: d.values
};
d.dimensions.forEach((dim) => {
let res = {
label: dim.variable.label,
category: {
index: {},
label: {}
}
};
dim.categories.forEach((cat, i) => {
res.category.index[cat.code] = i;
res.category.label[cat.code] = cat.label;
});
result.dimension[dim.variable.name] = res;
});
return result;
}
d = {
const variableList =
variable == secondaryVariable ? [variable] : [variable, secondaryVariable];
const response = await queryCantabularGraphQL(ENDPOINT, QUERY, {
dataset: DATASET,
variables: variableList
});
return response.data.dataset.table;
}
JSONstat = (await import("https://cdn.skypack.dev/jsonstat-toolkit")).default
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.
