30:T122b,view = { gemeinden .objects .STATISTIK_AUSTRIA_GEM_20200101Polygon .geometries .forEach(d => { d.id = d.properties.id }) const mapShape = vl.topojson(gemeinden) .feature('STATISTIK_AUSTRIA_GEM_20200101Polygon') const select = vl.selectPoint("select") .fields("Region") .on('click') .value(" ") // .value(search[0].Region) // .clear("touchmove") .toggle("event"); const selectDate = vl.selectInterval("selectDate") .encodings("x"); // .value({x: [0, 120000], y: [0, 10]}) .value({x: [0, 120000], y: [0, 10]}) const foreign = vl.data(data) .key('RegionCode') .fields('Region', "Gesamt", "in Euro", "Euro pro Nutzfläche"); const map = vl.markGeoshape({ stroke: 'white', strokeWidth: 0.66, clip: false }) .transform( vl.lookup('id').from(foreign), ) .encode( vl.color().value("lightgray") .if(selectDate, vl.color().fieldQ(button2) .scale({ "scheme": "spectral", "type": button }) .legend(null), ), ); const mapTooltip = vl.markGeoshape({ fill: "transparent", clip: false }) .transform( vl.lookup('id').from(foreign), ) .params(select) .encode( vl.tooltip([ {field: 'Region', title: "Region"}, {field: button2, title: "Value", format: ',.0f'} ]), vl.stroke() .if(select, vl.value("black")) .value("transparent"), vl.strokeWidth() .if(select, vl.value(1.25)) .value(0), ); const background = vl.markGeoshape({ stroke: 'black', strokeWidth: 3, fill: "transparent", clip: false }); const chartMap = vl.layer(background, map, mapTooltip) .data(mapShape) .project( vl.projection('conicEquidistant') .rotate([-13, 0.0]) .center([13.3457347, 47.6964719]) .parallels([35.0, 65.0]) .translate([1550 , 110]) .scale(8000) .clipExtent([[0,0], [2000,2000]]) ); const chartHistBase = vl.markBar({ stroke: "black", offset: 250 }) // .params(selectDate) .encode( vl.x() .bin({maxbins: 220, minstep: 1}) .fieldQ(button2) .axis({ orient: "top", title: null, offset: 0 }), vl.y({ aggregate: "count" }) .axis(null) .scale({ reverse: true }), vl.color().value("lightgray") .legend(null) .if(selectDate, vl.color().fieldQ(button2) .scale({ "scheme": "spectral", "type": button }) ), vl.tooltip("Region"), vl.strokeWidth() .if(select, vl.value(1.25)) .value(0), ); const chartText = vl.markText({ color: "transparent", dy: 400 }) .transform( vl.filter("datum.Region == 'Bad Ischl'") ) .encode( vl.x() .bin({maxbins: 200, minstep: 1}) .fieldQ(button2), vl.y({ aggregate: "count" }) .axis(null) .scale({ reverse: true }), vl.text().fieldQ(button2) ); const chartHist = vl.layer(chartHistBase, chartText) const areas = vl.markBar({fill: "transparent"}) .data(data) .params(selectDate) .encode( vl.x() .bin({maxbins: 75, minstep: 1}) .fieldQ(button2) .axis(null), vl.y({ aggregate: "count" }) .axis(null) .scale({ reverse: true }), ) .width(720) .height(30); return vl.vconcat( areas, vl.layer(chartHist, chartMap) .data(data) .height(180) .width(720) ) .resolve({ legend: {fill: "independent", color: "independent"}, scale: {fill: "independent", color: "independent", domain: "independent"}, axis: {y: "independent", x: "independent", domain: "independent"}, }) .config({ view: {stroke: null}, background: "transparent", font: "Source Sans Pro", title: { offset: 0, fontSize: 16, subtitleFontSize: 14, }, axis: { labelFontSize: 13, titleFontSize: 13, titleFontWeight: "normal", }, legend: { labelFontSize: 13, titleFontSize: 13, titleFontWeight: "normal", }, mark: { fontSize: 13 }, concat: { spacing: -1000 }, locale: {number: { decimal: ".", thousands: " ", format: ',.0f', grouping: [3] }} }) .render({renderer: 'svg'}); }31:T44f, 32:[{"id":"db2448b858a33e03a04a32cffa72655bad8d7f8f4a6750756624e6c7cffc8e77019cf58dc139138ff7607e0e1ab4f52f27958f2bf3c2253e210c1a2d07c7ad02","href":"https://static.observableusercontent.com/files/db2448b858a33e03a04a32cffa72655bad8d7f8f4a6750756624e6c7cffc8e77019cf58dc139138ff7607e0e1ab4f52f27958f2bf3c2253e210c1a2d07c7ad02","name":"Gemeinden.json","type":"application/json","lastModified":1684935535949.476,"size":483493},{"id":"c8c322ce3ca6158d7eddb92f87bf25e220a28966c6d9e34c107539a85086db7072ed3b6ae8d4911c0284c92bab0b9af9c182226ba47a647bf681467140c5cd0a","href":"https://static.observableusercontent.com/files/c8c322ce3ca6158d7eddb92f87bf25e220a28966c6d9e34c107539a85086db7072ed3b6ae8d4911c0284c92bab0b9af9c182226ba47a647bf681467140c5cd0a","name":"testData_gemeinden@3.csv","type":"text/csv","lastModified":1684937336192.137,"size":105987}] 2e:{"title":"Hanging Histogram","cells":[{"id":0,"value":"\n# Hanging Histogram\n ## The perfect solution for the upper left corner usage of austrian maps\nCareful: test data \n","pinned":false,"hidden":false,"mode":"md"},{"id":848,"value":"viewof button = Inputs.button([\n [\"quantile\", value => \"quantile\"],\n [\"absolute\", value => \"linear\"],\n ],\n {label: \"Scale colors:\", value: \"quantile\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1316,"value":"---\n\n\n# Appendix\n","pinned":false,"hidden":false,"mode":"md"},{"id":1415,"value":"makeWidth = function(inputWidth) {\n if (inputWidth<900) {\n return Math.sqrt(inputWidth+200)*12\n }\n if (inputWidth<1200) {\n return Math.sqrt(inputWidth+200)*9\n }\n if (inputWidth<1400) {\n return Math.sqrt(inputWidth+140)*10\n }\n if (inputWidth<1600) {\n return Math.sqrt(inputWidth+80)*11\n }\n else {\n return Math.sqrt(inputWidth)*13\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"// search[0].Region","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"// viewof search = Inputs.search(testDataGem, {label: \"Municipality\", placeholder: \"search\", autocomplete: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1345,"value":"viewof button2 = Inputs.button([\n [\"in Euro\", value => \"in Euro\"],\n [\"Euro pro Nutzfläche\", value => \"Euro pro Nutzfläche\"]\n ],\n {label: \"Einheit:\", value: \"in Euro\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"colors = [\"#2d76b3\", \"#559bd5\", \"#99c4e6\",\"#bbd7ee\", \"#ddebf7\", \"#e3f1e2\", \"#c7e3c6\", \"#abd6a9\", \"#72bb6f\", \"#4b9847\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"data = testDataGem.filter(d => d.Variable === \"Gesamt\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"testDataGem = FileAttachment(\"testData_gemeinden@3.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"gemeinden = FileAttachment(\"Gemeinden.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$31","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}