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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.