Data Scientist at the Austrian Institute for Economic Research and Lecturer at the Vienna University of Economics and Business
chartMini =
vl.hconcat(
vl.vconcat(
barsMini
.width(makeWidth(self.innerWidth) * 2)
.height(280)
))
.title({
text: " ",
subtitle: subtitle, // "Q: IMF, Statistik Austria, WIFO",
orient: "bottom",
anchor: "start"
})
.padding({"left": 5, "top": 5, "right": 5, "bottom": 5})
.config({
view: {stroke: "transparent"},
background: "transparent",
font: "FFDaxPro",
axis: {
labelFontSize: 14,
titleFontSize: 14,
titleFontWeight: "normal",
},
legend: {
labelFontSize: 14,
titleFontSize: 14,
titleFontWeight: "normal",
},
mark: {
fontSize: 14
},
title: {
fontSize: 16,
subtitleFontSize: 14,
},
locale: {number: {
decimal: ".",
thousands: ",",
grouping: [3],
format: ',.4'
}}
})
.render({renderer: 'svg'})
makeChartBarMini = function(data, domain, yTitle, toolTitle, formatLabels) {
const chartBar = vl.markBar({
stroke: "none",
size: makeWidth(self.innerWidth) / 10
})
.data(data)
.encode(
vl.x()
.fieldQ("outlength2")
.axis({
title: "Years after (hypothetical) programme start",
tickCount: 6,
grid: false,
tickMinStep: 1,
tickColor: "black",
tickWidth: 0.66,
domainColor: "black",
domainWidth: 0.66
}),
vl.y()
.fieldQ("value")
.scale({
// domain: domain,
padding: 20,
})
.axis({
title: yTitle,
domain: false,
ticks: false,
labelPadding: 10,
labelFLush: true,
minExtent: 34,
}),
vl.fill()
.fieldN("measure")
.scale({ range: ["#72bb6f","#559bd5"] })
.legend({
orient: "top",
direction: "vertical",
title: null,
labelLimit: width > 900 ? 1000 : 160,
values: ["Treatment group","Control group"]
}),//{ symbolType: "square" }
vl.tooltip([{'field': 'measure', 'title': "Gruppe"},{'field': 'value', 'title': yTitle, "format": formatLabels}]),
)
const chartTextDiffPatt = vl.markText({ fontSize: width > 1000 ? 14 : 12 })
.data(data
.filter(d => d.diff !== null)
)
.encode(
vl.x()
.fieldQ("outlength"),
vl.y()
.fieldQ("max_diff_patt"),
vl.text()
.fieldN("diff_patt")
)
const chartTextDiff = vl.markText({ fontSize: width > 1000 ? 14 : 12 })
.data(data
.filter(d => d.diff !== null)
)
.encode(
vl.x()
.fieldQ("outlength"),
vl.y()
.fieldQ("max_diff"),
vl.text()
.fieldN("diff")
)
const chartTextBar = vl.markText({ fontSize: width > 1000 ? 12 : 10 })
.data(data)
.encode(
vl.x()
.fieldQ("outlength2"),
vl.y()
.fieldQ("valueText1"),
vl.text({"field": "value", "type": "quantitative", "format": formatLabels})
)
const image = vl.markImage({
width: 30,
height: 30,
clip: false,
zindex: 1,
baseline: "bottom"
})
.data([{info: info}])
.encode(
vl.url()
.value("https://upload.wikimedia.org/wikipedia/commons/e/e4/Infobox_info_icon.svg"),
vl.x()
.value(250),
vl.y()
.value(-20),
vl.tooltip("info"),
)
const barChart = vl.layer(
chartBar,
chartTextBar,
chartTextDiff,
chartTextDiffPatt,
// image
)
return barChart
}
barsMini = makeChartBarMini(
data_anteile
.filter(d => d.frequency === "j")
.filter(d => d.outcome === select_outcome)
.filter(d => d.treatment === select_treatment),
[0,100],
"Percentage share",
null,
".3s"
)
subtitle = select_treatment != "Wage subsidy" ?
(width > 900 ?
[
"Source: WIFO INDI-DV based on Public Employment Service, Federation of Social Insurances and WIFO.",
"*** . . . significant at a 1 percent level, ** . . . significant at a 5 percent level, * . . . significant at a 10 percent level."
]
:
[
"Source: WIFO INDI-DV based on Public Employment Service,",
"Federation of Social Insurances and WIFO.",
"*** . . . significant at a 1 percent level,",
"** . . . significant at a 5 percent level,",
"* . . . significant at a 10 percent level."
]
)
:
(width > 900 ?
[
"Source: WIFO INDI-DV based on Public Employment Service, Federation of Social Insurances and WIFO.",
"°°° . . . significant at a 1 percent level, °° . . . significant at a 5 percent level, ° . . . significant at a 10 percent level.",
"Average effect computed from two control groups (with and without job take-up at start of subsidy)."
]
:
[
"Source: WIFO INDI-DV based on Public Employment Service,",
"Federation of Social Insurances and WIFO.",
"°°° . . . significant at a 1 percent level,",
"°° . . . significant at a 5 percent level,",
"° . . . significant at a 10 percent level.",
"Average effect computed from two control groups",
"(with and without job take-up at start of subsidy)."
]
)
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.
