I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Nov 10, 2022
5 stars
x = d3
.scaleLinear()
.domain([0, d3.sum(data, (d) => d.votant)])
.range([0.1, myWidth])
myWidth = width * 0.7
myHeight = 500
// munsOrdered = Array.from(orderings.get(candidatesOrdered[0]).keys())
munsOrdered = {
mapPuestos;
const dataOrdered = data.sort((a, b) => {
if (sortBy === "Ganador") {
return (
d3.ascending(a.candidatesVotes[0].iCand, b.candidatesVotes[0].iCand) || // first by winner
// d3.ascending(a.candidatesRanking, b.candidatesRanking) || // then by whole ranking
d3.ascending(a.candidatesVotes[0].pct, b.candidatesVotes[0].pct) // then by pct of the winner
);
} else {
return d3.ascending(a[sortBy + "_pvot"], b[sortBy + "_pvot"]);
}
});
let accum = 0;
return dataOrdered.map((d, i) => {
d.i = i;
d.x0 = x(accum);
d.accum = accum = accum + d.votant;
d.x1 = x(accum);
d.x = d.x0 + (d.x1 - d.x0) / 2;
return d.id;
});
}
candidatesOrdered = [
"GUSTAVO_PETRO_vot",
"RODOLFO_HERNÁNDEZ_vot",
"FEDERICO_GUTIÉRREZ_vot",
"SERGIO_FAJARDO_vot"
]
candidatesColorScale = ({
domain: [
"FEDERICO_GUTIÉRREZ_vot",
"RODOLFO_HERNÁNDEZ_vot",
"GUSTAVO_PETRO_vot",
"SERGIO_FAJARDO_vot"
],
range: [
"#a2356f", // "#871b55" // fico ,
"#fbcc17", // Hernández,
"#e5460f", // Petro,
"#019444" // Fajardo
]
})
orderings = {
mapPuestos;
return new Map(
candidates
.slice(0, 11)
.map((c) => [
c,
new Map(
data
.sort((a, b) =>
d3.descending(
+a[c.replace("_vot", "_pvot")],
+b[c.replace("_vot", "_pvot")]
)
)
.map((d, i) => [d.codigo, i])
)
])
);
}
rankings = {
const maxPctPerCandidate = new Map(
candidates
.slice(0, 11)
.map((c) => [c, d3.max(data, (d) => d[c.replace("_vot", "_pvot")])])
);
return candidates
.slice(0, 11)
.map((c) =>
data.map((d, i) => ({
i: i,
id: d.id,
candidato: c,
posicion: orderings.get(c).get(d.id),
votos: d[c],
// votos_pct: d[c.replace("_vot", "_pvot")],
votos_pct: d[c] / d.votant,
votos_pct_cand: d[c + "_pct_cand"],
votos_pct_adjusted:
d[c.replace("_vot", "_pvot")] / maxPctPerCandidate.get(c),
// ...Object.fromEntries([c, orderings.get(c).get(d.id)]),
data: d
}))
)
.flat();
}
mapTotalCands = new Map(
candidates.map((c) => [c, data.reduce((p, d) => p + d[c], 0)])
)
mapPuestos = {
data.map((d) => {
// d.foci = mapC.path.centroid(d);
d.id = d.codigo;
const candidatesVotes = candidates
.map((c, i) => ({
pct: d[c.replace("_vot", "_pvot")],
iCand: i
}))
.sort((a, b) => d3.descending(a.pct, b.pct));
for (let c of candidates) {
d[c.replace("_vot", "_pct")] = d[c.replace("_vot", "_pvot")];
d[c + "_pct_cand"] = d[c] / mapTotalCands.get(c);
}
d.iWinner = candidatesVotes[0].iCand;
d.Ganador = candidatesVotes[0].pct;
d.candidatesVotes = candidatesVotes;
d.candidatesRanking = candidatesVotes.map((d) => d.iCand).join(",");
// if (d.data) {
// d.data.r = d.data[attrR];
// } else {
// console.log("data is undefined", d);
// }
return d;
});
return new Map(data.map((d) => [d.id, d]));
}
depts = Array.from(d3.group(dataRaw, (d) => d.dpto).keys()).sort()
data = dataRaw.filter((d) => selectedDepts.includes(d.dpto))
candidates = [
"GUSTAVO_PETRO_vot",
"RODOLFO_HERNÁNDEZ_vot",
"FEDERICO_GUTIÉRREZ_vot",
"SERGIO_FAJARDO_vot"
]
import { data as dataRaw } from "@john-guerra/primera-vuelta-colombia-2022"
import { vl } from "@john-guerra/vega-lite-api-v5"
import { searchCheckbox } from "@john-guerra/search-checkbox"
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.
