{
const points = vl.markCircle()
.encode(
vl.x().fieldQ("proportion_of_women")
.sort(vl.field("year").order("ascending")),
vl.y().fieldQ("number_of_seats")
.sort(vl.field("year").order("ascending")),
vl.color().fieldN("party")
.scale({ domain: ["CVP", "FDP", "SP", "SVP"], range: ['#D6862B', '#3872B5','#F0554D','#4B8A3E']}),
vl.size().if("datum.year === 2019", vl.value(100)).value(30),
vl.fillOpacity().value(2),
vl.tooltip(["year", "party", "proportion_of_women"])
)
.width(150)
.height(150)
const lines = points.markLine({ interpolate: "monotone" })
.encode(
vl.size().value(1)
)
return vl.layer(points, lines)
.facet(vl.field("party"))
.data(parties)
.transform(
vl.groupby(["year", "party"]).pivot("gender").value("elected"),
vl.calculate("datum.Frau + datum.Mann").as("number_of_seats"),
vl.calculate("(datum.Frau / datum.number_of_seats) * 100").as("proportion_of_women")
)
.render({renderer: "SVG"});
}