function primaryColors(levels) {
return d3.quantize(
d3.interpolateRgbBasis([
additionalGraphicsColors.Gelb,
graphicsColors.Orange
]),
levels
);
}
Public
Edited
May 21
Importers
1 star
hashCode = function(s) {
var hash = 0;
for (var i = 0; i < s.length; i++) {
var character = s.charCodeAt(i);
hash = ((hash<<5)-hash)+character;
hash = hash & hash; // Convert to 32bit integer
}
return hash;
}
hashCode(
"zuwachsrate-der-15--bis-19-jaehrigen-wohnbevoelkerung-im-kanton-zuerich-nach-region"
)
/*String.prototype.hashCode = function(){
var hash = 0;
for (var i = 0; i < this.length; i++) {
var character = this.charCodeAt(i);
hash = ((hash<<5)-hash)+character;
hash = hash & hash; // Convert to 32bit integer
}
return hash;
}*/
//This is used to generally define the api, if the productive api crashes, this allows to switch to the test api using "test.bista.zh.ch/basicapi/" as url
basicapi_orig = ({
url: "https://www.bista.zh.ch/basicapi/",
route: "zhweb/"
})
//This is used to generally define the api, if the productive api crashes, this allows to switch to the test api using "test.bista.zh.ch/basicapi/" as url
basicapi = new (function () {
this.url = "https://www.bista.zh.ch/basicapi/";
this.route = "zhweb/";
this.securedRoute = "secured/";
this.data = function (uri, refreshcache = false) {
return d3.json(
this.url + this.route + uri + "?refreshcache=" + refreshcache
);
};
this.securedData = function (uri, secret, refreshcache = false) {
return d3.json(
this.url +
this.securedRoute +
uri +
"?refreshcache=" +
refreshcache +
"&secret=" +
secret
);
};
})()
basicapi.data("p_entwicklung_der_lernenden_an_gymnasialen_mittelschulen")
function brightnessByColor(color) {
/**
* Calculate brightness value by RGB or HEX color.
* @param color (String) The color value in RGB or HEX (for example: #000000 || #000 || rgb(0,0,0) || rgba(0,0,0,0))
* @returns (Number) The brightness value (dark) 0 ... 255 (light)
*/
var color = "" + color,
isHEX = color.indexOf("#") == 0,
isRGB = color.indexOf("rgb") == 0;
if (isHEX) {
const hasFullSpec = color.length == 7;
var m = color.substr(1).match(hasFullSpec ? /(\S{2})/g : /(\S{1})/g);
if (m)
var r = parseInt(m[0] + (hasFullSpec ? "" : m[0]), 16),
g = parseInt(m[1] + (hasFullSpec ? "" : m[1]), 16),
b = parseInt(m[2] + (hasFullSpec ? "" : m[2]), 16);
}
if (isRGB) {
var m = color.match(/(\d+){3}/g);
if (m)
var r = m[0],
g = m[1],
b = m[2];
}
if (typeof r != "undefined") return (r * 299 + g * 587 + b * 114) / 1000;
}
function rotateX(svgcontainer, heightChart, classedAs) {
function delay(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
function rotateOneNode(node, svgcontainer, heightChart) {
let origLegendHeight = node.node().getBBox().height;
//Breite eines Zwischenstrichs bestimmen
//console.log("Stufe 1");
let tickwidth;
if (node.selectAll("g.tick").size() > 1) {
tickwidth =
//position of second tick
getTransformation(
d3.select(node.selectAll("g.tick")._groups[0][1]).attr("transform")
).translateX -
//position of first tick
getTransformation(
d3.select(node.selectAll("g.tick")._groups[0][0]).attr("transform")
).translateX;
} else {
tickwidth =
getTransformation(
d3.select(node.selectAll("g.tick")._groups[0][0]).attr("transform")
).translateX * 2;
}
//1. Schritt
//der Gesamte Text muss persistiert werden, damit beim wiederholten wrappen nicht Leerschläge verloren gehen.
node.selectAll("g.tick text").call(addStaticText);
//Zeilen umbrechen, wenn breiter als Zwischenstrich
node.selectAll("g.tick text").call(wrap, tickwidth);
//Maximale Breite und Höhe der Skalenbezeichner bestimmen
let maxwidth = 0;
let maxheight = 0;
node.selectAll("g.tick text").attr("transform", function (d) {
let coordx = this.getBBox().width;
if (maxwidth < coordx) {
maxwidth = coordx;
}
let coordy = this.getBBox().height;
if (maxheight < coordy) {
maxheight = coordy;
}
});
//2. Schritt
//Wenn immer noch zu breit dann rotieren
//console.log("Stufe 2");
if (maxwidth > tickwidth) {
node.selectAll("g.tick text").call(wrap, Math.min(150, maxwidth));
node.selectAll("g.tick text").style("text-anchor", "start");
node.selectAll("g.tick text").attr("transform", function (d) {
var moveleft = -this.getBBox().height / 2 - 8;
return "rotate(90), translate(10," + moveleft + ")";
});
}
}
delay(200).then(() => {
let xAxis;
//if no class is provided, the axis is selected using id = xAxis
if (typeof classedAs == "undefined") {
xAxis = svgcontainer.select("#xAxis");
let origLegendHeight = xAxis.node().getBBox().height;
rotateOneNode(xAxis, svgcontainer, heightChart);
//Höhe der Grafik den neuen Begebenheiten anpassen (height und viewBox)
let newlegendHeight = xAxis.node().getBBox().height;
let newHeightChart = heightChart + newlegendHeight - origLegendHeight;
//svgcontainer.attr("height", newHeightChart);
let viewBox = svgcontainer.attr("viewBox").split(",");
viewBox[3] = newHeightChart.toString();
svgcontainer.attr("viewBox", viewBox.join(","));
}
//if a class is provided, the class is used to select all xAxis'
else {
xAxis = svgcontainer.selectAll("." + classedAs);
let origLegendHeight = [];
let newLegendHeight = [];
xAxis.each(function (d, i) {
origLegendHeight.push(d3.select(this).node().getBBox().height);
rotateOneNode(d3.select(this), svgcontainer, heightChart);
newLegendHeight.push(d3.select(this).node().getBBox().height);
});
let newHeightChart =
heightChart + d3.max(newLegendHeight) - d3.max(origLegendHeight);
let viewBox = svgcontainer.attr("viewBox").split(",");
viewBox[3] = newHeightChart.toString();
svgcontainer.attr("viewBox", viewBox.join(","));
}
});
}
addStaticText = function (text) {
text.each(function () {
let text = d3.select(this);
text._groups[0][0].__staticText__ = text.text();
});
}
//function to wrap ab svg text element (with tspan) depending on a max width
wrap = function (text, width) {
text.each(function () {
let breakChars = ["&"],
text = d3.select(this),
textContent = text._groups[0][0].__staticText__, //text.text(), //text._groups[0][0].__data__,
spanContent;
if (typeof textContent == "string") {
breakChars.forEach(function (char) {
// Add a space after each break char for the function to use to determine line breaks
textContent = textContent.replace(char, char + " ");
});
var words = textContent.split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.2, // ems
x = text.attr("x") || 0,
y = text.attr("y") || 0,
dy = parseFloat(text.attr("dy") || 0),
tspan = text
.text(null)
.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", dy + "em");
while ((word = words.pop())) {
let manualbreak = false;
if (word.includes("<br>")) {
manualbreak = true;
word = word.replaceAll("<br>", " "); //remove line break html-tag;
}
line.push(word + " ");
tspan.text(line.join(" "));
if (
manualbreak || //manual line breaks using html-tag
tspan.node().getComputedTextLength() > width
) {
line.pop();
spanContent = line.join(" ");
breakChars.forEach(function (char) {
// Remove spaces trailing breakChars that were added above
spanContent = spanContent.replace(char + " ", char);
});
tspan.text(spanContent);
line = [word];
tspan = text
.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", ++lineNumber * lineHeight + dy + "em")
.text(word);
}
}
}
});
}
mouseOut = function (uid) {
d3.select("#mouseOverL").remove();
d3.select("#tooltip" + uid).remove();
}
graphicsColors = ({
Cyan: "#009EE0",
Blau: "#0070B4",
Dunkelblau: "#00407C",
Aquamarine: "#0FA693",
Türkis: "#00797B",
Dunkelgrün: "#00544C",
Orange: "#DC7700",
Rot: "#D93C1A",
Braun: "#96170F",
Magenta: "#D40053",
Bordeaux: "#B01657",
Dunkelrot: "#7A0049",
Hellviolett: "#9572D5",
Violett: "#7F3DA7",
Dunkelviolett: "#54268E",
Black100ZH: "#000000",
Black80ZH: "#333333",
Black60ZH: "#666666",
Black40ZH: "#949494",
Black20ZH: "#CCCCCC",
Black10ZH: "#F0F0F0",
Black5ZH: "#F7F7F7"
})
showColors(Object.values(graphicsColors))
additionalGraphicsColors = ({
Hellblau: "#7AB6E2",
Helltürkis: "#6BC9CB",
Hellorange: "#FFAE73",
Rosa: "#FF94BA",
Lila: "#B590F9",
Gelb: "#FFCC00",
Grün: "#1A7F1F",
Grasgrün: "#8A8C00"
})
showColors(Object.values(additionalGraphicsColors))
fixedCategorialColors = [
graphicsColors.Blau,
graphicsColors.Orange,
graphicsColors.Braun,
graphicsColors.Dunkelviolett,
graphicsColors.Aquamarine,
graphicsColors.Cyan,
graphicsColors.Dunkelgrün,
graphicsColors.Dunkelrot,
graphicsColors.Dunkelblau
]
showColors(fixedCategorialColors)
emergencyCategorialColors = [
graphicsColors.Magenta,
graphicsColors.Türkis,
graphicsColors.Rot,
graphicsColors.Hellviolett,
graphicsColors.Bordeaux
]
showColors(emergencyCategorialColors)
getColor("Anteil Geprüft// Kohorte")
getColorScale = function (columns, colors) {
if (typeof colors == "undefined") {
return d3
.scaleOrdinal()
.domain(columns)
.range(columns.map((d, i) => getColor(d, i)));
} else {
return d3
.scaleOrdinal()
.domain(columns)
.range(columns.map((d, i) => getColor(colors[i], i)));
}
}
colorTable(
Stufen,
Stufen.map((d) => getColor(d))
)
Stufen.map((d) => getColor(d))
primaryColors(3)
primaryColors(3)[1]
primaryColors(8)
function secondaryIColors(levels) {
return d3.quantize(
d3.interpolateRgbBasis([graphicsColors.Aquamarine, graphicsColors.Blau]),
levels
);
}
secondaryIColors(4)
function secondaryINiveauColors(levels) {
let colors = d3.quantize(
d3.interpolateRgbBasis([
graphicsColors.Aquamarine,
additionalGraphicsColors.Grün
]),
levels
);
colors.push(graphicsColors.Black60ZH);
return colors;
}
secondaryINiveauColors(4)
function secondaryIIColors(levels) {
return d3.quantize(
d3.interpolateRgbBasis([
additionalGraphicsColors.Grün,
graphicsColors.Dunkelgrün
]),
levels
);
}
secondaryIIColors(4)
function secondaryIIProfileColors(levels) {
let colors = d3.quantize(
d3.interpolateRgbBasis([
additionalGraphicsColors.Grün,
additionalGraphicsColors.Grasgrün,
graphicsColors.Dunkelgrün
]),
levels
);
colors.push(graphicsColors.Black60ZH);
return colors;
}
secondaryIIProfileColors(6)
colorTable(gender,genderColors)
function categorialColors(levels, other) {
let colors = d3.quantize(
d3.interpolateRgbBasis([
additionalGraphicsColors.Gelb,
additionalGraphicsColors.Grün,
graphicsColors.Türkis,
graphicsColors.Blau,
graphicsColors.Violett
]),
levels
);
if (other == true) {
colors.push(graphicsColors.Black60ZH);
}
return colors;
}
categorialColors(9, false)
showColors(categorialColors(8, true))
showColors(monochromeVioletExtZH)
showColors(divergingBrownVioletZH)
d3.scaleSequential(d3.interpolate(monochromeBlueZH)).domain([1,10])(1)
import { legend } from "@d3/color-legend"
import {ramp} from "@d3/sequential-scales"
ramp(d3.scaleSequential(d3.interpolateRgbBasis(monochromeBlueZH)).domain([1,100]))
$=require("jquery")
stylesheet = html`<link rel='stylesheet' href='https://www.web.statistik.zh.ch/bista/zhwebstyle.css'/>`
leuVersion = "0.14.3"
leuStyleSheet = html`<link rel="stylesheet" href="https://esm.sh/@statistikzh/leu@${leuVersion}/dist/theme.css?target=es2022">`
import { readingExample } from "@bildungsplanungzh/lesebeispiel-plugin"
import { fonts, importLeuFromCDN } from "@statistikzh/leu-general"
leuDropdown = {
import(`https://esm.sh/@statistikzh/leu@${leuVersion}/leu-dropdown.js`);
}
leuDialog = import(
`https://esm.sh/@statistikzh/leu@${leuVersion}/leu-dialog.js`
)
leuButton = import(
`https://esm.sh/@statistikzh/leu@${leuVersion}/leu-button.js`
)
leuRadio = {
importLeuFromCDN("leu-radio-group.js", leuVersion);
importLeuFromCDN("leu-radio.js", leuVersion);
importLeuFromCDN("leu-input.js", leuVersion);
}
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.
