30:Ta34,view = { const select = vl .selectPoint("select") .fields("indicator") .toggle("event") .on("click") .bind("legend") .value(["Gesamtwirtschaft", "Sachgütererzeugung"]) .clear("none") .nearest(false); const lines = vl.markLine({ interpolate: "linear", point: { fill: "transparent", size: 200} }) .params(select) .transform( vl.filter(select), ) .encode( vl.x() .fieldT("month") .axis({ title: null, domain: null, grid: false, format: "%b %y", labelAngle: -90, labelPadding: 10, minExtent: 80, domainColor: "black", domainWidth: 0.75, tickColor: "black", labelSeparation: 6, values: ticks, tickWidth: 0.75, }), vl.y() .fieldQ("value") .axis({ domain: false, ticks: false, title: null, labelBound: true, labelPadding: 10, minExtent: width > 900 ? 25 : 15, format: ",.0~f", }), vl.strokeWidth() .if(select, vl.value(2)) .value(1), vl.opacity() .if(select, vl.value(1)) .value(0), vl.color() .if( select, vl.color() .fieldN("indicator") .legend({ orient: "none", legendX: -55, legendY: width > 900 ? -40 : -100, direction: "vertical", labelLimit: 1000, columnPadding: 32, columns: width > 900 ? 5 : 1, title: null, symbolType: "stroke", padding: 6, values: [... new Set ([...data.map(d => d.indicator)]) ], }) .scale({ range: colorsDiscrete, domain: [... new Set ([...data.map(d => d.indicator)]) ], }) ) .value("#efefef"), vl.tooltip([ {field: "indicator", title: "Indikator"}, {field: "value", title: "Wert", format: ",.1~f" }, {field: "monthTT", title: "Monat" } ]), ); const linesGray = vl.markLine({ interpolate: "linear", stroke: "#efefef", strokeWidth: 1.5 }) .encode( vl.x() .fieldT("month"), vl.y() .fieldQ("value"), vl.color() .fieldN("indicator"), ); return vl.layer(linesGray, lines) .data(data) .width(makeWidth(width)) .config(config) .render({renderer: "svg"}); }31:T57a,config = ({ view: {stroke: null}, background: "transparent", font: "FFDaxPro", fontSize: 14, concat: { spacing: 20 }, title: { offset: 0, fontSize: 16, subtitleFontSize: 14, }, axis: { labelFontSize: 14, titleFontSize: 14, titleFontWeight: "normal", }, legend: { labelFontSize: 14, titleFontSize: 14, titleFontWeight: "normal", }, mark: { fontSize: 14 }, locale: { number: { decimal: ",", thousands: ".", grouping: [3] }, time: { dateTime: "%A %e %B %Y, %X", date: "%d/%m/%Y", time: "%H:%M:%S", periods: ["AM", "PM"], days: [ "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag" ], shortDays: [ "Mo", "Di", "Mi", "Do", "Fr", "Sa", "So" ], months: [ "Jänner", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember" ], shortMonths: [ "Jän", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez" ] } }, })32:[] 2e:{"title":"Konjunkturklimaindex","cells":[{"id":0,"value":"\n# Konjunkturklimaindex\n## KT-Webgrafik\n","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"\n---","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"title = htl.html`\n

Konjunkturklimaindex

Indexpunkte, saisonbereinigt

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"timeLabel = htl.html` ${d3.timeFormat(formatDate(d3.timeMonth.offset(start, slider[0])))} ⟶ ${formatDate(d3.timeMonth.offset(start, slider[1] +1))} `","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof slider = rangeSlider({\n min: 0,\n max: d3.timeMonth.count(start, end) - 1,\n step: 1,\n format: d => formatDate(d3.timeMonth.offset(start, d)),\n value: [\n d3.timeMonth.count(start, end) - 60, \n d3.timeMonth.count(start, end)\n ],\n width: makeWidth(width) * 1 ,\n title: \"\",\n separator: \" → \",\n color: \"#2d5b5e\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n\n\n# Appendix\n","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"ticks = lengthData < 60 ? \n data.filter(d => d.indicator == \"Gesamtwirtschaft\").filter((d, i) => i % 3 == 2).map(d => formatDateYMD(d.month)) :\n data.filter(d => d.indicator == \"Gesamtwirtschaft\").filter((d, i) => i % 6 == 2).map(d => formatDateYMD(d.month))","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"lengthData = [... new Set(data.filter(d => d.indicator == \"Gesamtwirtschaft\").map(d => d.month))].length","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"colorsDiscrete = [\n // \"black\",\n \"#c3423f\",\n \"#559bd5\",\n \"#72bb6f\",\n \"#559e8f\",\n // \"#12a7e7\",\n // \"#96b428\",\n \"#f3d039\",\n // \"lightgray\",\n // \"gray\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"[... new Set ([...data.map(d => d.indicator)]) ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"timeEndPlusOne = parseDate(formatDateYMD(d3.timeMonth.offset(start, slider[1] + 2)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"timeStartMinusOne = parseDate(formatDateYMD(d3.timeMonth.offset(start, slider[0] - 1)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"data = csv\n .filter(d => d.value !== \"NA\")\n .filter(d => slider[0] == slider[1] ? d.month >= timeStartMinusOne: d.month >= timeStart)\n .filter(d => slider[0] == slider[1] ? d.month <= timeEndPlusOne : d.month <= timeEndPlusOne)\n .map(d => ({...d, monthTT: formatDate(d.month)}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"timeEnd= parseDate(formatDateYMD(d3.timeMonth.offset(start, slider[1] + 1)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"timeStart = parseDate(formatDateYMD(d3.timeMonth.offset(start, slider[0])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"end2 = d3.max(csv.map(d => d.month))","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"end = csv.map(d => d.month)[[csv.map(d => d.month).length - 1]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"start = csv.map(d => d.month)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"formatDateYMD = {\n const locale = await d3.json(\"https://cdn.jsdelivr.net/npm/d3-time-format@4/locale/de-DE.json\");\n d3.timeFormatDefaultLocale(locale);\n return d3.timeFormat(\"%Y-%m-%d\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"formatDate = {\n const locale = await d3.json(\"https://cdn.jsdelivr.net/npm/d3-time-format@4/locale/de-DE.json\");\n d3.timeFormatDefaultLocale(locale);\n return d3.timeFormat(\"%b %Y\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"csv = d3.csv(\n \"https://raw.githubusercontent.com/WIFOat/fg_data/main/data_kt.csv\", \n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"import { rangeInput as rangeSlider } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import {vl} from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"makeWidth = function(inputWidth) {\n if (inputWidth<600) {\n return Math.sqrt(inputWidth)*15\n }\n if (inputWidth<750) {\n return Math.sqrt(inputWidth)*17\n }\n if (inputWidth<900) {\n return Math.sqrt(inputWidth)*18\n }\n if (inputWidth<1050) {\n return Math.sqrt(inputWidth)*20\n }\n if (inputWidth<1300) {\n return Math.sqrt(inputWidth)*22\n }\n else {\n return 960\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}