function makeDeptsChart(
data,
{
facet = true,
width = 200,
height = 30,
columns = 3,
order = false,
stroke = true
} = {}
) {
let x = vl
.x()
.fieldO("codigo")
.axis({ grid: false, ticks: false, domain: false, labels: false })
.title("Municipios");
if (order) {
const scaleOrdered = data
.filter((d) => d["Elección"] === "Primera")
.map((d) => d.codigo);
x = x.scale({ domain: scaleOrdered });
} else {
x = x.sort("fill");
}
let chart = vl
.markRect({ tooltip: true, strokeWidth: 0.7, step: 1, align: "left" })
.encode(
x,
vl
.fill()
.fieldN("Ganador")
.scale({
domain: ["GUSTAVO_PETRO", "RODOLFO_HERNÁNDEZ", "FEDERICO_GUTIÉRREZ"],
range: ["#d8241f", "#1776b6", "#e6ab02"]
}),
vl
.y()
.fieldN("Elección")
.title(null)
.axis({ grid: false, ticks: false, domain: false }),
vl.detail(["mun", "VotosGanador", "votant", "dane"]),
vl
.opacity()
.fieldQ("PctGanador")
.scale({ format: ".2%", range: [0.2, 1] })
.title("% Ganador"),
vl.order().fieldQ("i")
)
.data(data)
.width(width)
.height(height)
.config({ legend: { symbolSize: 300, orient: "top", tickCount: 3 } })
.resolve({ scale: { x: "independent", y: "independent" } });
if (facet)
chart = chart.encode(
vl.facet().fieldN("Departamento").columns(columns).sort("Grupo").title("")
);
if (stroke)
chart = chart.encode(
vl
.stroke()
.fieldN("Cambio")
.scale({
domain: [true, false],
range: ["#222a", null]
})
.legend(null)
);
return chart;
}