Public
Edited
Aug 11, 2024
Importers
chart = {
/*
const color = d3.scaleOrdinal(
dataAggrAll.objects().map((d) => d.Område),
d3.schemeTableau10
);
*/
let leaves = root.leaves();
leaves.forEach((d) => {
d.midx = (d.x1 - d.x0) / 2;
d.midy = (d.y1 - d.y0) / 2;
d.w = d.x1 - d.x0;
d.h = d.y1 - d.y0;
d.hratio = d.h / d.w;
d.rotate = d.hratio > 1.5;
let title = getHeader(null, d.data.data.key);
let titleLenght = title.length;
console.log("Title", title, titleLenght);
let textlength = d.rotate ? d.h : d.w;
d.size = "s";
if (textlength > 300) {
d.size = "l";
} else if (textlength > 200 && titleLenght < 15) {
d.size = "l";
} else if (textlength > 200) {
d.size = "m";
} else if (textlength > 100 && titleLenght < 15) {
d.size = "m";
} else if (textlength > 100) {
d.size = "s";
} else if (textlength > 50) {
d.size = "s";
} else {
d.size = "xs";
}
});
//return leaves;
// Create the SVG container.
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto; font: 13px sans-serif;");
// Add a cell for each leaf of the hierarchy.
const leaf = svg
.selectAll("g")
.data(leaves)
.join("g")
.attr("transform", (d) => `translate(${d.x0},${d.y0})`);
// Append a tooltip.
const format = d3.format(",d");
leaf.append("title").text((d) => d.data.title);
// Append a color rectangle.
leaf
.append("rect")
.attr("id", (d) => (d.leafUid = DOM.uid("leaf")).id)
.attr("fill", (d) => color(d.data.data.Område))
.attr("fill-opacity", 0.6)
.attr("width", (d) => d.x1 - d.x0)
.attr("height", (d) => d.y1 - d.y0);
// Append a clipPath to ensure text does not overflow.
leaf
.append("clipPath")
.attr("id", (d) => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", (d) => d.leafUid.href);
// Append multiline text. The last line shows the value and has a specific formatting.
let tsizes = {
l: 28,
m: 18,
s: 10,
xs: 6
};
let ttsizes = {
l: 16,
m: 13,
s: 10,
xs: 6
};
const calcSizeMinus = (textlength) => {
//return textlength;
return 0;
return Math.max(0, Math.floor(textlength - 8 / 2));
};
leaf
.append("text")
//.attr("clip-path", (d) => d.clipUid)
.attr(
"font-size",
(d) => tsizes[d.size] - calcSizeMinus(d.data.data.title.length)
)
.attr("x", (d) => d.midx)
.attr("y", (d) => d.midy)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("opacity", 0.8)
.attr("transform", (d) =>
d.rotate ? `rotate(90, ${d.midx}, ${d.midy})` : ""
)
.text(
(d) => `${d.data.data.title}`
/*+ "[" +
d.size +
", " +
d.data.data.title.length +
"]"*/
);
/*
leaf
.append("text")
.attr("clip-path", (d) => d.clipUid)
.attr("x", 3)
.attr("y", 32)
.attr("opacity", (d) => (d.data.data.Område !== d.data.data.Type ? 1 : 0))
.attr("font-size", 9)
.attr("font-weight", "thin")
.text((d) => d.data.data.Område);
*/
leaf
.append("text")
.attr("clip-path", (d) => d.clipUid)
.attr("x", (d) => d.w - 4)
.attr("y", (d) => d.h - 4)
.attr("font-size", (d) => ttsizes[d.size])
.attr("opacity", 0.4)
.attr("text-anchor", "end")
.text((d) => d.data.data.value.toLocaleString("no-NO"));
return svg.node();
}
color = d3.scaleOrdinal(
dataAggrAll_for_colors.objects().map((d) => d.Område),
d3.schemeTableau10
)
height = 1000
root.leaves()
root = d3
.treemap()
.tile(tile) // e.g., d3.treemapSquarify
.size([width, height])
.padding(1)
.round(true)(
d3
.hierarchy(dataStratified)
.sum((d) => d.data.value)
.sort((a, b) => b.data.value - a.data.value)
)
dataStratified = d3
.stratify()
.id((d) => d.id)
.parentId((d) => d.parent)(combinedData)
Inputs.table(combinedData)
combinedData = {
let root = { Område: "root", level: 0, id: "root", value: null };
let topData = dataAggrAll.objects().map((d) => ({
...d,
id: d.Område,
title: d.Område,
parent: "root",
level: 1
}));
let data = dataAggr.objects().map((d) => ({
...d,
id: "2>" + d.Type,
key: d.Type,
title: getHeader(d.Område, d.Type),
value: d["Planlagte studieplasser.2024"],
parent: d.Område,
level: 2
}));
return [root, ...topData, ...data];
}
getHeader = (omr, text) => {
if (!navneoppslagMap.has(text)) {
console.log("MISSING", text, navneoppslagMap);
return "> " + text;
}
return navneoppslagMap.get(text);
let s = text.split(" - ");
let txt = text;
if (s.length > 1) {
txt = s[1];
}
let result = txt.toLowerCase().trim();
return result.charAt(0).toUpperCase() + result.slice(1);
}
data
Type Table, then Shift-Enter. Ctrl-space for more options.
dataAggr_KUN_UH = data.groupby("Område", "Type").rollup({
"Planlagte studieplasser.2024": aq.op.sum("Planlagte studieplasser.2024")
})
dataAggrAll_for_colors = data
.concat(dataFagskoler)
.groupby("Område", "Type")
.rollup({
"Planlagte studieplasser.2024": aq.op.sum("Planlagte studieplasser.2024")
})
dataAggr = data
.concat(dataFagskoler)
.groupby("Område", "Type")
.rollup({
"Planlagte studieplasser.2024": aq.op.sum("Planlagte studieplasser.2024")
})
dataAggrAll = data
.concat(dataFagskoler)
.groupby("Område")
.rollup({
"Planlagte studieplasser.2024": aq.op.sum("Planlagte studieplasser.2024")
})
dataAggrFagskoler = dataFagskoler.groupby("Område", "Type").rollup({
"Planlagte studieplasser.2024": aq.op.sum("Planlagte studieplasser.2024")
})
dataAggrFagskolerAll = dataFagskoler.groupby("Område").rollup({
"Planlagte studieplasser.2024": aq.op.sum("Planlagte studieplasser.2024")
})
aq.addFunction("omrade", (input) => {
if (input === "LANDOGHAVBRUK") {
return "LANDBRUK";
} else if (!input.includes(" - ")) {
return input;
}
let splitted = input.split(" - ");
return splitted[0];
})
_.uniq(dataFagskoler.objects().map((d) => d.Lærested))
dataFagskoler
Type Table, then Shift-Enter. Ctrl-space for more options.
dataRaw = workbook.sheet(0, {
headers: false
// range: "A1:J10"
})
workbook.sheetNames
workbook = FileAttachment("opptakstall-til-universitet-og-hogskole-hoveopptak-2024.xlsx").xlsx()
workbookFagskoler = FileAttachment(
"Hovedopptakstall fordelt på studier til fagskoler.xlsx"
).xlsx()
workbookFagskoler.sheetNames
dataRawFagskoler = {
let temp = workbookFagskoler.sheet(0, {
headers: false
// range: "A1:J10"
});
temp.forEach((item) => {
if (item.E === "LAND- OG HAVBRUK") {
item.E = "LANDOGHAVBRUK";
}
});
return temp;
}
dataRawFagskoler
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
