2b:null 2c:["$","title",null,{"children":"Indikator 3 | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T888,chart3a = vl .data(data3) .transform( vl .calculate( "indexof(['Positiv', 'Eher positiv', 'Eher negativ', 'Negativ'], datum.cat)" ) .as("stackOrder") ) .layer( vl .markBar({ cornerRadiusTopRight: 2, cornerRadiusBottomRight: 2, stroke: "white" }) .encode( vl .x() .sum("pct") .stack("normalize") .axis({ format: "%", tickCount: 3 }) .title("Anteil"), vl.y().fieldN("y").axis(null).title(null), vl .color({ scale: { domain: ["Positiv", "Eher positiv", "Eher negativ", "Negativ"], range: ["#00abae", "#0a7e80", "#004a4c", "#001b1b"] } }) .fieldO("bez") .title(null) .sort(["Positiv", "Eher positiv", "Eher negativ", "Negativ"]), vl.order("stackOrder") ), vl .markText({ align: "right", fill: "white", fontWeight: "bold", fontSize: 12, dy: 0, dx: -5 }) .encode( vl.x().sum("pct").stack("normalize").axis({ format: "%" }), vl.y().fieldN("y"), vl.text({ format: ".0%" }).fieldQ("pct"), vl.order("stackOrder") ) ) .width(plotWidth(1)) // specifying responsive width .height(175) .autosize({ resize: true, type: "fit" }) .config({ view: { stroke: null }, // facet: { spacing: 10, titleFontSize: 12 }, background: "#ffffff", // padding: 20, axis: { labelFontSize: 12, labelFont: ZHFonts.regular, labelColor: "black", titleFontSize: 14, titleColor: "black", titleFont: ZHFonts.regular }, legend: { orient: "top", labelFontSize: 12, labelFont: ZHFonts.regular, labelColor: "black", maxExtent: 180, columns: nCol_Legend, // responsive legend width rowPadding: 5, title: null }, title: { font: ZHFonts.black, fontSize: 16, offset: 15, anchor: "start", lineHeight: 1.5, subtitleFont: ZHFonts.regular, subtitleFontSize: 14 } }) .render()32:Tc69,chart3b = vl .layer( vl .markBar({ cornerRadiusTopLeft: 3, cornerRadiusTopRight: 3 }) .data(data3b) .transform( vl.calculate("split(datum.Personenkreis, ' ')").as("Split_Wert") ) .encode( vl .x() .field("Split_Wert") .sort(vl.min("id").order("ascending")) // .sort(["JI", "Kanton Zürich", "Stadt Zürich 2016", "Bund 2018"]) .axis({ labelFont: ZHFonts.black }), vl .y() .fieldQ("Geschlechtseffekt") .axis({ format: "%", tickCount: 3 }) .scale({ domain: [0, 0.06] }), vl .color() //{ condition: {test: "datum['Personenkreis'] === 'JI'", value: "#00797b"}, value: "#003134"} .field("id") .scale({ domain: [1, 2, 3, 4], range: ["#00abae", "#0a7e80", "#004a4c", "#001b1b"] }) .legend(null) ), vl .markText({ align: "center", fill: "black", fontWeight: "bold", fontSize: 12, dy: -15 }) .data(data3b) .transform( vl.calculate("split(datum.Personenkreis, ' ')").as("Split_Wert") ) .encode( vl.x().field("Split_Wert").sort(vl.min("id").order("ascending")), vl .y() .fieldQ("Geschlechtseffekt") .scale({ domain: [0, 0.06] }) .axis(null), vl.text().fieldN("Geschlechtseffekt").format(".1%") ), vl .markRule({ color: "#666666" }) .data({ values: [{}] }) .encode( vl .y({ datum: 0.05, type: "quantitative" }) .scale({ domain: [0, 0.06] }) .axis(null) ), vl .markText({ align: "center", baseline: "middle", fill: "black", font: ZHFonts.regular, fontWeight: "bold", fontSize: 12, dy: 15 }) .data({ values: { y: 0.05, label: "Toleranzschwelle (5%)" } }) .encode( vl .y() .field("y") .scale({ domain: [0, 0.06] }) .axis(null), vl.text().field("label") ) ) .width(plotWidth(1)) .height(250) .autosize({ resize: true, type: "fit" }) // .title({ // text: "Logib-Ergebnisse", // subtitle: // "Kanton Zürich auf Basis von Anstellungs- und Lohndaten, Dezember 2020" // }) .config({ view: { stroke: null }, scale: { bandPaddingInner: 0.2, bandPaddingOuter: 0.2, stroke: 2 }, background: "#ffffff", axis: { labelFontSize: 12, labelFont: ZHFonts.regular, labelColor: "black", titleFontSize: 12, titleColor: "black", titleFont: ZHFonts.regular }, axisX: { labelAngle: 0, labelPadding: 10, title: null, ticks: false }, axisY: { grid: true }, legend: { orient: "top", labelFontSize: 12, labelFont: ZHFonts.regular, labelColor: "black", labelLimit: 260 }, title: { font: ZHFonts.black, fontSize: 16, offset: 15, anchor: "start", lineHeight: 1.5, subtitleFont: ZHFonts.regular, subtitleFontSize: 14 } }) .render()33:T476,cssStyles = html` `34:Tfa3,// { // const dataF = data3 // .filter((d) => d.bez == "Negativ") // .sort(desc((d) => d.n_tot)); // const widthNow = d3.min([width, 768]); // const margin = { top: 30, right: 30, bottom: 30, left: 30 }; // const padding = 2; // const countPerLine = 10; // const widthPerChart = widthNow / 4; // const cubeWidth = (widthPerChart - margin.right) / 10 - padding; // console.log("cubeWidth: " + cubeWidth); // const height = // d3.max(dataF, (d) => (d.n_tot / 10) * (cubeWidth + 2)) + // margin.top + // margin.bottom; // mutable widthNow = widthNow; // mutable height = height; // mutable cubeWidth = cubeWidth; // // SVG // const svg = d3.create("svg").attr("viewBox", [0, 0, widthNow, height]); // //.attr("transform", `translate(0,${margin.bottom - margin.top})`); // // Axis // const x = d3 // .scaleBand() // .domain(["Wahrnehmung"]) // .rangeRound([margin.left, widthPerChart * 0.75 - margin.right]) // .paddingInner(0.1); // const xAxis = (g) => // g // .attr("transform", `translate(0,${margin.top})`) // .call(d3.axisTop(x).tickSizeOuter(0)) // .call((g) => g.select(".domain").remove()); // const y = d3 // .scaleLinear() // .domain([0, d3.max(dataF, (d) => d.n_tot)].reverse()) // .nice() // .rangeRound([height - margin.bottom, margin.top]); // const yAxis = (g) => // g // .attr("transform", `translate(${widthPerChart * 1 - margin.right},0)`) // .call(d3.axisRight(y).ticks(widthNow / 80)) // .call((g) => g.select(".domain").remove()) // .call((g) => // g // .select(".tick:first-of-type text") // .clone() // .attr("x", 25) // .attr("y", 15) // .attr("text-anchor", "end") // .attr("font-weight", "bold") // .text("Anteil, %") // ); // // Squares // const kategorie = svg.selectAll(".gruppe").data(dataF); // const kgroup = kategorie // .enter() // .append("g") // .attr("id", (d) => d.bez) // .attr( // "transform", // (d, i) => "translate(" + i * widthPerChart + "," + margin.top + ")" // ); // kgroup // .selectAll("rect.pos") // .data(function (d) { // return d3.range(0, 40); // }) // .enter() // .append("rect") // .attr("class", "pos") // .attr("x", (d) => (d % 10) * (cubeWidth + padding)) // .attr("y", (d) => Math.floor(d / 10) * (cubeWidth + padding)) // .attr("height", cubeWidth) // .attr("width", cubeWidth) // .attr("fill", "#001b1b"); // kgroup // .selectAll("rect.good") // .data(function (d) { // return d3.range(40, 69); // }) // .enter() // .append("rect") // .attr("class", "good") // .attr("x", (d) => (d % 10) * (cubeWidth + padding)) // .attr("y", (d) => Math.floor(d / 10) * (cubeWidth + padding)) // .attr("height", cubeWidth) // .attr("width", cubeWidth) // .attr("fill", "#004a4c"); // kgroup // .selectAll("rect.bad") // .data(function (d) { // return d3.range(69, 87); // }) // .enter() // .append("rect") // .attr("class", "bad") // .attr("x", (d) => (d % 10) * (cubeWidth + padding)) // .attr("y", (d) => Math.floor(d / 10) * (cubeWidth + padding)) // .attr("height", cubeWidth) // .attr("width", cubeWidth) // .attr("fill", "#0a7e80"); // kgroup // .selectAll("rect.negative") // .data(function (d) { // return d3.range(87, 100); // }) // .enter() // .append("rect") // .attr("class", "negative") // .attr("x", (d) => (d % 10) * (cubeWidth + padding)) // .attr("y", (d) => Math.floor(d / 10) * (cubeWidth + padding)) // .attr("height", cubeWidth) // .attr("width", cubeWidth) // .attr("fill", "#00abae"); // // Call axis and legend // svg.append("g").call(xAxis); // svg.append("g").call(yAxis); // //svg.append("g").call(legend); // return svg.node(); // }35:T637,// viewof legend3 = { // const margin = { top: 30, right: 30, bottom: 30, left: 30 }; // const color = d3 // .scaleOrdinal() // .domain([...new Set(data3.map((d) => d.bez))]) // .range(["#001b1b", "#004a4c", "#0a7e80", "#00abae"]) // .unknown("#ccc"); // const x = d3 // .scaleBand() // .domain([ // "Positive Wahrnehmung", // "Eher positive\nWahrnehmung", // "Restliche Beurteilung" // ]) // .rangeRound([margin.left, mutable widthNow - margin.right]) // .paddingInner(0.1); // // SVG // const svg = d3 // .create("svg") // .attr("viewBox", [0, 0, widthNow, cubeWidth * 5.5]); // // Legend // const xLegend = d3 // .scaleBand() // .domain([...Array.from(new Set(data3.map((d) => d.bez)))]) // .rangeRound([0, x.bandwidth()]) // .padding(0.05); // const legend = (svg) => { // const g = svg // .attr("transform", `translate(${margin.left},0)`) // .attr("text-anchor", "start") // .attr("font-family", "sans-serif") // .attr("font-size", 10) // .selectAll("g") // .data(color.domain().slice()) // .join("g") // .attr("transform", (d, i) => `translate(0,${i * 20})`); // g.append("rect") // .attr("x", -30) // .attr("width", mutable cubeWidth) // .attr("height", mutable cubeWidth) // .attr("fill", color); // g.append("text") // .attr("x", -10) // .attr("y", 12) // //.attr("dy", "0.35em") // .text((d) => d); // }; // svg.append("g").call(legend); // return svg.node(); // }36:[{"id":"caf33787bf613df27be622f74d70e1c89ea4606bd11577834c4fc1c1d7aca8a5dcf49e0ec4305d1dc187ca990806a8b744098ea625cf263f474e225dec8ebd06","href":"https://static.observableusercontent.com/files/caf33787bf613df27be622f74d70e1c89ea4606bd11577834c4fc1c1d7aca8a5dcf49e0ec4305d1dc187ca990806a8b744098ea625cf263f474e225dec8ebd06","name":"ind3_lohngleichheit@3.csv","type":"text/csv","lastModified":1639096849109.946,"size":114}] 2f:{"id":"31b686fe46a2d26b","slug":null,"title":"Indikator 3","thumbnail":"acdde1945047819b88bd8ce1052885396bc94c85d241e8dd377de704d48dceb4","access_level":"public","create_time":"$D2021-11-23T14:06:46.628Z","update_time":"$D2024-09-05T05:49:02.132Z","view_time":null,"first_public_time":"$D2022-10-26T05:58:52.993Z","has_unpublished_edits":null,"fork":{"id":"8269566b36f3a27e","slug":null,"title":"Indikator 2","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":4148,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null}],"members":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"role":"editor"},{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"83cfa9ccfaa695bf","slug":"hrji-strategische-indikatoren","title":"HRJI - Strategische Indikatoren","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"Indikator 3","cells":[{"id":210,"value":"htl.html`

Indikator 3

Karriereentwicklung

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"txt3a = htl.html`\n

Wahrnehmung berufliche Weiterentwicklung

Mitarbeitendenbefragung 2021 (N=1'050)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3821,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3798,"value":"txt3b = htl.html`\n

Logib-Ergebnisse

Kanton Zürich auf Basis von Anstellungs- und Lohndaten, Dezember 2020

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4014,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"md`-----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"md`# Anhang`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2701,"value":"## Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2705,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3403,"value":"color3 = d3\n .scaleOrdinal()\n .domain([...new Set(d3.map(data3, (d) => d.bez))])\n .range([\"#004748\", \"#00797b\", \"lightgrey\"])\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2399,"value":"md`## Funktionen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"plotWidth = function (nPlots) {\n if (nPlots == 1) {\n // Entspricht Mobile\n if (width < 415) {\n return width * 0.88;\n } else if (width >= 415 && width < 768) {\n return width * 0.855;\n // Entspricht Tablets\n } else if (width >= 768 && width <= 1248) {\n return width * 0.877;\n // Entspricht Laptops & Desktops\n } else {\n return 1128 * 0.9275;\n }\n } else {\n // Entspricht Mobile\n if (width < 768) {\n return (width * 1.4) / nPlots;\n // Entspricht Tablets\n } else if (width >= 768 && width <= 1248) {\n return (width * 1.6) / nPlots;\n // Entspricht Laptops & Desktops\n } else {\n return (1128 * 0.92) / nPlots;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"mutable cubeWidth = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4006,"value":"chartWidth = d3.min([width, 768])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"mutable widthNow = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"mutable height = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"function legendConcept(data) {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, 60]);\n\n const legend = svg\n .append(\"g\")\n .attr(\"class\", \"legend\")\n .attr(\"height\", 0)\n .attr(\"width\", 0)\n .attr(\"transform\", \"translate(20,20)\");\n\n const legendRect = legend.selectAll(\"g\").data(data);\n\n const legendRectE = legendRect\n .enter()\n .append(\"g\")\n .attr(\"transform\", function (d, i) {\n return \"translate(0, \" + i * 30 + \")\";\n });\n\n legendRectE\n .append(\"path\")\n .attr(\n \"d\",\n d3\n .symbol()\n .type((d) => d[2])\n .size(200)\n )\n .style(\"fill\", (d) => d[1]);\n\n legendRectE\n .append(\"text\")\n .attr(\"x\", 15)\n .attr(\"y\", 5)\n .text((d) => d[0] + \" - \" + d[3]);\n\n //svg.append(\"g\").call(legend);\n //svg.append(\"g\").call(legendRectE);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"wrap = (...elems) => {\n const div = document.createElement(\"div\");\n elems.forEach((el) => div.appendChild(el));\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2467,"value":"nCol = {\n if (width >= 1100) {\n return 3;\n } else if (width < 1100 && width >= 750) {\n return 2;\n } else {\n return 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4063,"value":"nCol_Legend = {\n if (width >= 1100) {\n return 4;\n } else if (width < 1100 && width >= 750) {\n return 2;\n } else {\n return 2;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3296,"value":"data3 = [\n { y: 1, bez: \"Positiv\", n: 40, pct: 0.4, n_tot: 40, neu: 0 },\n { y: 1, bez: \"Eher positiv\", n: 29, pct: 0.29, n_tot: 69, neu: 29 },\n { y: 1, bez: \"Eher negativ\", n: 18, pct: 0.18, n_tot: 87, neu: 18 },\n { y: 1, bez: \"Negativ\", n: 13, pct: 0.13, n_tot: 100, neu: 13 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3692,"value":"data3b = await FileAttachment(\"ind3_lohngleichheit@3.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4133,"value":"Plot.plot({\n marks: [\n Plot.barY(data3b, {\n x: \"Personenkreis\",\n y: \"Geschlechtseffekt\",\n sort: { x: \"y\", reverse: true }\n }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"md`---------\n## Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"genderColor = [\n \"#483D8B\",\n \"#a87a09\",\n \"#0e0e7b\",\n \"#ed4415\",\n \"#00797B\",\n \"#7F3DA7\",\n \"#269eac\",\n \"#e37000\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"import {\n tidy,\n when,\n arrange,\n sort,\n desc,\n asc,\n groupBy,\n sum,\n leftJoin,\n summarize,\n mutate\n} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2050,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3387,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4140,"value":"import { fonts as ZHFonts } from \"@statistikzh/common-styles\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3300,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3523,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"