30:T2a18,view = { var shape = await( FileAttachment('Bundesländer@1.json').json() ) shape .objects .STATISTIK_AUSTRIA_NUTS2_20160101 .geometries .forEach(d => { d.id = d.properties.NAME }) const mapShape = vl .topojson(shape) .feature('STATISTIK_AUSTRIA_NUTS2_20160101') const select = vl .selectPoint('select') .fields('BL_eng') .toggle('event') .on('click') .bind('legend') .init(["AUstria"]) .clear('none') .nearest(false); const selectDate = vl .selectInterval("selectDate") .encodings("x") // .value({x: data.filter(d => d.jahr > 2018).map(d => d.date)}); // ["2019-01-01", "2023-01-01"] const foreign = vl.data(data) .key('BL_long') .fields('BL_long', 'name_de', 'wert', 'jahr', 'date', 'datum_eng_tt', 'BL_eng'); const map = vl.markGeoshape({stroke: 'white', strokeWidth: 0.75 }) // .params(select) .encode( vl.color() // .if(select, vl.value("white")) .fieldQ('wert') .scale({ 'range': colors, 'type': button }) .legend({ orient: 'top-left', title: null, gradientLength: width > 900 ? 140: 80, direction: 'horizontal', format: ",.1~f", padding: 10 }), // vl.opacity() // .if(select, vl.value(0.5)) // .value(1), ); const mapTooltip = vl.markGeoshape({ fill: 'transparent' }) .encode( vl.tooltip([ {field: 'BL_eng', title: 'State'}, {field: 'wert', title: 'Value', format: ",.1~f" }, {field: 'datum_eng_tt', title: 'Date' } ]), vl.stroke() .if(select, vl.value('transparent')) // .if(select, vl.value('black')) .value('transparent'), vl.strokeWidth() .if(select, vl.value(1)) .value(0), ); const background = vl.markGeoshape({ stroke: 'black', strokeWidth: 2.5, fill: 'transparent' }) const chartMap = vl.layer(background, map, mapTooltip) .project(vl.projection('conicEquidistant') .rotate([-13, 0.0]) .center([13.3457347, 47.6964719]) .parallels([35.0, 65.0]) ); const lines = vl.markLine({ interpolate: "linear", point: { fill: "transparent", size: 200} }) .params(select) .transform( // vl.filter("datum.BL_long != 'Österreich'"), vl.filter(select), // vl.filter(selectDate) ) .encode( vl.x() .field('date') .axis({ title: null, domain: null, values: data.filter(d => d.monat == 1 || d.monat == 0).map(d => d.date), labelExpr: "substring(datum.label, 0, 4)", labelAngle: 0, labelPadding: 10, minExtent: 40, domainColor: "black", domainWidth: 0.75, tickColor: "black", tickCount: 5, tickWidth: 0.75, }), vl.y() .fieldQ('wert') .axis({ domain: false, ticks: false, title: null, labelBound: true, labelPadding: 10, minExtent: width > 900 ? 50 : 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('BL_eng') .legend({ // orient: "right", // columns: 1, title: null, symbolType: "stroke", padding: 6, values: [... names2].filter(d => d != "Austria"), // labelOffset: 5, // columnPadding: 30, }) .scale({ range: colorsDiscrete, type: button, domain: [... names2].filter(d => d != "Austria"), })) .value("#efefef"), vl.tooltip([ {field: 'BL_eng', title: 'Bundesland'}, {field: 'wert', title: 'Wert', format: ",.1~f" }, {field: 'datum_eng_tt', title: 'Zeitpunkt' } ]), ); const linesGray = vl.markLine({ interpolate: "linear", stroke: "#efefef", strokeWidth: 1.5 }) .transform( vl.filter("datum.BL_LONG != 'Österreich'"), // vl.filter(selectDate) ) .encode( vl.x() .field('date') .axis({ title: null, domain: null, values: data.filter(d => d.monat == 1 || d.monat == 0).map(d => d.date), labelExpr: "substring(datum.label, 0, 4)", labelAngle: 0, labelPadding: 10, }), vl.y() .fieldQ('wert') .axis({ domain: false, ticks: false, title: null, labelBound: true, labelPadding: 10, minExtent: width > 900 ? 50 : 15, format: ",.0~f", }), vl.color() .fieldN('BL_eng') .legend(null), ); const linesAT = vl.markLine({ interpolate: "linear", stroke: "#2d5b5e" }) .transform( vl.filter("datum.BL_long == 'Österreich'"), // vl.filter(selectDate) ) .encode( vl.x() .field('date'), vl.y() .fieldQ('wert'), vl.strokeDash() .fieldN('BL_eng') // .scale({ // range: [10,10]}) .legend({ orient: "none", legendY: width > 900 ? 160 : 455, legendX: width > 900 ? makeWidth(width) / 0.75 + makeWidth(width) / 1.25 + 93 : makeWidth(width) / 2.2 + 25, title: null, }), ); // const areas = vl.markArea({ opacity: 0.5 }) // { opacity: 0.66 } // .params(selectDate) // .transform( // vl.filter("datum.BL_long == 'Österreich'") // // vl.aggregate(vl.sum("value").as("value")).groupby("date"), // // vl.lookup("date").from(foreign) // ) // .encode( // vl.x() // .field('date') // .axis({ // title: null, // domain: null, // values: data.filter(d => d.monat == 1).map(d => d.date), // labelExpr: "substring(datum.label, 0, 4)", // labelAngle: 0, // labelPadding: 10, // }), // vl.y() // .fieldQ('wert') // .axis(null), // vl.color() // .value("gray"), // ) // .width(makeWidth(width)) // .height(30) const webChart = width > 900 ? vl.hconcat( chartMap .width(makeWidth(width) / 0.75) .height(280) .title({ text: " ", subtitle: "Regional distribution" + " " + data.map(d => d.datum_eng).slice(-1), anchor: "center", }), vl.vconcat( // areas // .data(data) // .width(makeWidth(width) / 1.25), vl.layer(linesGray, lines, linesAT) .data(data.filter(d => d.jahr >= slider[0] && d.jahr <= slider[1])) .resolve({ 'legend': {fill: 'independent', color: 'independent'}, 'scale': {fill: 'independent', color: 'independent'} }) .width(makeWidth(width) / 1.275) .height(240), // areas // .data(data) // .width(makeWidth(width) / 1.25), // .title({ // text: " ", // orient: "bottom", // subtitle: "Bei monatlichen Daten wird der Wert des letzten Monats im Quartal angezeigt", // anchor: "right", // subtitleFontSize: 9 // }), ) .title({ text: " ", subtitle: "Development over time", anchor: "center", }), ) : vl.vconcat( chartMap .width(makeWidth(width) / 1.28) .height(210) .title({ text: " ", subtitle: "Regional distribution" + " in the " + data.map(d => d.datum_eng).slice(-1), anchor: "center", }), vl.vconcat( // areas // .data(data) // .width(makeWidth(width) / 1.5), vl.layer(linesGray, lines, linesAT) .data(data.filter(d => d.jahr >= slider[0] && d.jahr <= slider[1])) .resolve({ 'legend': {fill: 'independent', color: 'independent'}, 'scale': {fill: 'independent', color: 'independent'} }) .width(makeWidth(width) / 2.2) .height(200) .title({ text: " ", subtitle: "Development over time", anchor: "center", }), // areas // .data(data) // .width(makeWidth(width) / 1.5), // // .title({ // text: " ", // orient: "bottom", // subtitle: "Bei monatlichen Daten wird der Wert des letzten Monats im Quartal angezeigt", // anchor: "right", // subtitleFontSize: 9 // }), ) ) return webChart .data(mapShape) .transform( vl.lookup('id').from(foreign), ) .title({ text: " ", subtitle: data.map(d => d.source_en)[0], // [...names3].includes(select_variable) === true ? // makeTextLength( // data.map( // d => d.source_en // + " Value of last month of the quarter is shown." // ) // , 800 ? 120 : 60 // ) : // makeTextLength( // data.map( // d => d.description_en + "; " + d.source_en // ) // , 800 ? 120 : 60 // ), orient: "bottom", anchor: "start", // limit: 10000, subtitleLineHeight: 18, subtitlePadding: -10, // offset: 100, }) .resolve({ 'legend': {fill: 'independent', color: 'independent'}, 'scale': {fill: 'independent', color: 'independent'} }) .config({ view: {stroke: null}, background: "transparent", font: "FFDaxPro", 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] }} }) .render({renderer: 'svg'}); }31:[{"id":"588c92caf0148935197afc11419dbd7f8f421d6aebdf94a2f7c237822d5fa0f5d144681a2aa666c0f3f746a28d2a3dbd5c8fc9facf1e0b3afacd0a6a48bfdd26","href":"https://static.observableusercontent.com/files/588c92caf0148935197afc11419dbd7f8f421d6aebdf94a2f7c237822d5fa0f5d144681a2aa666c0f3f746a28d2a3dbd5c8fc9facf1e0b3afacd0a6a48bfdd26","name":"Bundesländer@1.json","type":"application/json","lastModified":1700566537169.842,"size":21767}] 2e:{"title":"Regional economic indicators at a glance","cells":[{"id":0,"value":"\n# Regional economic indicators at a glance\n## FG4 web chart\n","pinned":false,"hidden":false,"mode":"md"},{"id":2418,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2398,"value":"title = htl.html`\n

Regional economic indicators at a glance

${subtitle}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"viewof select_variable = groupedSelect({\n title: '',\n groups: [\n {\n label: \"MAIN⠀INDICATORS\",\n options: [...names4],\n disabled: false\n },\n {\n label: \"WIFO-KONJUNKTURTEST\",\n options: [names3[2], names3[0], names3[1], names3[3], names3[5], names3[4]],\n },\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2272,"value":"viewof slider = rangeSlider({\n min: Math.min(... inputData.filter(d => d.name_en === select_variable && d.wert !== null).map(d => d.jahr)),\n max: Math.max(... inputData.filter(d => d.name_en === select_variable && d.wert !== null).map(d => d.jahr)),\n step: 1,\n value: [Math.max(... inputData.filter(d => d.name_en === select_variable && d.wert !== null).map(d => d.jahr))-10, Math.max(... inputData.filter(d => d.name_en === select_variable && d.wert !== null).map(d => d.jahr))],\n // width: makeWidth(width),\n // format: d => formatDate(d3.timeHour.offset(start, d)),\n title: '',\n separator: ' → ',\n color: \"#2d5b5e\",\n // theme: theme_Retro1,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1505,"value":"---\n\n\n# Appendix\n","pinned":false,"hidden":false,"mode":"md"},{"id":848,"value":"viewof button = Inputs.button([\n ['Absolut', value => 'linear'],\n ['Quantile', value => 'quantile']\n ],\n {label: ''})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2476,"value":"subtitle = [...names3].includes(select_variable) === true ? \n data.map(\n d => d.description_en + \", value of first month of the quarter is shown\"\n )[0] :\n data.map(\n d => d.description_en\n )[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1725,"value":"dataAT = data\n .filter(d => d.BL_long == \"Österreich\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2596,"value":"data = data2\n .map(d => ({\n ...d, \n datum_eng: datum_eng \n }))\n .map(d => ({\n ...d, \n datum_eng_tt: d.datum_eng.charAt(0).toUpperCase() + d.datum_eng.slice(1)\n }));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"data2 = inputData\n .filter(d => d.name_en === select_variable)\n // .filter(d => d.jahr > 2013)\n .filter(d => d.wert !== null)\n .map(d => ({\n ...d, \n date: \n d.monat == 10 ?\n d.jahr + '-' + d.monat + '-01' :\n d.monat == 0 ? \n d.jahr + '-' + '01' + '-01' :\n d.jahr + '-0' + d.monat + '-01' \n })) \n .map(d => ({\n ...d, \n wert: \n names3.includes(select_variable) ?\n d.wert :\n d.wert // \n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2612,"value":"data2","pinned":false,"hidden":false,"mode":"ojs"},{"id":2461,"value":"datum_eng = data2.map(d => d.datum).slice(-1).toString().substr(0, 2) === \"20\" ?\n \"in \" + data2.map(d => d.datum).slice(-1) :\n data2.map(d => d.datum).slice(-1).toString().substr(0, 3) === \"I. \" ?\n \"in the first quarter of \" + data2.map(d => d.datum).slice(-1).toString().substr(data2.map(d => d.datum).slice(-1).length - 5) :\n data2.map(d => d.datum).slice(-1).toString().substr(0, 3) === \"II.\" ?\n \"in the second quarter of \" + data2.map(d => d.datum).slice(-1).toString().substr(data2.map(d => d.datum).slice(-1).length - 5) :\n data2.map(d => d.datum).slice(-1).toString().substr(0, 3) === \"III\" ?\n \"in the third quarter of \" + data2.map(d => d.datum).slice(-1).toString().substr(data2.map(d => d.datum).slice(-1).length - 5) : \n \"in the fourth quarter of \" + data2.map(d => d.datum).slice(-1).toString().substr(data2.map(d => d.datum).slice(-1).length - 5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2550,"value":"datum_eng.charAt(0).toUpperCase() + datum_eng.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"inputData = d3.csv(\"https://raw.githubusercontent.com/WIFOat/fg_data/main/data_fg4.csv\", d3.autoType) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1573,"value":"makeWidth = function(inputWidth) {\n if (inputWidth<900) {\n return Math.sqrt(inputWidth)*20\n }\n if (inputWidth<2000) {\n return Math.sqrt(inputWidth)*8\n }\n else {\n return Math.sqrt(inputWidth)*7\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1410,"value":"makeTextLength = function(textArray, length) {\n let result = [];\n let text = textArray[0];\n let startIndex = 0;\n while (startIndex < text.length) {\n let endIndex = startIndex + length;\n if (endIndex >= text.length) {\n endIndex = text.length;\n } else {\n endIndex = text.lastIndexOf(' ', endIndex);\n if (endIndex === -1 || endIndex <= startIndex) {\n endIndex = startIndex + length;\n }\n }\n result.push(text.substring(startIndex, endIndex));\n startIndex = endIndex + 1;\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"colorsDiscrete = [\n // \"black\",\n \"#559bd5\",\n \"#72bb6f\",\n \"#559e8f\",\n \"#12a7e7\",\n \"#96b428\",\n \"#c3423f\",\n \"#f3d039\",\n // \"lightgray\",\n // \"gray\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"colors = [\n '#2d76b3', \n '#559bd5', \n '#99c4e6',\n '#bbd7ee', \n '#ddebf7', \n '#e3f1e2', \n '#c7e3c6', \n '#abd6a9', \n '#72bb6f',\n '#4b9847'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2053,"value":"names5 = new Set(inputData.map(d => d.type))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1453,"value":"names4 = [... new Set(inputData.filter(d => d.type == \"Regionale Konjunkturindikatoren\").map(d => d.name_en)) ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1434,"value":"names3 = [... new Set(inputData.filter(d => d.type == \"WIFO-Konjunkturtest\").map(d => d.name_en)) ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"names2 = new Set(inputData.map(d => d.BL_eng))","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"names = new Set(inputData.map(d => d.name_en))","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"import {input} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1486,"value":"import {button as buttonDownload} from \"@jeremiak/download-data-button\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"import {groupedSelect} from \"@zzzev/grouped-dropdown-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2268,"value":"import { rangeSlider as rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}