Dataviz at Office for National Statistics (UK)
chartData = {
let inputVars = [inputClassification, filterVariable].sort((a, b) =>
a.localeCompare(b)
);
const url = URL_PATTERN.replace(
"DIMENSIONS",
inputVars.join("-") + "-" + outputClassification
);
let rawData = await d3.json(url);
let result = [];
for (let obs of rawData.observations) {
if (obs.dims[filterVariable] != filterCategory) {
continue;
}
if (Object.values(obs.dims).includes("-8")) {
continue;
}
result.push({
cat1Name: allClassifications[inputClassification].categoryMap.get(
obs.dims[inputClassification]
),
cat2Name: allClassifications[outputClassification].categoryMap.get(
obs.dims[outputClassification]
),
value: obs.count
});
}
return result;
}
URL_PATTERN = "https://raw.githubusercontent.com/jtrim-ons/key-pop-data-for-marimekko/main/results/DIMENSIONS.json"
inputClassifications = FileAttachment("input-classifications.json").json()
outputClassifications = FileAttachment("output-classifications.json").json()
allClassifications = {
let result = await FileAttachment("all-classifications.json").json();
for (let v in result) {
result[v].categoryMap = new Map(
result[v].categories.map((d) => [d.id, d.label])
);
}
return result;
}
censusData = FileAttachment("census-data.json").json()
outputClassificationsDetails = FileAttachment(
"output-classification-details-dict.json"
).json()
import { Legend, Swatches } from "@d3/color-legend"
import { wrap } from "@jtrim-ons/svg-text-wrapping"
labelplacer = import("labelplacer@0.0.0")
leaderlines = import("leaderlines@0.0.1")
rectOpacity = 0.5
htl.html`
<style>
.legend-swatch {
width: 15px;
height: 15px;
margin-right: 0.5em;
flex-shrink: 0;
opacity: ${rectOpacity};
}
.legend-item {
font: 12px sans-serif;
display: flex;
align-items: center;
}
.legend {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
}
</style>
`
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.
