Public
Edited
Mar 12
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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'})
Insert cell
Insert cell
subtitle = select_treatment != "Eingliederungsbeihilfe (EB)" ?
(width > 900 ?
[
"Q: WIFO INDI-DV auf Basis von Arbeitsmarktservice, Dachverband der Sozialversicherungsträger und WIFO.",
"*** . . . signifikant auf einem Niveau von 1%, ** . . . signifikant auf einem Niveau von 5%, * . . . signifikant auf einem Niveau von 10%."
]
:
[
"Q: WIFO INDI-DV auf Basis von Arbeitsmarktservice,",
"Dachverband der Sozialversicherungsträger und WIFO.",
"*** . . . signifikant auf einem Niveau von 1%,",
"** . . . signifikant auf einem Niveau von 5%,",
"* . . . signifikant auf einem Niveau von 10%."
]
)
:
(width > 900 ?
[
"Q: WIFO INDI-DV auf Basis von Arbeitsmarktservice, Dachverband der Sozialversicherungsträger und WIFO.",
"°°° . . . signifikant auf einem Niveau von 1%, °° . . . signifikant auf einem Niveau von 5%, ° . . . signifikant auf einem Niveau von 10%.",
"Durchschnittlicher Effekt aus zwei Kontrollgruppen (mit und ohne Beschäftigungsaufnahme bei Förderbeginn)"
]
:
[
"Q: WIFO INDI-DV auf Basis von Arbeitsmarktservice,",
"Dachverband der Sozialversicherungsträger und WIFO.",
"°°° . . . signifikant auf einem Niveau von 1%,",
"°° . . . signifikant auf einem Niveau von 5%,",
"° . . . signifikant auf einem Niveau von 10%.",
"Durchschnittlicher Effekt aus zwei Kontrollgruppen",
"(mit und ohne Beschäftigungsaufnahme bei Förderbeginn)"
]
)
Insert cell
Insert cell
Insert cell
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: "Jahre nach (hypothetischem) Förderbeginn",
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,
minExtent: 34,
labelFlush: true,
}),
vl.fill()
.fieldN("measure")
.scale({ range: ["#72bb6f","#559bd5"] })
.legend({
orient: "top",
direction: "vertical",
title: null,
labelLimit: width > 900 ? 1000 : 160,
values: ["Treatmentgruppe","Kontrollgruppe"]
}),//{ 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://data-science.wifo.ac.at/observable/fg2_de/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
}
Insert cell
barsMini = makeChartBarMini(
data_anteile
.filter(d => d.frequency === "j")
.filter(d => d.outcome === select_outcome)
.filter(d => d.treatment === select_treatment),
[0,100],
"Anteil in %",
null,
".3s"
)
.title({
text: " ",
subtitle: " " // Effekte auf den Anteil in der Erwerbsposition zum Stichzeitpunkt
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more