I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
myWidth = width * 0.9-100
myHeight = 600
puestosBogotaPct = vl
.markPoint({ tooltip: true })
.encode(
vl
.x()
.fieldO("id")
// .scale({ reverse: true })
.axis({ labels: false, ticks: false })
.title("Puestos de Votación")
.sort(orderings.get("Gustavo Petro").keys()),
// vl.facet().fieldO("data.Zona").columns(3),
vl.color().fieldN("candidato").scale(candidatesColorScale),
vl.size().fieldQ("votos"),
vl
.y()
.fieldQ("votos_pct")
.title("Porcentaje de votos con respecto al puesto"),
vl.detail().fieldN("data.Puesto")
)
.data(rankingOrdered)
.height(500)
.width(500)
.title({
text: "Puestos de votación en Bogotá por porcentaje de votación por candidato",
subtitle:
"En general, Bogotá se dividió por sectores. Los puestos en donde Petro ganó, Hernández generalmente fue el segundo",
anchor: "start",
fontSize: "18"
})
.config({ background: "#faf5e577" })
.render()
puestosBogotaPctAdjusted = vl
.markPoint({ tooltip: true })
.encode(
vl
.x()
.fieldO("id")
// .scale({ reverse: true })
.axis({ labels: false, ticks: false })
.title("Puestos de Votación")
.sort(orderings.get("Gustavo Petro").keys()),
// vl.facet().fieldO("data.Zona").columns(3),
vl.color().fieldN("candidato").scale(candidatesColorScale),
vl.size().fieldQ("votos"),
vl
.y()
.fieldQ("votos_pct_adjusted")
.title("Porcentaje de votos con respecto al puesto"),
vl.detail().fieldN("data.Puesto")
)
.data(rankingOrdered)
.height(500)
.width(500)
.title({
text:
"Puestos de votación en Bogotá por porcentaje ajustado de votación por candidato",
subtitle:
"Porcentaje calculado usando el porcentaje de votos que obtuvo el candidato por puesto, y luego dividido por el máximo pct del candidato en cualquier puesto",
anchor: "start",
fontSize: "18"
})
.config({ background: "#faf5e577" })
.render()
vl
.markLine({ tooltip: true, size: 0.5 })
.encode(
vl
.y()
.fieldQ("votos_pct")
// .scale({ reverse: true })
// .axis(null)
.sort(orderings.get("Gustavo Petro").keys()),
vl
.x()
.fieldN("candidato")
.sort([
"Rodolfo Hernández",
"Gustavo Petro",
"Federico Gutiérrez",
"Sergio Fajardo"
]),
vl.color().fieldO("id")
)
.data(rankingOrdered)
.height(600)
.width(width * 0.8)
.render()
vl
.markLine({ tooltip: true, opacity: 0.6, size: 0.5 })
.encode(
vl
.y()
.fieldO("id")
// .scale({ reverse: true })
.axis(null)
.sort(orderings.get("Gustavo Petro").keys()),
vl.color().fieldN("candidato"),
vl.x().fieldQ("votos_pct")
)
.data(rankingOrdered)
.height(600)
.width(width * 0.8)
.render()
candidatesOrdered = [
"Gustavo Petro",
"Federico Gutiérrez",
"Rodolfo Hernández",
"Sergio Fajardo",
"Votos en Blanco"
]
candidatesColorScale = ({
domain: [
"Federico Gutiérrez",
"Rodolfo Hernández",
"Gustavo Petro",
"Sergio Fajardo",
"Votos en Blanco"
],
range: [
"#a2356f", // "#871b55" // fico ,
"#fcd12c", // Hernández,
"#e5460f", // Petro,
"#019444", // Fajardo
"#aaa" // Blanco
]
})
vl
.markBar({ tooltip: true })
.encode(
vl
.x()
.fieldO("id")
// .scale({ reverse: true })
.axis({ labels: false, ticks: false })
.title("Puestos de Votación")
.sort(orderings.get("Gustavo Petro").keys()),
// vl.facet().fieldO("data.Zona").columns(3),
vl.color().fieldN("candidato").scale(candidatesColorScale),
// vl.size().fieldQ("votos"),
vl
.y()
.fieldQ("votos_pct")
.title("Porcentaje de votos con respecto al puesto")
// vl.detail().fieldN("data.Puesto")
)
.data(rankingOrdered)
.height(500)
.width(500)
.title({
text:
"Puestos de votación en Bogotá por porcentaje de votación por candidato",
subtitle:
"En general, Bogotá se dividió por sectores. Los lugares en donde a Petro le fue bien, también le fue bien a Hernández.",
anchor: "start",
fontSize: "18"
})
.render()
vl
.markCircle()
.encode(
vl.x().fieldQ("Gustavo Petro_rank"),
vl.y().fieldQ("Rodolfo Hernández_rank")
)
.data(bogotaByPostWithRankings)
.title("Correlación Petro vs Hernández en Bogotá")
.render()
vl
.markCircle()
.encode(
vl.x().fieldQ("Gustavo Petro_rank"),
vl.y().fieldQ("Federico Gutiérrez_rank")
)
.data(bogotaByPostWithRankings)
.title("Correlación Petro vs Fico en Bogotá")
.render()
vl
.markCircle()
.encode(
vl.x().fieldQ("Sergio Fajardo_rank").title("Posición del Puesto Fajardo"),
vl.y().fieldQ("Federico Gutiérrez_rank").title("Posición del Puesto Fico")
)
.data(bogotaByPostWithRankings)
.title("Correlación Fajardo vs Fico en Bogotá")
.render()
vl
.markCircle()
.encode(
vl.x().fieldQ("Sergio Fajardo_pct"),
vl.y().fieldQ("Federico Gutiérrez_pct")
)
.data(bogotaByPostWithRankings)
// .title("Correlación Fajardo vs Fico en Bogotá")
.render()
vl
.markCircle({ tooltip: true })
.encode(
vl.x().fieldQ("Gustavo Petro_pct"),
vl.y().fieldQ("Rodolfo Hernández_pct"),
vl.detail().fieldN("Puesto")
)
.data(bogotaByPostWithRankings)
// .title("Correlación Fajardo vs Fico en Bogotá")
.render()
{
const options = candidatesToCompare.map((c) => c + "");
return (
vl
.markPoint({ tooltip: true, size: 1 })
.encode(
vl
.x()
.fieldQ(vl.repeat("column"))
.scale({ domain: [0, 27000] }),
vl
.y()
.fieldQ(vl.repeat("row"))
.scale({ domain: [0, 27000] })
// vl.detail().fieldN("Puesto")
)
.width(150)
.height(150)
.repeat({ row: options, column: options.reverse() })
// .title("Correlación Fajardo vs Fico en Bogotá")
.data(bogotaByPostWithRankings)
.render()
);
}
{
const options = candidatesToCompare.map((c) => c + "_pct");
return (
vl
.markPoint({ tooltip: true, size: 1 })
.encode(
vl.x().fieldQ(vl.repeat("column")),
vl.y().fieldQ(vl.repeat("row"))
// vl.detail().fieldN("Puesto")
)
.width(150)
.height(150)
.repeat({ row: options, column: options.reverse() })
// .title("Correlación Fajardo vs Fico en Bogotá")
.data(bogotaByPostWithRankings)
.render()
);
}
{
const options = candidatesToCompare.map((c) => c + "_rank");
return (
vl
.markPoint({ tooltip: true, size: 1 })
.encode(
vl.x().fieldQ(vl.repeat("column")),
vl.y().fieldQ(vl.repeat("row"))
// vl.detail().fieldN("Puesto")
)
.width(150)
.height(150)
.repeat({ row: options, column: options.reverse() })
// .title("Correlación Fajardo vs Fico en Bogotá")
.data(bogotaByPostWithRankings)
.render()
);
}
rankings
navio(bogotaByPostWithRankings)
navio(rankings)
bogotaByPostWithRankings = bogotaByPost.map((d) => ({
...d,
...Object.fromEntries(
candidates
.slice(0, 11)
.map((c) => [c + "_rank", orderings.get(c).get(d.id)])
)
}))
orderings = {
mapPuestos;
return new Map(
candidates
.slice(0, 11)
.map((c) => [
c,
new Map(
bogotaByPost
.sort((a, b) => d3.descending(+a[c + "_pct"], +b[c + "_pct"]))
.map((d, i) => [d.id, i])
)
])
);
}
rankings = {
const maxPctPerCandidate = new Map(
candidates
.slice(0, 11)
.map((c) => [c, d3.max(bogotaByPost, (d) => d[c + "_pct"])])
);
return candidates
.slice(0, 11)
.map((c) =>
bogotaByPost.map((d, i) => ({
i: i,
id: d.id,
candidato: c,
posicion: orderings.get(c).get(d.id),
votos: d[c],
votos_pct: d[c + "_pct"],
votos_pct_cand: d[c + "_pct_cand"],
votos_pct_adjusted: d[c + "_pct"] / maxPctPerCandidate.get(c),
// ...Object.fromEntries([c, orderings.get(c).get(d.id)]),
data: d
}))
)
.flat();
}
bogotaByPost[0]
mapTotalCands = new Map(
candidates.map((c) => [c, bogotaByPost.reduce((p, d) => p + d[c], 0)])
)
mapPuestos = {
bogotaByPost.map((d) => {
// d.foci = mapC.path.centroid(d);
d.id = fmt2(d.Zona) + "-" + fmt3(d.Num_puesto);
const candidatesVotes = candidatesToCompare
.map((c, i) => ({
pct: d[c] / d.Total,
iCand: i
}))
.sort((a, b) => d3.descending(a.pct, b.pct));
// const candidatesVotes = candidatesToCompare.map((c) => d[c]);
for (let c of candidates) {
d[c + "_pct"] = d[c] / d.Total;
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(bogotaByPost.map((d) => [d.id, d]));
}
rankingOrdered = rankings
.filter((d) => candidatesToCompare.includes(d.candidato))
.sort(
(a, b) =>
d3.ascending(
candidatesOrdered.indexOf(a.candidato),
candidatesOrdered.indexOf(b.candidato)
) || d3.ascending(a.votos_pct, b.votos_pct)
)
// postsOrdered = Array.from(orderings.get(candidatesOrdered[0]).keys())
postsOrdered = {
mapPuestos;
const dataOrdered = bogotaByPost.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 + "_pct"], b[sortBy + "_pct"]);
}
});
let accum = 0;
return dataOrdered.map((d, i) => {
d.i = i;
d.x0 = x(accum);
d.accum = accum = accum + d.Total;
d.x1 = x(accum);
d.x = d.x0 + (d.x1 - d.x0) / 2;
return d.id;
});
}
bogotaByPost[2]
candidates = candidatesAll.slice(0, 11)
import {
bogotaByPost,
viewof candidatesToCompare,
candidates as candidatesAll,
fmt3,
fmt2
} from "@john-guerra/primera-vuelta-bogota-2022"
import { vl } from "@vega/vega-lite-api-v5"
import { navio } from "@john-guerra/navio"
d3 = require("d3@6")
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.
